From 32a6c921c263bfb260e4d44e776067a4a7c63426 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 10 Oct 2022 17:13:30 +1100 Subject: [PATCH] feat: ocean light and dark use new system --- ts/themes/oceanDark.ts | 144 +++++++ ts/themes/oceanLight.ts | 144 +++++++ ts/themes/switchTheme.tsx | 857 +------------------------------------- 3 files changed, 299 insertions(+), 846 deletions(-) create mode 100644 ts/themes/oceanDark.ts create mode 100644 ts/themes/oceanLight.ts diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts new file mode 100644 index 000000000..d1ee99ad0 --- /dev/null +++ b/ts/themes/oceanDark.ts @@ -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)', +}; diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts new file mode 100644 index 000000000..266e68b4f --- /dev/null +++ b/ts/themes/oceanLight.ts @@ -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)', +}; diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index 7bfb7955f..4b8567e52 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -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);