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

feat: ocean light and dark use new system

Browse Source
pull/2522/head
William Grant 3 years ago
parent 8c97cbcafa
commit 32a6c921c2
3 changed files with 299 additions and 846 deletions
Show Stats Download Patch File Download Diff File

144
ts/themes/oceanDark.ts
Unescape Escape View File

@ -0,0 +1,144 @@
import { hexColorToRGB } from '../util/hexColorToRGB';
import { COLORS, THEMES } from './constants/colors';
import { ThemeColorVariables } from './variableColors';
export const oceanDark: ThemeColorVariables = {
'--primary-color': THEMES.OCEAN_DARK.PRIMARY,
'--danger-color': THEMES.OCEAN_DARK.DANGER,
'--disabled-color': THEMES.OCEAN_DARK.DISABLED,
'--background-primary-color': THEMES.OCEAN_DARK.COLOR1,
'--background-secondary-color': THEMES.OCEAN_DARK.COLOR2,
'--text-primary-color': THEMES.OCEAN_DARK.COLOR7!,
'--text-secondary-color': THEMES.OCEAN_DARK.COLOR5,
'--border-color': THEMES.OCEAN_DARK.COLOR4,
'--text-box-background-color': 'var(--background-secondary-color)',
'--text-box-text-control-color': 'var(--text-secondary-color)',
'--text-box-text-user-color': 'var(--text-primary-color)',
'--text-box-border-color': 'var(--border-color)',
'--message-bubbles-sent-background-color': 'var(--primary-color)',
'--message-bubbles-received-background-color': THEMES.OCEAN_DARK.COLOR4,
'--message-bubbles-sent-text-color': THEMES.OCEAN_DARK.COLOR0,
'--message-bubbles-received-text-color': 'var(--text-primary-color)',
'--menu-button-background-color': 'var(--primary-color)',
'--menu-button-background-hover-color': THEMES.OCEAN_DARK.COLOR6,
'--menu-button-icon-color': THEMES.OCEAN_DARK.COLOR7!,
'--chat-buttons-background-color': THEMES.OCEAN_DARK.COLOR2,
'--chat-buttons-background-hover-color': THEMES.OCEAN_DARK.COLOR4,
'--chat-buttons-icon-color': THEMES.OCEAN_DARK.COLOR7!,
'--settings-tab-background-color': 'var(--background-primary-color)',
'--settings-tab-background-hover-color': THEMES.OCEAN_DARK.COLOR3,
'--settings-tab-background-selected-color': THEMES.OCEAN_DARK.COLOR3,
'--settings-tab-text-color': 'var(--text-primary-color)',
'--button-outline-background-color': 'var(--transparent-color)',
'--button-outline-background-hover-color': `rgba(${hexColorToRGB(
THEMES.OCEAN_DARK.COLOR7!
)}, 0.3)`,
'--button-outline-text-color': 'var(--text-primary-color)',
'--button-outline-text-hover-color': 'var(--text-primary-color)',
'--button-outline-border-color': 'var(--primary-color)',
'--button-outline-border-hover-color': 'var(--text-primary-color)',
'--button-outline-disabled-color': 'var(--disabled-color)',
'--button-solid-background-color': 'var(--background-secondary-color)',
'--button-solid-background-hover-color': THEMES.OCEAN_DARK.COLOR4,
'--button-solid-text-color': 'var(--text-primary-color)',
'--button-solid-text-hover-color': 'var(--text-primary-color)',
'--button-solid-disabled-color': THEMES.OCEAN_DARK.COLOR4,
'--button-solid-shadow-color': 'none',
'--button-simple-text-color': 'var(--text-primary-color)',
'--button-simple-disabled-color': 'var(--disabled-color)',
'--button-icon-background-color': 'var(--transparent-color)',
'--button-icon-stroke-color': 'var(--text-secondary-color)',
'--button-icon-stroke-hover-color': 'var(--text-primary-color)',
'--button-icon-stroke-selected-color': 'var(--text-primary-color)',
'--conversation-tab-background-color': 'var(--background-primary-color)',
'--conversation-tab-background-hover-color': THEMES.OCEAN_DARK.COLOR3,
'--conversation-tab-background-selected-color': THEMES.OCEAN_DARK.COLOR3,
'--conversation-tab-background-unread-color': THEMES.OCEAN_DARK.COLOR2,
'--conversation-tab-text-color': 'var(--text-secondary-color)',
'--conversation-tab-text-selected-color': 'var(--text-primary-color)',
'--conversation-tab-text-unread-color': 'var(--text-primary-color)',
'--conversation-tab-text-secondary-color': 'var(--text-secondary-color)',
'--conversation-tab-bubble-background-color': 'var(--primary-color)',
'--conversation-tab-bubble-text-color': THEMES.OCEAN_DARK.COLOR0,
'--conversation-tab-color-strip-color': 'var(--primary-color)',
'--search-bar-background-color': THEMES.OCEAN_DARK.COLOR3,
'--search-bar-text-control-color': 'var(--text-secondary-color)',
'--search-bar-text-user-color': 'var(--text-primary-color)',
'--search-bar-icon-color': 'var(--text-secondary-color)',
'--search-bar-icon-hover-color': 'var(--text-primary-color)',
'--scroll-bar-track-color': 'none',
'--scroll-bar-thumb-color': THEMES.OCEAN_DARK.COLOR4,
'--scroll-bar-thumb-hover-color': THEMES.OCEAN_DARK.COLOR5,
'--zoom-bar-track-color': THEMES.OCEAN_DARK.COLOR4,
'--zoom-bar-thumb-color': 'var(--primary-color)',
'--zoom-bar-interval-color': 'var(--primary-color)',
'--toggle-switch-ball-color': 'var(--white-color)',
'--toggle-switch-ball-shadow-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.15)`,
'--toggle-switch-off-background-color': 'var(--transparent-color)',
'--toggle-switch-off-border-color': 'var(--white-color)',
'--toggle-switch-on-background-color': 'var(--primary-color)',
'--toggle-switch-on-border-color': 'var(--transparent-color)',
'--unread-messages-alert-background-color': 'var(--primary-color)',
'--unread-messages-alert-text-color': THEMES.OCEAN_DARK.COLOR0,
'--button-color-mode-stroke-color': 'var(--text-secondary-color)',
'--button-color-mode-hover-color': 'var(--text-secondary-color)',
'--button-color-mode-fill-color': 'var(--transparent-color)',
'--emoji-reaction-bar-background-color': 'var(--background-secondary-color)',
'--emoji-reaction-bar-icon-background-color': 'var(--background-primary-color)',
'--emoji-reaction-bar-icon-color': 'var(--text-primary-color)',
'--modal-background-content-color': 'var(--background-secondary-color)',
'--modal-text-color': 'var(--text-primary-color)',
'--modal-text-danger-color': 'var(--danger-color)',
'--toast-background-color': 'var(--background-secondary-color)',
'--toast-text-color': 'var(--text-primary-color)',
'--toast-color-strip-color': 'var(--primary-color)',
'--toast-progress-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`,
'--right-panel-item-background-color': 'var(--background-secondary-color)',
'--right-panel-item-background-hover-color': THEMES.OCEAN_DARK.COLOR4,
'--right-panel-item-text-color': 'var(--text-primary-color)',
'--session-logo-text-light-filter': 'none',
'--session-logo-text-dark-filter': 'none',
'--session-logo-text-current-filter': 'var(--session-logo-text-light-filter)',
'--context-menu-background-color': 'var(--background-primary-color)',
'--context-menu-background-hover-color': 'var(--primary-color)',
'--context-menu-text-color': 'var(--text-primary-color)',
'--context-menu-text-hover-color': 'var(--black-color)',
'--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`,
'--suggestions-background-color': 'var(--background-secondary-color)',
'--suggestions-background-hover-color': THEMES.OCEAN_DARK.COLOR4,
'--suggestions-text-color': 'var(--text-primary-color)',
'--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
'--input-background-color': THEMES.OCEAN_DARK.COLOR3,
'--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)',
};

144
ts/themes/oceanLight.ts
Unescape Escape View File

@ -0,0 +1,144 @@
import { hexColorToRGB } from '../util/hexColorToRGB';
import { COLORS, THEMES } from './constants/colors';
import { ThemeColorVariables } from './variableColors';
export const oceanLight: ThemeColorVariables = {
'--primary-color': THEMES.OCEAN_LIGHT.PRIMARY,
'--danger-color': THEMES.OCEAN_LIGHT.DANGER,
'--disabled-color': THEMES.OCEAN_LIGHT.DISABLED,
'--background-primary-color': THEMES.OCEAN_LIGHT.COLOR7!,
'--background-secondary-color': THEMES.OCEAN_LIGHT.COLOR6,
'--text-primary-color': THEMES.OCEAN_LIGHT.COLOR1,
'--text-secondary-color': THEMES.OCEAN_LIGHT.COLOR2,
'--border-color': THEMES.OCEAN_LIGHT.COLOR3,
'--text-box-background-color': 'var(--background-primary-color)',
'--text-box-text-control-color': 'var(--text-secondary-color)',
'--text-box-text-user-color': 'var(--text-primary-color)',
'--text-box-border-color': 'var(--border-color)',
'--message-bubbles-sent-background-color': 'var(--primary-color)',
'--message-bubbles-received-background-color': THEMES.OCEAN_LIGHT.COLOR4,
'--message-bubbles-sent-text-color': 'var(--text-primary-color)',
'--message-bubbles-received-text-color': 'var(--text-primary-color)',
'--menu-button-background-color': 'var(--primary-color)',
'--menu-button-background-hover-color': THEMES.OCEAN_LIGHT.COLOR3,
'--menu-button-icon-color': THEMES.OCEAN_LIGHT.COLOR1,
'--chat-buttons-background-color': THEMES.OCEAN_LIGHT.COLOR5,
'--chat-buttons-background-hover-color': THEMES.OCEAN_LIGHT.COLOR3,
'--chat-buttons-icon-color': 'var(--text-primary-color)',
'--settings-tab-background-color': 'var(--background-primary-color)',
'--settings-tab-background-hover-color': THEMES.OCEAN_LIGHT.COLOR6,
'--settings-tab-background-selected-color': THEMES.OCEAN_LIGHT.COLOR5,
'--settings-tab-text-color': 'var(--text-primary-color)',
'--button-outline-background-color': 'var(--transparent-color)',
'--button-outline-background-hover-color': `rgba(${hexColorToRGB(
THEMES.OCEAN_LIGHT.COLOR0
)}, 0.1)`,
'--button-outline-text-color': 'var(--text-primary-color)',
'--button-outline-text-hover-color': 'var(--text-primary-color)',
'--button-outline-border-color': 'var(--text-primary-color)',
'--button-outline-border-hover-color': 'var(--text-primary-color)',
'--button-outline-disabled-color': 'var(--disabled-color)',
'--button-solid-background-color': 'var(--background-primary-color)',
'--button-solid-background-hover-color': THEMES.OCEAN_LIGHT.COLOR6,
'--button-solid-text-color': 'var(--text-primary-color)',
'--button-solid-text-hover-color': 'var(--text-primary-color)',
'--button-solid-disabled-color': THEMES.OCEAN_LIGHT.COLOR4,
'--button-solid-shadow-color': `rgba(${hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR0)}, 0.25)`,
'--button-simple-text-color': 'var(--text-primary-color)',
'--button-simple-disabled-color': 'var(--disabled-color)',
'--button-icon-background-color': 'var(--transparent-color)',
'--button-icon-stroke-color': 'var(--text-secondary-color)',
'--button-icon-stroke-hover-color': 'var(--text-primary-color)',
'--button-icon-stroke-selected-color': 'var(--text-primary-color)',
'--conversation-tab-background-color': 'var(--background-primary-color)',
'--conversation-tab-background-hover-color': THEMES.OCEAN_LIGHT.COLOR5,
'--conversation-tab-background-selected-color': THEMES.OCEAN_LIGHT.COLOR5,
'--conversation-tab-background-unread-color': 'var(--background-secondary-color)',
'--conversation-tab-text-color': 'var(--text-secondary-color)',
'--conversation-tab-text-selected-color': 'var(--text-primary-color)',
'--conversation-tab-text-unread-color': 'var(--text-primary-color)',
'--conversation-tab-text-secondary-color': 'var(--text-secondary-color)',
'--conversation-tab-bubble-background-color': 'var(--primary-color)',
'--conversation-tab-bubble-text-color': 'var(--text-primary-color)',
'--conversation-tab-color-strip-color': 'var(--primary-color)',
'--search-bar-background-color': THEMES.OCEAN_LIGHT.COLOR5,
'--search-bar-text-control-color': 'var(--text-secondary-color)',
'--search-bar-text-user-color': 'var(--text-primary-color)',
'--search-bar-icon-color': 'var(--text-secondary-color)',
'--search-bar-icon-hover-color': 'var(--text-primary-color)',
'--scroll-bar-track-color': 'none',
'--scroll-bar-thumb-color': THEMES.OCEAN_LIGHT.COLOR4,
'--scroll-bar-thumb-hover-color': THEMES.OCEAN_LIGHT.COLOR3,
'--zoom-bar-track-color': THEMES.OCEAN_LIGHT.COLOR4,
'--zoom-bar-thumb-color': 'var(--primary-color)',
'--zoom-bar-interval-color': 'var(--text-secondary-color)',
'--toggle-switch-ball-color': 'var(--white-color)',
'--toggle-switch-ball-shadow-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.15)`,
'--toggle-switch-off-background-color': 'var(--transparent-color)',
'--toggle-switch-off-border-color': 'var(--border-color)',
'--toggle-switch-on-background-color': 'var(--primary-color)',
'--toggle-switch-on-border-color': 'var(--transparent-color)',
'--unread-messages-alert-background-color': 'var(--primary-color)',
'--unread-messages-alert-text-color': THEMES.OCEAN_LIGHT.COLOR0,
'--button-color-mode-stroke-color': 'var(--text-secondary-color)',
'--button-color-mode-hover-color': 'var(--text-primary-color)',
'--button-color-mode-fill-color': 'var(--transparent-color)',
'--emoji-reaction-bar-background-color': 'var(--background-primary-color)',
'--emoji-reaction-bar-icon-background-color': 'var(--background-secondary-color)',
'--emoji-reaction-bar-icon-color': 'var(--text-primary-color)',
'--modal-background-content-color': 'var(--background-primary-color)',
'--modal-text-color': 'var(--text-primary-color)',
'--modal-text-danger-color': 'var(--danger-color)',
'--toast-background-color': 'var(--background-primary-color)',
'--toast-text-color': 'var(--text-primary-color)',
'--toast-color-strip-color': 'var(--primary-color)',
'--toast-progress-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`,
'--right-panel-item-background-color': 'var(--background-secondary-color)',
'--right-panel-item-background-hover-color': THEMES.OCEAN_LIGHT.COLOR4,
'--right-panel-item-text-color': 'var(--text-primary-color)',
'--session-logo-text-light-filter': 'brightness(0) saturate(100%)',
'--session-logo-text-dark-filter': 'none',
'--session-logo-text-current-filter': 'var(--session-logo-text-light-filter)',
'--context-menu-background-color': 'var(--background-primary-color)',
'--context-menu-background-hover-color': 'var(--primary-color)',
'--context-menu-text-color': 'var(--text-primary-color)',
'--context-menu-text-hover-color': 'var(--black-color)',
'--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`,
'--suggestions-background-color': 'var(--background-secondary-color)',
'--suggestions-background-hover-color': THEMES.OCEAN_LIGHT.COLOR4,
'--suggestions-text-color': 'var(--text-primary-color)',
'--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
'--input-background-color': THEMES.OCEAN_LIGHT.COLOR5,
'--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)',
};

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

@ -1,851 +1,16 @@
import { hexColorToRGB } from '../util/hexColorToRGB';
import { classicDark } from './classicDark';
import { classicLight } from './classicLight';
import { COLORS, PrimaryColorStateType, THEMES, ThemeStateType } from './constants/colors';
import { COLORS, ThemeStateType } from './constants/colors';
import { oceanDark } from './oceanDark';
import { oceanLight } from './oceanLight';
import { loadThemeColors } from './variableColors';
function loadOceanLight(primaryColor?: PrimaryColorStateType) {
document.documentElement.style.setProperty(
'--primary-color',
primaryColor && primaryColor !== THEMES.OCEAN_LIGHT.PRIMARY
? primaryColor
: THEMES.OCEAN_LIGHT.PRIMARY
);
document.documentElement.style.setProperty('--danger-color', THEMES.OCEAN_LIGHT.DANGER);
document.documentElement.style.setProperty('--disabled-color', THEMES.OCEAN_LIGHT.DISABLED);
document.documentElement.style.setProperty(
'--background-primary-color',
THEMES.OCEAN_LIGHT.COLOR7!
);
document.documentElement.style.setProperty(
'--background-secondary-color',
THEMES.OCEAN_LIGHT.COLOR6
);
document.documentElement.style.setProperty('--text-primary-color', THEMES.OCEAN_LIGHT.COLOR1);
document.documentElement.style.setProperty('--text-secondary-color', THEMES.OCEAN_LIGHT.COLOR2);
document.documentElement.style.setProperty('--border-color', THEMES.OCEAN_LIGHT.COLOR3);
document.documentElement.style.setProperty(
'--text-box-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--text-box-text-control-color',
'--text-secondary-color'
);
document.documentElement.style.setProperty(
'--text-box-text-user-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty('--text-box-border-color', 'var(--border-color)');
document.documentElement.style.setProperty(
'--message-bubbles-sent-background-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--message-bubbles-received-background-color',
THEMES.OCEAN_LIGHT.COLOR4
);
document.documentElement.style.setProperty(
'--message-bubbles-sent-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--message-bubbles-received-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--menu-button-background-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--menu-button-background-hover-color',
THEMES.OCEAN_LIGHT.COLOR3
);
document.documentElement.style.setProperty('--menu-button-icon-color', THEMES.OCEAN_LIGHT.COLOR1);
document.documentElement.style.setProperty(
'--chat-buttons-background-color',
THEMES.OCEAN_LIGHT.COLOR5
);
document.documentElement.style.setProperty(
'--chat-buttons-background-hover-color',
THEMES.OCEAN_LIGHT.COLOR3
);
document.documentElement.style.setProperty(
'--chat-buttons-icon-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--settings-tab-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--settings-tab-background-hover-color',
THEMES.OCEAN_LIGHT.COLOR6
);
document.documentElement.style.setProperty(
'--settings-tab-background-selected-color',
THEMES.OCEAN_LIGHT.COLOR5
);
document.documentElement.style.setProperty(
'--settings-tab-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-outline-background-color',
'var(--transparent-color)'
);
document.documentElement.style.setProperty(
'--button-outline-background-hover-color',
`rgba(${hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR0)}, 0.1)`
);
document.documentElement.style.setProperty(
'--button-outline-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-outline-text-hover-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-outline-border-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-outline-border-hover-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-outline-disabled-color',
'var(--disabled-color)'
);
document.documentElement.style.setProperty(
'--button-solid-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--button-solid-background-hover-color',
THEMES.OCEAN_LIGHT.COLOR6
);
document.documentElement.style.setProperty(
'--button-solid-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-solid-text-hover-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-solid-disabled-color',
THEMES.OCEAN_LIGHT.COLOR4
);
document.documentElement.style.setProperty(
'--button-solid-shadow-color',
`rgba(${hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR0)}, 0.25)`
);
document.documentElement.style.setProperty(
'--button-simple-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-simple-disabled-color',
'var(--disabled-color)'
);
document.documentElement.style.setProperty(
'--button-icon-background-color',
'var(--transparent-color)'
);
document.documentElement.style.setProperty(
'--button-icon-stroke-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--button-icon-stroke-hover-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-icon-stroke-selected-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-background-hover-color',
THEMES.OCEAN_LIGHT.COLOR5
);
document.documentElement.style.setProperty(
'--conversation-tab-background-selected-color',
THEMES.OCEAN_LIGHT.COLOR5
);
document.documentElement.style.setProperty(
'--conversation-tab-background-unread-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-text-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-text-selected-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-text-unread-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-text-secondary-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-bubble-background-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-bubble-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-color-strip-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--search-bar-background-color',
THEMES.OCEAN_LIGHT.COLOR5
);
document.documentElement.style.setProperty(
'--search-bar-text-control-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--search-bar-text-user-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--search-bar-icon-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--search-bar-icon-hover-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty('--scroll-bar-track-color', 'none');
document.documentElement.style.setProperty('--scroll-bar-thumb-color', THEMES.OCEAN_LIGHT.COLOR4);
document.documentElement.style.setProperty(
'--scroll-bar-thumb-hover-color',
THEMES.OCEAN_LIGHT.COLOR3
);
document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.OCEAN_LIGHT.COLOR4);
document.documentElement.style.setProperty('--zoom-bar-thumb-color', 'var(--primary-color)');
document.documentElement.style.setProperty(
'--zoom-bar-interval-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty('--toggle-switch-ball-color', 'var(--white-color)');
document.documentElement.style.setProperty(
'--toggle-switch-ball-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.15)`
);
document.documentElement.style.setProperty(
'--toggle-switch-off-background-color',
'var(--transparent-color)'
);
document.documentElement.style.setProperty(
'--toggle-switch-off-border-color',
'var(--border-color)'
);
document.documentElement.style.setProperty(
'--toggle-switch-on-background-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--toggle-switch-on-border-color',
'var(--transparent-color)'
);
document.documentElement.style.setProperty(
'--unread-messages-alert-background-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--unread-messages-alert-text-color',
THEMES.OCEAN_LIGHT.COLOR0
);
document.documentElement.style.setProperty(
'--button-color-mode-stroke-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--button-color-mode-hover-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-color-mode-fill-color',
'var(--transparent-color)'
);
document.documentElement.style.setProperty('--button-path-default-color', COLORS.PATH.DEFAULT);
document.documentElement.style.setProperty(
'--button-path-connecting-color',
COLORS.PATH.CONNECTING
);
document.documentElement.style.setProperty('--button-path-error-color', COLORS.PATH.ERROR);
document.documentElement.style.setProperty(
'--emoji-reaction-bar-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--emoji-reaction-bar-icon-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--emoji-reaction-bar-icon-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--modal-background-content-color',
'var(--background-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(
'--toast-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty('--toast-text-color', 'var(--text-primary-color)');
document.documentElement.style.setProperty('--toast-color-strip-color', 'var(--primary-color)');
document.documentElement.style.setProperty(
'--toast-progress-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`
);
document.documentElement.style.setProperty(
'--right-panel-item-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--right-panel-item-background-hover-color',
THEMES.OCEAN_LIGHT.COLOR4
);
document.documentElement.style.setProperty(
'--right-panel-item-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--session-logo-text-light-filter',
'brightness(0) saturate(100%)'
);
document.documentElement.style.setProperty('--session-logo-text-dark-filter', 'none');
document.documentElement.style.setProperty(
'--session-logo-text-current-filter',
'var(--session-logo-text-light-filter)'
);
document.documentElement.style.setProperty(
'--context-menu-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-background-hover-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-hover-color',
'var(--black-color)'
);
document.documentElement.style.setProperty(
'--context-menu-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`
);
document.documentElement.style.setProperty(
'--message-link-preview-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
);
document.documentElement.style.setProperty(
'--suggestions-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--suggestions-background-hover-color',
THEMES.OCEAN_LIGHT.COLOR4
);
document.documentElement.style.setProperty(
'--suggestions-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--suggestions-shadow',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`
);
document.documentElement.style.setProperty(
'--lightbox-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`
);
document.documentElement.style.setProperty(
'--lightbox-caption-background-color',
'rgba(192, 192, 192, .40)'
);
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) {
document.documentElement.style.setProperty(
'--primary-color',
primaryColor && primaryColor !== THEMES.OCEAN_DARK.PRIMARY
? primaryColor
: THEMES.OCEAN_DARK.PRIMARY
);
document.documentElement.style.setProperty('--danger-color', THEMES.OCEAN_DARK.DANGER);
document.documentElement.style.setProperty('--disabled-color', THEMES.OCEAN_DARK.DISABLED);
document.documentElement.style.setProperty(
'--background-primary-color',
THEMES.OCEAN_DARK.COLOR1
);
document.documentElement.style.setProperty(
'--background-secondary-color',
THEMES.OCEAN_DARK.COLOR2
);
document.documentElement.style.setProperty('--text-primary-color', THEMES.OCEAN_DARK.COLOR7!);
document.documentElement.style.setProperty('--text-secondary-color', THEMES.OCEAN_DARK.COLOR5);
document.documentElement.style.setProperty('--border-color', THEMES.OCEAN_DARK.COLOR4);
document.documentElement.style.setProperty(
'--text-box-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--text-box-text-control-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--text-box-text-user-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty('--text-box-border-color', 'var(--border-color)');
document.documentElement.style.setProperty(
'--message-bubbles-sent-background-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--message-bubbles-received-background-color',
THEMES.OCEAN_DARK.COLOR4
);
document.documentElement.style.setProperty(
'--message-bubbles-sent-text-color',
THEMES.OCEAN_DARK.COLOR0
);
document.documentElement.style.setProperty(
'--message-bubbles-received-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--menu-button-background-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--menu-button-background-hover-color',
THEMES.OCEAN_DARK.COLOR6
);
document.documentElement.style.setProperty('--menu-button-icon-color', THEMES.OCEAN_DARK.COLOR7!);
document.documentElement.style.setProperty(
'--chat-buttons-background-color',
THEMES.OCEAN_DARK.COLOR2
);
document.documentElement.style.setProperty(
'--chat-buttons-background-hover-color',
THEMES.OCEAN_DARK.COLOR4
);
document.documentElement.style.setProperty(
'--chat-buttons-icon-color',
THEMES.OCEAN_DARK.COLOR7!
);
document.documentElement.style.setProperty(
'--settings-tab-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--settings-tab-background-hover-color',
THEMES.OCEAN_DARK.COLOR3
);
document.documentElement.style.setProperty(
'--settings-tab-background-selected-color',
THEMES.OCEAN_DARK.COLOR3
);
document.documentElement.style.setProperty(
'--settings-tab-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-outline-background-color',
'var(--transparent-color)'
);
document.documentElement.style.setProperty(
'--button-outline-background-hover-color',
`rgba(${hexColorToRGB(THEMES.OCEAN_DARK.COLOR7!)}, 0.3)`
);
document.documentElement.style.setProperty('--button-outline-text-color', 'var(--primary-color)');
document.documentElement.style.setProperty(
'--button-outline-text-hover-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-outline-border-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--button-outline-border-hover-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-outline-disabled-color',
'var(--disabled-color)'
);
document.documentElement.style.setProperty(
'--button-solid-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--button-solid-background-hover-color',
THEMES.OCEAN_DARK.COLOR4
);
document.documentElement.style.setProperty(
'--button-solid-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-solid-text-hover-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-solid-disabled-color',
THEMES.OCEAN_DARK.COLOR4
);
document.documentElement.style.setProperty('--button-solid-shadow-color', 'none');
document.documentElement.style.setProperty(
'--button-simple-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-simple-disabled-color',
'var(--disabled-color)'
);
document.documentElement.style.setProperty(
'--button-icon-background-color',
'var(--transparent-color)'
);
document.documentElement.style.setProperty(
'--button-icon-stroke-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--button-icon-stroke-hover-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--button-icon-stroke-selected-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-background-hover-color',
THEMES.OCEAN_DARK.COLOR3
);
document.documentElement.style.setProperty(
'--conversation-tab-background-selected-color',
THEMES.OCEAN_DARK.COLOR3
);
document.documentElement.style.setProperty(
'--conversation-tab-background-unread-color',
THEMES.OCEAN_DARK.COLOR2
);
document.documentElement.style.setProperty(
'--conversation-tab-text-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-text-selected-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-text-unread-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-text-secondary-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-bubble-background-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--conversation-tab-bubble-text-color',
THEMES.OCEAN_DARK.COLOR0
);
document.documentElement.style.setProperty(
'--conversation-tab-color-strip-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--search-bar-background-color',
THEMES.OCEAN_DARK.COLOR3
);
document.documentElement.style.setProperty(
'--search-bar-text-control-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--search-bar-text-user-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--search-bar-icon-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--search-bar-icon-hover-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty('--scroll-bar-track-color', 'none');
document.documentElement.style.setProperty('--scroll-bar-thumb-color', THEMES.OCEAN_DARK.COLOR4);
document.documentElement.style.setProperty(
'--scroll-bar-thumb-hover-color',
THEMES.OCEAN_DARK.COLOR5
);
document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.OCEAN_DARK.COLOR4);
document.documentElement.style.setProperty('--zoom-bar-thumb-color', 'var(--primary-color)');
document.documentElement.style.setProperty('--zoom-bar-interval-color', 'var(--primary-color)');
document.documentElement.style.setProperty('--toggle-switch-ball-color', 'var(--white-color)');
document.documentElement.style.setProperty(
'--toggle-switch-ball-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.15)`
);
document.documentElement.style.setProperty(
'--toggle-switch-off-background-color',
'var(--transparent-color)'
);
document.documentElement.style.setProperty(
'--toggle-switch-off-border-color',
'var(--white-color)'
);
document.documentElement.style.setProperty(
'--toggle-switch-on-background-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--toggle-switch-on-border-color',
'var(--transparent-color)'
);
document.documentElement.style.setProperty(
'--unread-messages-alert-background-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--unread-messages-alert-text-color',
THEMES.OCEAN_DARK.COLOR0
);
document.documentElement.style.setProperty(
'--button-color-mode-stroke-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--button-color-mode-hover-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty(
'--button-color-mode-fill-color',
'var(--text-secondary-color)'
);
// TODO Theming - Probably can remove this?
document.documentElement.style.setProperty('--button-path-default-color', COLORS.PATH.DEFAULT);
document.documentElement.style.setProperty(
'--button-path-connecting-color',
COLORS.PATH.CONNECTING
);
document.documentElement.style.setProperty('--button-path-error-color', COLORS.PATH.ERROR);
document.documentElement.style.setProperty(
'--emoji-reaction-bar-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--emoji-reaction-bar-icon-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--emoji-reaction-bar-icon-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--modal-background-content-color',
'var(--background-secondary-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(
'--toast-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty('--toast-text-color', 'var(--text-primary-color)');
document.documentElement.style.setProperty('--toast-color-strip-color', 'var(--primary-color)');
document.documentElement.style.setProperty(
'--toast-progress-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`
);
document.documentElement.style.setProperty(
'--right-panel-item-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--right-panel-item-background-hover-color',
THEMES.OCEAN_DARK.COLOR4
);
document.documentElement.style.setProperty(
'--right-panel-item-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty('--session-logo-text-light-filter', 'none');
document.documentElement.style.setProperty('--session-logo-text-dark-filter', 'none');
document.documentElement.style.setProperty(
'--session-logo-text-current-filter',
'var(--session-logo-text-light-filter)'
);
document.documentElement.style.setProperty(
'--context-menu-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-background-hover-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-hover-color',
'var(--black-color)'
);
document.documentElement.style.setProperty(
'--context-menu-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`
);
document.documentElement.style.setProperty(
'--message-link-preview-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
);
document.documentElement.style.setProperty(
'--suggestions-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--suggestions-background-hover-color',
THEMES.OCEAN_DARK.COLOR4
);
document.documentElement.style.setProperty(
'--suggestions-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--suggestions-shadow',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`
);
document.documentElement.style.setProperty(
'--lightbox-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`
);
document.documentElement.style.setProperty(
'--lightbox-caption-background-color',
'rgba(192, 192, 192, .40)'
);
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)');
}
// document.documentElement.style.setProperty(
// '--primary-color',
// primaryColor && primaryColor !== THEMES.OCEAN_DARK.PRIMARY
// ? primaryColor
// : THEMES.OCEAN_DARK.PRIMARY
// );
export async function switchTheme(theme: ThemeStateType, mainWindow: boolean = true) {
let primaryColor = null;
@ -865,10 +30,10 @@ export async function switchTheme(theme: ThemeStateType, mainWindow: boolean = t
loadThemeColors(classicDark);
break;
case 'ocean-light':
loadOceanLight(primaryColor);
loadThemeColors(oceanLight);
break;
case 'ocean-dark':
loadOceanDark(primaryColor);
loadThemeColors(oceanDark);
break;
default:
window.log.warn('Unsupported theme:', theme);

Write Preview
Loading…
Cancel
Save