keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

feat: themed modal colors and making progress through different dialogs

Browse Source 
styled inputs in modals, fixed member list item and radio button styling, fixed some borders
pull/2522/head
William Grant 3 years ago
parent de7d0f2bdb
commit a47e96ca34
18 changed files with 210 additions and 167 deletions
Show Stats Download Patch File Download Diff File

20
stylesheets/_mentions.scss
Unescape Escape View File

@ -3,26 +3,6 @@
max-height: 240px; max-height: 240px;
overflow-y: auto; overflow-y: auto;
margin: 4px; margin: 4px;
.check-mark {
float: right;
text-align: center;
color: darkslategrey;
margin: 4px;
min-width: 20px;
}
}
.member-list-container {
margin: 0;
padding: 0;
max-height: 240px;
overflow-y: scroll;
.check-mark {
display: none;
}
} }
.module-conversation-list-item--mentioned-us { .module-conversation-list-item--mentioned-us {

32
stylesheets/_modal.scss
Unescape Escape View File

@ -4,7 +4,7 @@
left: 0; left: 0;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
background-color: rgba(0, 0, 0, 0.3); background-color: var(--modal-background-color);
padding: 0 20px; padding: 0 20px;
z-index: 100; z-index: 100;
overflow-y: auto; overflow-y: auto;
@ -14,10 +14,10 @@
max-width: 350px; max-width: 350px;
margin: 100px auto; margin: 100px auto;
padding: 1em; padding: 1em;
background-color: white; background-color: var(--modal-background-content-color);
border-radius: $border-radius; border-radius: $border-radius;
overflow: auto; overflow: auto;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: var(--modal-drop-shadow);
} }
} }
@ -76,7 +76,7 @@
.edit-profile-dialog { .edit-profile-dialog {
.error-message { .error-message {
text-align: center; text-align: center;
color: red; color: var(--danger-color);
display: block; display: block;
user-select: none; user-select: none;
} }
@ -102,10 +102,10 @@
max-width: 75%; max-width: 75%;
min-width: 60%; min-width: 60%;
padding: 1em; padding: 1em;
background: white; background: var(--modal-background-content-color);
border-radius: $border-radius; border-radius: $border-radius;
overflow: auto; overflow: auto;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 15px 0px var(--modal-background-color);
} }
input[type='radio'] { input[type='radio'] {
@ -122,7 +122,6 @@
border: 0; border: 0;
outline: none; outline: none;
border-radius: 4px; border-radius: 4px;
background-color: var(--color-lighter-gray-color);
&:focus { &:focus {
outline: none; outline: none;
@ -143,9 +142,13 @@
} }
input { input {
background-color: var(--color-input-background); background-color: var(--input-background-color);
color: var(--color-text); color: var(--input-text-color);
border: var(--border-session); border: 1px solid var(--input-border-color);
&::placeholder {
color: var(--input-text-placeholder-color);
}
} }
} }
@ -180,7 +183,7 @@
height: 30px; height: 30px;
width: 30px; width: 30px;
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: var(--white-color);
transition: var(--default-duration); transition: var(--default-duration);
&:hover { &:hover {
@ -212,9 +215,10 @@
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
font-size: $session-font-md; font-size: $session-font-md;
background: var(--color-input-background); // TODO Theming - Is this redundant?
color: var(--color-text); background-color: var(--input-background-color);
border: var(--border-session); color: var(--input-text-color);
border: 1px solid var(--input-border-color);
} }
&-uneditable { &-uneditable {

17
stylesheets/_session.scss
Unescape Escape View File

@ -183,8 +183,9 @@ label {
visibility: hidden; visibility: hidden;
} }
// TODO Theming update
.Toastify__toast { .Toastify__toast {
background: var(--modal-background-color); background: var(--modal-background-content-color);
color: var(--modal-text-color); color: var(--modal-text-color);
border-left: 4px solid var(--primary-color); border-left: 4px solid var(--primary-color);
@ -205,11 +206,11 @@ label {
max-height: 70vh; max-height: 70vh;
max-width: calc(min(70vw, 800px)); max-width: calc(min(70vw, 800px));
font-family: $session-font-default; font-family: $session-font-default;
background-color: var(--color-modal-background); background-color: var(--modal-background-content-color);
color: var(--color-text); color: var(--modal-text-color);
border: var(--border-session); border: 1px solid var(--border-color);
border-radius: 14px; border-radius: 14px;
box-shadow: var(--color-session-shadow); box-shadow: var(--modal-drop-shadow);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -313,7 +314,7 @@ label {
&__text-highlight { &__text-highlight {
@include text-highlight(var(--primary-color)); @include text-highlight(var(--primary-color));
color: var(--black-color); color: var(--modal-text-color);
font-family: monospace; font-family: monospace;
font-style: normal; font-style: normal;
@ -395,10 +396,10 @@ label {
transition: var(--default-duration); transition: var(--default-duration);
&:first-child { &:first-child {
border-top: var(--border-color); border-top: 1px solid var(--border-color);
} }
&:last-child { &:last-child {
border-top: var(--border-color); border-top: 1px solid var(--border-color);
} }
.session-icon { .session-icon {

32
stylesheets/_session_signin.scss
Unescape Escape View File

@ -2,7 +2,7 @@
&-fullscreen { &-fullscreen {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--color-white-color); background-color: var(--background-primary-color);
} }
&-content { &-content {
&-accent { &-accent {
@ -56,7 +56,7 @@
} }
@mixin registration-label-mixin { @mixin registration-label-mixin {
color: var(--color-text); color: var(--text-primary-color);
font-weight: bold; font-weight: bold;
padding: 20px; padding: 20px;
@ -90,7 +90,7 @@
height: 46.5px; height: 46.5px;
width: 280px; width: 280px;
font-family: $session-font-default; font-family: $session-font-default;
color: var(--color-text); color: var(--text-primary-color);
padding: 2px 0 2px 0; padding: 2px 0 2px 0;
transition: opacity var(--default-duration); transition: opacity var(--default-duration);
@ -100,7 +100,7 @@
label { label {
line-height: 14px; line-height: 14px;
opacity: 0; opacity: 0;
color: var(--color-text); color: var(--text-primary-color);
font-size: 10px; font-size: 10px;
line-height: 11px; line-height: 11px;
@ -113,7 +113,7 @@
} }
&.error { &.error {
color: var(--color-destructive); color: var(--danger-color);
} }
input { input {
@ -122,7 +122,7 @@
height: 14px; height: 14px;
width: 280px; width: 280px;
background: transparent; background: transparent;
color: var(--color-text); color: var(--input-text-color);
font-family: $session-font-default; font-family: $session-font-default;
font-size: 12px; font-size: 12px;
@ -130,10 +130,14 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
&::placeholder {
color: var(--input-text-placeholder-color);
}
} }
hr { hr {
border: var(--border-session); border: 1px solid var(--border-color);
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -151,7 +155,7 @@
&-terms-conditions-agreement { &-terms-conditions-agreement {
padding-top: var(--margins-md); padding-top: var(--margins-md);
color: var(--color-text-subtle); color: var(--text-secondary-color);
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
@ -159,15 +163,15 @@
white-space: nowrap; white-space: nowrap;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
color: var(--color-text-subtle); color: var(--text-secondary-color);
transition: var(--default-duration); transition: var(--default-duration);
&:visited &:link { &:visited &:link {
color: var(--color-text-subtle); color: var(--text-secondary-color);
} }
&:hover { &:hover {
color: var(--color-text); color: var(--text-primary-color);
} }
} }
} }
@ -176,7 +180,7 @@
padding-top: 0; padding-top: 0;
padding-bottom: 20px; padding-bottom: 20px;
// TODO Theming needs to be updated // TODO Theming needs to be updated
color: rgba(black, 0.6); color: rgba(var(--black-color), 0.6);
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
@ -202,7 +206,7 @@
outline: 0; outline: 0;
border: none; border: none;
background: transparent; background: transparent;
color: var(--color-text); color: var(--text-primary-color);
font-size: var(--font-size-md); font-size: var(--font-size-md);
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
@ -220,6 +224,6 @@
[contenteditable='true']:empty::before { [contenteditable='true']:empty::before {
content: attr(placeholder); content: attr(placeholder);
color: var(--color-text-subtle); color: var(--text-secondary-color);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
} }

151
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -1,110 +1,103 @@
.dark-theme { .dark-theme {
// _debugLog // _debugLog
// TODO Theming - Most of this should be removed when the debug window is properly styled
.debug-log { .debug-log {
&.modal { &.modal {
.content { .content {
textarea { textarea {
background-color: var(--color-darkest-gray-color); background-color: var(--input-background-color);
border: 1px solid var(--color-gray-color); border: 1px solid var(--border-color);
color: var(--color-lighter-gray-color); color: var(--input-text-color);
} }
} }
} }
.result { .result {
.open { .open {
border: solid 1px var(--color-gray-color); textarea {
background-color: var(--color-darkest-gray-color); background-color: var(--input-background-color);
color: var(--color-lighter-gray-color); border: 1px solid var(--border-color);
color: var(--input-text-color);
&:before { &:before {
@include header-icon-white('../images/open_link.svg'); @include color-svg('../images/open_link.svg', var(--button-icon-stroke-color));
}
} }
}
.link { .link {
color: var(--color-lighter-gray-color); color: var(--text-primary-color);
border: solid 1px var(--color-gray-color); border: 1px solid var(--border-color);
border-right: none; border-right: none;
background-color: var(--color-darkest-gray-color); background-color: var(--background-primary-color);
}
} }
} }
}
// _global // _global
.title-bar { .title-bar {
color: var(--color-lighter-gray-color); color: var(--text-primary-color);
} }
button.grey { // TODO Theming - Do we still use this?
border: solid 1px var(--color-light-gray-color); button.grey {
color: var(--color-gray-color); border: 1px solid var(--color-light-gray-color);
background: var(--color-lightest-gray-color); color: var(--color-gray-color);
box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5); background: var(--color-lightest-gray-color);
box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5);
&:hover { &:hover {
box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7); box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7);
}
} }
}
.loading { .loading {
position: relative; position: relative;
&::before { // TODO Theming - Review
border: solid 3px; &::before {
border-color: var(--color-light-blue-color) var(--color-light-blue-color) border: 3px solid;
var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important; border-color: var(--color-light-blue-color) var(--color-light-blue-color)
var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
}
} }
}
.x { .x {
&:before { &:before {
@include color-svg('../images/x.svg', var(--color-white-color)); @include color-svg('../images/x.svg', var(--white-color));
}
} }
}
// TODO Theming - Do we use this anywhere? // TODO Theming - Do we use this anywhere?
// .hint { // .hint {
// color: var(--color-white-color); // color: var(--color-white-color);
// border: 2px dashed var(--color-white-color); // border: 2px dashed var(--color-white-color);
// &.firstRun { // &.firstRun {
// &:before, // &:before,
// &:after { // &:after {
// border: solid 10px var(--color-white-color); // border: solid 10px var(--color-white-color);
// border-color: transparent var(--color-white-color) transparent transparent; // border-color: transparent var(--color-white-color) transparent transparent;
// } // }
// &:after { // &:after {
// border-color: transparent var(--color-dark-blue-color) transparent transparent; // border-color: transparent var(--color-dark-blue-color) transparent transparent;
// } // }
// } // }
// } // }
// TODO Theming - I don't think we use this. // TODO Theming - I don't think we use this.
// .contact.placeholder { // .contact.placeholder {
// color: var(--color-white-color); // color: var(--color-white-color);
// border: 2px dashed var(--color-white-color); // border: 2px dashed var(--color-white-color);
// p { // p {
// color: var(--color-white-color); // color: var(--color-white-color);
// } // }
// &:before, // &:before,
// &:after { // &:after {
// border: solid 10px var(--color-white-color); // border: solid 10px var(--color-white-color);
// border-color: transparent transparent var(--color-white-color) transparent; // border-color: transparent transparent var(--color-white-color) transparent;
// } // }
// &:after { // &:after {
// border-color: transparent transparent var(--color-dark-blue-color) transparent; // border-color: transparent transparent var(--color-dark-blue-color) transparent;
// } // }
// }
// _modal
// TODO Theming
.modal {
background-color: rgba(var(--color-black-color-rgb), 0.3);
.content {
background-color: var(--color-darkest-gray-color);
box-shadow: 0px 3px 5px 0px var(--color-light-black-color);
}
} }
} }

4
ts/components/MemberListItem.tsx
Unescape Escape View File

@ -42,7 +42,7 @@ const StyledSessionMemberItem = styled.button<{
: null}; : null};
:not(:last-child) { :not(:last-child) {
border-bottom: var(--border-color); border-bottom: 1px solid var(--border-color);
} }
`; `;
@ -101,7 +101,7 @@ export const MemberListItem = (props: {
style={ style={
!inMentions && !disableBg !inMentions && !disableBg
? { ? {
backgroundColor: 'var(--background-secondary-color)', backgroundColor: 'var(--background-primary-color)',
} }
: {} : {}
} }

17
ts/components/SessionHeaderSearchInput.tsx
Unescape Escape View File

@ -1,14 +1,9 @@
import styled from 'styled-components'; import styled from 'styled-components';
export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>` export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
color: var( color: var(--input-text-color);
${props => (props.darkMode ? '--color-lighter-gray-color' : '--color-lighter-gray-color')} background-color: var(--input-background-color);
); border: 1px solid var(--input-border-color);
background-color: var(
${props => (props.darkMode ? '--color-darkest-gray-color' : '--color-darkest-gray-color')}
);
border: 1px solid
var(${props => (props.darkMode ? '--color-dark-gray-color' : '--color-gray-color')});
padding: 0 26px 0 30px; padding: 0 26px 0 30px;
margin-inline-start: 8px; margin-inline-start: 8px;
margin-inline-end: 8px; margin-inline-end: 8px;
@ -21,14 +16,14 @@ export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
font-weight: normal; font-weight: normal;
position: relative; position: relative;
border-radius: ${props => (props.darkMode ? '14px' : '4px')}; border-radius: '4px';
&::placeholder { &::placeholder {
color: var(--color-light-gray-color); color: var(--input-text-placeholder-color);
} }
&:focus { &:focus {
border: solid 1px var(${props => (props.darkMode ? '--color-accent' : '--color-text')}); border: solid 1px var(${props => (props.darkMode ? '--primary-color' : '--input-text-color')});
outline: none; outline: none;
} }
`; `;

7
ts/components/basic/SessionRadio.tsx
Unescape Escape View File

@ -35,6 +35,7 @@ const StyledLabel = styled.label<{
beforeMargins?: string; beforeMargins?: string;
}>` }>`
cursor: pointer; cursor: pointer;
color: var(--text-primary-color);
:before { :before {
content: ''; content: '';
@ -43,8 +44,8 @@ const StyledLabel = styled.label<{
transition: var(--default-duration); transition: var(--default-duration);
padding: ${props => props.filledSize}px; padding: ${props => props.filledSize}px;
outline: var(--text-primary-color) solid 1px;
border: none; border: none;
outline: 1px solid currentColor; /* CSS varibles didn't work here */
outline-offset: ${props => props.outlineOffset}px; outline-offset: ${props => props.outlineOffset}px;
${props => props.beforeMargins && `margin: ${props.beforeMargins};`}; ${props => props.beforeMargins && `margin: ${props.beforeMargins};`};
} }
@ -85,7 +86,6 @@ export const SessionRadio = (props: Props) => {
beforeMargins={beforeMargins} beforeMargins={beforeMargins}
aria-label={label} aria-label={label}
data-testid={`label-${value}`} data-testid={`label-${value}`}
// TODO Theming does this need a selected color
> >
{label} {label}
</StyledLabel> </StyledLabel>
@ -94,12 +94,13 @@ export const SessionRadio = (props: Props) => {
}; };
const StyledInputOutlineSelected = styled(StyledInput)` const StyledInputOutlineSelected = styled(StyledInput)`
color: var(--text-primary-color);
label:before, label:before,
label:before { label:before {
outline: none; outline: none;
} }
:checked + label:before { :checked + label:before {
outline: var(--text-primary-color) solid 1px; outline-color: 1px solid currentColor;
} }
`; `;
const StyledLabelOutlineSelected = styled(StyledLabel)<{ selectedColor: string }>` const StyledLabelOutlineSelected = styled(StyledLabel)<{ selectedColor: string }>`

2
ts/components/calling/CallInFullScreenContainer.tsx
Unescape Escape View File

@ -22,7 +22,7 @@ const CallInFullScreenVisible = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--black-color); background-color: var(--black-color);
border: var(--border-color); border: 1px solid var(--border-color);
opacity: 1; opacity: 1;
`; `;

4
ts/components/calling/DraggableCallContainer.tsx
Unescape Escape View File

@ -20,8 +20,8 @@ export const DraggableCallWindow = styled.div`
width: 12vw; width: 12vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--modal-background-color); background-color: var(--modal-background-content-color);
border: var(--border-color); border: 1px solid var(--border-color);
`; `;
export const StyledVideoElement = styled.video<{ isVideoMuted: boolean }>` export const StyledVideoElement = styled.video<{ isVideoMuted: boolean }>`

4
ts/components/calling/IncomingCallDialog.tsx
Unescape Escape View File

@ -20,8 +20,8 @@ export const CallWindow = styled.div`
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--modal-background-color); background-color: var(--modal-background-content-color);
border: var(--border-color); border: 1px solid var(--border-color);
`; `;
const IncomingCallAvatarContainer = styled.div` const IncomingCallAvatarContainer = styled.div`

1
ts/components/dialog/SessionModal.tsx
Unescape Escape View File

@ -27,6 +27,7 @@ interface State {
isVisible: boolean; isVisible: boolean;
} }
// TODO Theming - Can we remove this.
export class SessionModal extends React.PureComponent<Props, State> { export class SessionModal extends React.PureComponent<Props, State> {
public static defaultProps = { public static defaultProps = {
showExitIcon: true, showExitIcon: true,

1
ts/components/leftpane/LeftPaneSectionContainer.tsx
Unescape Escape View File

@ -5,7 +5,6 @@ export const LeftPaneSectionContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border-right: var(--border-color);
overflow-y: auto; overflow-y: auto;
.session-icon-button { .session-icon-button {

2
ts/components/leftpane/LeftPaneSectionHeader.tsx
Unescape Escape View File

@ -47,7 +47,7 @@ export const StyledLeftPaneBanner = styled.div`
background: var(--background-primary-color); background: var(--background-primary-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-bottom: var(--border-color); border-bottom: 1px solid var(--border-color);
`; `;
const StyledBannerInner = styled.div` const StyledBannerInner = styled.div`

3
ts/components/leftpane/overlay/OverlayClosedGroup.tsx
Unescape Escape View File

@ -32,7 +32,8 @@ const StyledGroupMemberListContainer = styled.div`
width: 100%; width: 100%;
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
border: var(--border-color); border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
`; `;
const NoContacts = () => { const NoContacts = () => {

2
ts/components/leftpane/overlay/OverlayMessageRequest.tsx
Unescape Escape View File

@ -29,7 +29,7 @@ const MessageRequestListPlaceholder = styled.div`
const MessageRequestListContainer = styled.div` const MessageRequestListContainer = styled.div`
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
border: var(--border-color); border: 1px solid var(--border-color);
margin-bottom: auto; margin-bottom: auto;
`; `;

12
ts/themes/SessionTheme.tsx
Unescape Escape View File

@ -626,9 +626,11 @@ export const SessionGlobalStyles = createGlobalStyle`
/* TODO Theming - Should Pills have their own colors? */ /* TODO Theming - Should Pills have their own colors? */
/* Modals */ /* Modals */
--modal-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; --modal-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.3);
--modal-background-content-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
--modal-text-color: var(--text-primary-color); --modal-text-color: var(--text-primary-color);
--modal-text-danger-color: var(--danger-color); --modal-text-danger-color: var(--danger-color);
--modal-drop-shadow: 0px 0px 10px rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22);
/* Toasts */ /* Toasts */
--toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1); --toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1);
@ -677,6 +679,14 @@ export const SessionGlobalStyles = createGlobalStyle`
--lightbox-caption-background-color: 'rgba(192, 192, 192, .40)'; --lightbox-caption-background-color: 'rgba(192, 192, 192, .40)';
--lightbox-icon-stroke-color: var(--white-color); --lightbox-icon-stroke-color: var(--white-color);
/* Inputs */
/* Also used for some TextAreas */
--input-background-color: var(--background-secondary-color);
--input-background-hover-color: var(--background-secondary-color);
--input-text-placeholder-color: var(--text-secondary-color);
--input-text-color: var(--text-primary-color);
--input-border-color: var(--border-color);
}; };
`; `;

66
ts/themes/switchTheme.tsx
Unescape Escape View File

@ -324,7 +324,7 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
); );
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--modal-background-color', '--modal-background-content-color',
THEMES.CLASSIC_LIGHT.COLOR6 THEMES.CLASSIC_LIGHT.COLOR6
); );
document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)'); document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
@ -410,6 +410,21 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
'rgba(192, 192, 192, .40)' 'rgba(192, 192, 192, .40)'
); );
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)'); document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
document.documentElement.style.setProperty(
'--input-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--input-background-hover-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--input-text-placeholder-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
} }
function loadClassicDark(primaryColor?: PrimaryColorStateType) { function loadClassicDark(primaryColor?: PrimaryColorStateType) {
@ -725,8 +740,8 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
); );
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--modal-background-color', '--modal-background-content-color',
'var(--background-secondary-color)' 'var(--background-primary-color)'
); );
document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)'); document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)'); document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)');
@ -809,6 +824,21 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
'rgba(192, 192, 192, .40)' 'rgba(192, 192, 192, .40)'
); );
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)'); document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
document.documentElement.style.setProperty(
'--input-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--input-background-hover-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--input-text-placeholder-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
} }
function loadOceanLight(primaryColor?: PrimaryColorStateType) { function loadOceanLight(primaryColor?: PrimaryColorStateType) {
@ -1128,7 +1158,7 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
); );
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--modal-background-color', '--modal-background-content-color',
'var(--background-primary-color)' 'var(--background-primary-color)'
); );
document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)'); document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
@ -1214,6 +1244,18 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
'rgba(192, 192, 192, .40)' 'rgba(192, 192, 192, .40)'
); );
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)'); document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
document.documentElement.style.setProperty('--input-background-color', THEMES.OCEAN_LIGHT.COLOR5);
document.documentElement.style.setProperty(
'--input-background-hover-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--input-text-placeholder-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
} }
function loadOceanDark(primaryColor?: PrimaryColorStateType) { function loadOceanDark(primaryColor?: PrimaryColorStateType) {
@ -1525,8 +1567,8 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
); );
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--modal-background-color', '--modal-background-content-color',
'var(--background-primary-color)' 'var(--background-secondary-color)'
); );
document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)'); document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)'); document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)');
@ -1609,6 +1651,18 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
'rgba(192, 192, 192, .40)' 'rgba(192, 192, 192, .40)'
); );
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)'); document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
document.documentElement.style.setProperty('--input-background-color', THEMES.OCEAN_DARK.COLOR3);
document.documentElement.style.setProperty(
'--input-background-hover-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--input-text-placeholder-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
} }
export async function switchTheme(theme: ThemeStateType) { export async function switchTheme(theme: ThemeStateType) {

Write Preview
Loading…
Cancel
Save