From 8c97cbcafa3f1b951dbd9b6feeb70ec9dde31ab4 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 10 Oct 2022 16:37:56 +1100 Subject: [PATCH] feat: global variables and classic light and dark use new system --- ts/themes/SessionTheme.tsx | 231 +------- ts/themes/classicDark.ts | 144 +++++ ts/themes/classicLight.ts | 144 +++++ ts/themes/globals.tsx | 75 +++ ts/themes/switchPrimaryColor.tsx | 2 +- ts/themes/switchTheme.tsx | 874 +------------------------------ ts/themes/variableColors.tsx | 200 +++++++ 7 files changed, 576 insertions(+), 1094 deletions(-) create mode 100644 ts/themes/classicDark.ts create mode 100644 ts/themes/classicLight.ts create mode 100644 ts/themes/globals.tsx create mode 100644 ts/themes/variableColors.tsx diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 756e50c4a..bac4019f6 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { createGlobalStyle } from 'styled-components'; -import { hexColorToRGB } from '../util/hexColorToRGB'; -import { COLORS, THEMES } from './colors'; +import { classicLight } from './classicLight'; +import { declareCSSVariables, THEME_GLOBALS } from './globals'; export const whiteColor = '#ffffff'; const whiteColorRGB = '255, 255, 255'; // we need rgb values if we want css variables within rgba @@ -461,230 +461,9 @@ export const SessionGlobalStyles = createGlobalStyle` --color-modal-background: ${lightModalBackground}; --color-avatar-border-color: ${avatarBorderColor}; - /* New Theme Variables */ - /* Colors */ - --green-color: ${COLORS.PRIMARY.GREEN}; - --blue-color: ${COLORS.PRIMARY.BLUE}; - --yellow-color: ${COLORS.PRIMARY.YELLOW}; - --pink-color: ${COLORS.PRIMARY.PINK}; - --purple-color: ${COLORS.PRIMARY.PURPLE}; - --orange-color: ${COLORS.PRIMARY.ORANGE}; - --red-color: ${COLORS.PRIMARY.RED}; - --primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; - --danger-color: ${THEMES.CLASSIC_LIGHT.DANGER}; - --disabled-color: ${THEMES.CLASSIC_LIGHT.DISABLED}; - --transparent-color: ${COLORS.TRANSPARENT}; - --white-color: ${COLORS.WHITE}; - --black-color: ${COLORS.BLACK}; - - /* Backgrounds */ - --background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; - --background-secondary-color: ${THEMES.CLASSIC_LIGHT.COLOR5}; - - /* Text */ - --text-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR0}; - --text-secondary-color: ${THEMES.CLASSIC_LIGHT.COLOR1}; - - /* Borders */ - --border-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; - - /* Text Box */ - --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: ${THEMES.CLASSIC_LIGHT.COLOR2}; - - /* Message Bubbles */ - --message-bubbles-sent-background-color: var(--primary-color); - --message-bubbles-received-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; - --message-bubbles-sent-text-color: var(--text-primary-color); - --message-bubbles-received-text-color: var(--text-primary-color); - - /* Menu Button */ - --menu-button-background-color: ${THEMES.CLASSIC_LIGHT.COLOR0}; - --menu-button-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR1}; - /* TODO Theming Make a icon fill varible that uses the background color? */ - --menu-button-icon-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; - - /* Chat (Interaction) Buttons */ - /* Also used for Reaction Bar Buttons */ - /* Used for Link Preview Attachment Icons */ - /* Used for Media Grid Item Play Button */ - --chat-buttons-background-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; - --chat-buttons-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; - --chat-buttons-icon-color: var(--text-primary-color); - - /* Settings Tabs */ - --settings-tab-background-color: var(--background-primary-color); - --settings-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; - --settings-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; - --settings-tab-text-color: var(--text-primary-color); - - /* TODO Theming probably consolidate this */ - /* Buttons */ - /* Outline (Default) */ - --button-outline-background-color: var(--transparent-color); - --button-outline-background-hover-color: rgba(${hexColorToRGB( - THEMES.CLASSIC_LIGHT.COLOR0 - )}, 0.1); - --button-outline-text-color: var(--text-primary-color); - /* TODO Theming we might not need this */ - --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); - - /* Solid */ - /* TODO Theming - Should Pills have their own colors */ - /* Also used for Pills */ - --button-solid-background-color: var(--background-primary-color); - --button-solid-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; - --button-solid-text-color: var(--text-primary-color); - --button-solid-text-hover-color: var(--text-primary-color); - /* Solid buttons stay the same and rely on the disabled pointer */ - --button-solid-disabled-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; - /* TODO Theming - Only light themes have shadows? */ - --button-solid-shadow-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.25); - - /* Simple */ - --button-simple-text-color: var(--text-primary-color); - --button-simple-disabled-color: var(--disabled-color); - - /* Icons */ - --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 */ - /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Message Requests Banner, Member List Item, Contact List Items, Message Right Click Highlighting etc. */ - --conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; - --conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; - --conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; - --conversation-tab-background-unread-color: var(--background-primary-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: ${THEMES.CLASSIC_LIGHT.COLOR3}; - --conversation-tab-bubble-text-color: var(--text-primary-color); - --conversation-tab-color-strip-color: var(--primary-color); - - /* Search Bar */ - --search-bar-background-color: var(--background-secondary-color); - --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 Bars */ - --scroll-bar-track-color: none; - --scroll-bar-thumb-color: ${THEMES.CLASSIC_LIGHT.COLOR2}; - --scroll-bar-thumb-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR1}; - - /* Zoom Bar */ - --zoom-bar-track-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; - --zoom-bar-thumb-color: var(--primary-color); - --zoom-bar-interval-color: var(--text-secondary-color); - - /* Toggle Switch */ - --toggle-switch-ball-color: var(--white-color); - --toggle-switch-ball-shadow-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.15); - /* TODO Theming think this should be white instead of transparent */ - --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); - - /* TODO Theming Think this is part of the Convesations Tab */ - /* Unread Messages Alert */ - --unread-messages-alert-background-color: var(--primary-color); - --unread-messages-alert-text-color: var(--text-primary-color); - - /* toggles between the Light and Dark mode for a Theme */ - /* Color Mode Button */ - --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); - - /* Path Button */ - --button-path-default-color: ${COLORS.PATH.DEFAULT}; - --button-path-connecting-color: ${COLORS.PATH.CONNECTING}; - --button-path-error-color: ${COLORS.PATH.ERROR}; - - /* Emoji Reaction Bar */ - --emoji-reaction-bar-background-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; - /* NOTE only used for + icon */ - --emoji-reaction-bar-icon-background-color: var(--background-primary-color); - --emoji-reaction-bar-icon-color: var(--text-primary-color); - - /* TODO Theming - Should Pills have their own colors? */ - - /* Modals */ - --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-danger-color: var(--danger-color); - --modal-drop-shadow: 0px 0px 10px rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22); - - /* Toasts */ - --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 Items */ - /* Also used for Session Dropdown */ - --right-panel-item-background-color: var(--background-secondary-color); - --right-panel-item-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; - --right-panel-item-text-color: var(--text-primary-color); - - /* Session Text Logo */ - /* Loads SVG as IMG and uses a filter to change 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); - - /* Right Click / Context Menu) */ - --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); - --context-menu-shadow-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22); - - /* Message Link Preview */ - /* Also used for Images */ - /* Also used for the Media Grid Items */ - /* Also used for Staged Generic Attachments */ - /* Also used for FileDropZone */ - /* Used for Quote References Not Found */ - /* Same for all Themes */ - --message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06); - - /* Shadows */ - /* Used across all themes */ - --shadow-color: var(--black-color); - --drop-shadow: 0 0 4px 0 var(--shadow-color); - - /* Suggestions i.e. Mentions and Emojis */ - --suggestions-background-color: var(--background-secondary-color); - --suggestions-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; - --suggestions-text-color: var(--text-primary-color); - --suggestions-shadow: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px; - - /* Lightbox */ - --lightbox-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8); - --lightbox-caption-background-color: 'rgba(192, 192, 192, .40)'; - --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); - + /* New Theme */ + ${declareCSSVariables(THEME_GLOBALS)} + ${declareCSSVariables(classicLight)} }; `; diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts new file mode 100644 index 000000000..1b18926ff --- /dev/null +++ b/ts/themes/classicDark.ts @@ -0,0 +1,144 @@ +import { hexColorToRGB } from '../util/hexColorToRGB'; +import { COLORS, THEMES } from './constants/colors'; +import { ThemeColorVariables } from './variableColors'; + +export const classicDark: ThemeColorVariables = { + '--primary-color': THEMES.CLASSIC_DARK.PRIMARY, + '--danger-color': THEMES.CLASSIC_DARK.DANGER, + '--disabled-color': THEMES.CLASSIC_DARK.DISABLED, + + '--background-primary-color': THEMES.CLASSIC_DARK.COLOR1, + '--background-secondary-color': THEMES.CLASSIC_DARK.COLOR0, + + '--text-primary-color': THEMES.CLASSIC_DARK.COLOR6, + '--text-secondary-color': THEMES.CLASSIC_DARK.COLOR5, + + '--border-color': THEMES.CLASSIC_DARK.COLOR3, + + '--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.CLASSIC_DARK.COLOR2, + '--message-bubbles-sent-text-color': 'var(--background-primary-color)', + '--message-bubbles-received-text-color': 'var(--text-primary-color)', + + '--menu-button-background-color': 'var(--primary-color)', + '--menu-button-background-hover-color': THEMES.CLASSIC_DARK.COLOR4, + '--menu-button-icon-color': THEMES.CLASSIC_DARK.COLOR6, + + '--chat-buttons-background-color': THEMES.CLASSIC_DARK.COLOR2, + '--chat-buttons-background-hover-color': THEMES.CLASSIC_DARK.COLOR3, + '--chat-buttons-icon-color': 'var(--text-primary-color)', + + '--settings-tab-background-color': 'var(--background-primary-color)', + '--settings-tab-background-hover-color': THEMES.CLASSIC_DARK.COLOR2, + '--settings-tab-background-selected-color': THEMES.CLASSIC_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.CLASSIC_DARK.COLOR6 + )}, 0.3)`, + '--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': THEMES.CLASSIC_DARK.COLOR3, + '--button-solid-background-hover-color': THEMES.CLASSIC_DARK.COLOR4, + '--button-solid-text-color': 'var(--text-primary-color)', + '--button-solid-text-hover-color': 'var(--text-primary-color)', + '--button-solid-disabled-color': THEMES.CLASSIC_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.CLASSIC_DARK.COLOR2, + '--conversation-tab-background-selected-color': THEMES.CLASSIC_DARK.COLOR3, + '--conversation-tab-background-unread-color': THEMES.CLASSIC_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': THEMES.CLASSIC_DARK.COLOR3, + '--conversation-tab-bubble-text-color': 'var(--text-primary-color)', + '--conversation-tab-color-strip-color': 'var(--primary-color)', + + '--search-bar-background-color': 'var(--background-secondary-color)', + '--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.CLASSIC_DARK.COLOR3, + '--scroll-bar-thumb-hover-color': THEMES.CLASSIC_DARK.COLOR4, + + '--zoom-bar-track-color': THEMES.CLASSIC_DARK.COLOR3, + '--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.CLASSIC_DARK.COLOR0, + + '--button-color-mode-stroke-color': 'var(--text-primary-color)', + '--button-color-mode-hover-color': 'var(--text-primary-color)', + '--button-color-mode-fill-color': 'var(--text-primary-color)', + + '--emoji-reaction-bar-background-color': THEMES.CLASSIC_DARK.COLOR2, + '--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': THEMES.CLASSIC_DARK.COLOR2, + '--right-panel-item-background-hover-color': THEMES.CLASSIC_DARK.COLOR3, + '--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': THEMES.CLASSIC_DARK.COLOR2, + '--suggestions-background-hover-color': THEMES.CLASSIC_DARK.COLOR3, + '--suggestions-text-color': 'var(--text-primary-color)', + '--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`, + + '--input-background-color': 'var(--background-secondary-color)', + '--input-background-hover-color': 'var(--background-primary-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/classicLight.ts b/ts/themes/classicLight.ts new file mode 100644 index 000000000..aea169be2 --- /dev/null +++ b/ts/themes/classicLight.ts @@ -0,0 +1,144 @@ +import { hexColorToRGB } from '../util/hexColorToRGB'; +import { COLORS, THEMES } from './constants/colors'; +import { ThemeColorVariables } from './variableColors'; + +export const classicLight: ThemeColorVariables = { + '--primary-color': THEMES.CLASSIC_LIGHT.PRIMARY, + '--danger-color': THEMES.CLASSIC_LIGHT.DANGER, + '--disabled-color': THEMES.CLASSIC_LIGHT.DISABLED, + + '--background-primary-color': THEMES.CLASSIC_LIGHT.COLOR6, + '--background-secondary-color': THEMES.CLASSIC_LIGHT.COLOR5, + + '--text-primary-color': THEMES.CLASSIC_LIGHT.COLOR0, + '--text-secondary-color': THEMES.CLASSIC_LIGHT.COLOR1, + + '--border-color': THEMES.CLASSIC_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': THEMES.CLASSIC_LIGHT.COLOR2, + + '--message-bubbles-sent-background-color': 'var(--primary-color)', + '--message-bubbles-received-background-color': THEMES.CLASSIC_LIGHT.COLOR3, + '--message-bubbles-sent-text-color': 'var(--text-primary-color)', + '--message-bubbles-received-text-color': 'var(--text-primary-color)', + + '--menu-button-background-color': THEMES.CLASSIC_LIGHT.COLOR0, + '--menu-button-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR1, + '--menu-button-icon-color': THEMES.CLASSIC_LIGHT.COLOR6, + + '--chat-buttons-background-color': THEMES.CLASSIC_LIGHT.COLOR4, + '--chat-buttons-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR3, + '--chat-buttons-icon-color': 'var(--text-primary-color)', + + '--settings-tab-background-color': 'var(--background-primary-color)', + '--settings-tab-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4, + '--settings-tab-background-selected-color': THEMES.CLASSIC_LIGHT.COLOR3, + '--settings-tab-text-color': 'var(--text-primary-color)', + + '--button-outline-background-color': 'var(--transparent-color)', + '--button-outline-background-hover-color': `rgba(${hexColorToRGB( + THEMES.CLASSIC_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.CLASSIC_LIGHT.COLOR4, + '--button-solid-text-color': 'var(--text-primary-color)', + '--button-solid-text-hover-color': 'var(--text-primary-color)', + '--button-solid-disabled-color': THEMES.CLASSIC_LIGHT.COLOR4, + '--button-solid-shadow-color': `rgba(${hexColorToRGB(THEMES.CLASSIC_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': THEMES.CLASSIC_LIGHT.COLOR6, + '--conversation-tab-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4, + '--conversation-tab-background-selected-color': THEMES.CLASSIC_LIGHT.COLOR4, + '--conversation-tab-background-unread-color': 'var(--background-primary-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': THEMES.CLASSIC_LIGHT.COLOR3, + '--conversation-tab-bubble-text-color': 'var(--text-primary-color)', + '--conversation-tab-color-strip-color': 'var(--primary-color)', + + '--search-bar-background-color': 'var(--background-secondary-color)', + '--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.CLASSIC_LIGHT.COLOR2, + '--scroll-bar-thumb-hover-color': THEMES.CLASSIC_LIGHT.COLOR1, + + '--zoom-bar-track-color': THEMES.CLASSIC_LIGHT.COLOR3, + '--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.CLASSIC_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': THEMES.CLASSIC_LIGHT.COLOR4, + '--emoji-reaction-bar-icon-background-color': 'var(--background-primary-color)', + '--emoji-reaction-bar-icon-color': 'var(--text-primary-color)', + + '--modal-background-content-color': THEMES.CLASSIC_LIGHT.COLOR6, + '--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.CLASSIC_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.CLASSIC_LIGHT.COLOR4, + '--suggestions-text-color': 'var(--text-primary-color)', + '--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`, + + '--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)', +}; diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx new file mode 100644 index 000000000..001cc22c9 --- /dev/null +++ b/ts/themes/globals.tsx @@ -0,0 +1,75 @@ +import { hexColorToRGB } from '../util/hexColorToRGB'; +import { COLORS } from './constants/colors'; + +// For now this only keeps the colors +// TODO Theming add margin, padding, font, variables here. +export type ThemeGlobals = { + '--green-color': string; + '--blue-color': string; + '--yellow-color': string; + '--pink-color': string; + '--purple-color': string; + '--orange-color': string; + '--red-color': string; + '--transparent-color': string; + '--white-color': string; + '--black-color': string; + + /* Shadows */ + '--shadow-color': string; + '--drop-shadow': string; + '--context-menu-shadow-color': string; + + /* Path Button */ + '--button-path-default-color': string; + '--button-path-connecting-color': string; + '--button-path-error-color': string; + + /* Modals */ + '--modal-background-color': string; + '--modal-drop-shadow': string; + + /* Lightbox */ + '--lightbox-background-color': string; + '--lightbox-caption-background-color': string; + '--lightbox-icon-stroke-color': string; +}; + +// These are only set once in the global style (at root). +export const THEME_GLOBALS: ThemeGlobals = { + '--green-color': COLORS.PRIMARY.GREEN, + '--blue-color': COLORS.PRIMARY.BLUE, + '--yellow-color': COLORS.PRIMARY.YELLOW, + '--pink-color': COLORS.PRIMARY.PINK, + '--purple-color': COLORS.PRIMARY.PURPLE, + '--orange-color': COLORS.PRIMARY.ORANGE, + '--red-color': COLORS.PRIMARY.RED, + '--transparent-color': COLORS.TRANSPARENT, + '--white-color': COLORS.WHITE, + '--black-color': COLORS.BLACK, + + '--shadow-color': 'var(--black-color)', + '--drop-shadow': `0 0 4px 0 var(--shadow-color)`, + '--context-menu-shadow-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`, + + '--button-path-default-color': COLORS.PATH.DEFAULT, + '--button-path-connecting-color': COLORS.PATH.CONNECTING, + '--button-path-error-color': COLORS.PATH.ERROR, + + '--modal-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.3)`, + '--modal-drop-shadow': `0px 0px 10px rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`, + + '--lightbox-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`, + '--lightbox-caption-background-color': 'rgba(192, 192, 192, .40)', + '--lightbox-icon-stroke-color': 'var(--white-color)', +}; + +// These should only be needed for the global style (at root). +export function declareCSSVariables(variables: Record) { + let output = ''; + for (const [key, value] of Object.entries(variables)) { + console.log(`${key}: ${value}`); + output += `${key}: ${value};\n`; + } + return output; +} diff --git a/ts/themes/switchPrimaryColor.tsx b/ts/themes/switchPrimaryColor.tsx index 84cd7b980..14b0f7aab 100644 --- a/ts/themes/switchPrimaryColor.tsx +++ b/ts/themes/switchPrimaryColor.tsx @@ -1,6 +1,6 @@ import { Dispatch } from 'redux'; import { applyPrimaryColor } from '../state/ducks/primaryColor'; -import { COLORS, PrimaryColorStateType } from './colors'; +import { COLORS, PrimaryColorStateType } from './constants/colors'; export async function switchPrimaryColor(color: PrimaryColorStateType, dispatch: Dispatch | null) { await window.Events.setPrimaryColorSetting(color); diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index 8d82d0189..7bfb7955f 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -1,869 +1,8 @@ import { hexColorToRGB } from '../util/hexColorToRGB'; -import { COLORS, PrimaryColorStateType, THEMES, ThemeStateType } from './colors'; - -function loadClassicLight(primaryColor?: PrimaryColorStateType) { - document.documentElement.style.setProperty( - '--primary-color', - primaryColor && primaryColor !== THEMES.CLASSIC_LIGHT.PRIMARY - ? primaryColor - : THEMES.CLASSIC_LIGHT.PRIMARY - ); - document.documentElement.style.setProperty('--danger-color', THEMES.CLASSIC_LIGHT.DANGER); - document.documentElement.style.setProperty('--disabled-color', THEMES.CLASSIC_LIGHT.DISABLED); - - document.documentElement.style.setProperty( - '--background-primary-color', - THEMES.CLASSIC_LIGHT.COLOR6 - ); - document.documentElement.style.setProperty( - '--background-secondary-color', - THEMES.CLASSIC_LIGHT.COLOR5 - ); - - document.documentElement.style.setProperty('--text-primary-color', THEMES.CLASSIC_LIGHT.COLOR0); - document.documentElement.style.setProperty('--text-secondary-color', THEMES.CLASSIC_LIGHT.COLOR1); - - document.documentElement.style.setProperty('--border-color', THEMES.CLASSIC_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', - THEMES.CLASSIC_LIGHT.COLOR2 - ); - - document.documentElement.style.setProperty( - '--message-bubbles-sent-background-color', - 'var(--primary-color)' - ); - document.documentElement.style.setProperty( - '--message-bubbles-received-background-color', - THEMES.CLASSIC_LIGHT.COLOR3 - ); - 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', - THEMES.CLASSIC_LIGHT.COLOR0 - ); - document.documentElement.style.setProperty( - '--menu-button-background-hover-color', - THEMES.CLASSIC_LIGHT.COLOR1 - ); - document.documentElement.style.setProperty( - '--menu-button-icon-color', - THEMES.CLASSIC_LIGHT.COLOR6 - ); - - document.documentElement.style.setProperty( - '--chat-buttons-background-color', - THEMES.CLASSIC_LIGHT.COLOR4 - ); - document.documentElement.style.setProperty( - '--chat-buttons-background-hover-color', - THEMES.CLASSIC_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.CLASSIC_LIGHT.COLOR4 - ); - document.documentElement.style.setProperty( - '--settings-tab-background-selected-color', - THEMES.CLASSIC_LIGHT.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.CLASSIC_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.CLASSIC_LIGHT.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.CLASSIC_LIGHT.COLOR4 - ); - document.documentElement.style.setProperty( - '--button-solid-shadow-color', - `rgba(${hexColorToRGB(THEMES.CLASSIC_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', - THEMES.CLASSIC_LIGHT.COLOR6 - ); - document.documentElement.style.setProperty( - '--conversation-tab-background-hover-color', - THEMES.CLASSIC_LIGHT.COLOR4 - ); - document.documentElement.style.setProperty( - '--conversation-tab-background-selected-color', - THEMES.CLASSIC_LIGHT.COLOR4 - ); - document.documentElement.style.setProperty( - '--conversation-tab-background-unread-color', - 'var(--background-primary-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', - THEMES.CLASSIC_LIGHT.COLOR3 - ); - 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', - 'var(--background-secondary-color)' - ); - 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.CLASSIC_LIGHT.COLOR2 - ); - document.documentElement.style.setProperty( - '--scroll-bar-thumb-hover-color', - THEMES.CLASSIC_LIGHT.COLOR1 - ); - - document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.CLASSIC_LIGHT.COLOR3); - 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.CLASSIC_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', - THEMES.CLASSIC_LIGHT.COLOR4 - ); - 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', - THEMES.CLASSIC_LIGHT.COLOR6 - ); - 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.CLASSIC_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.CLASSIC_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', - '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) { - document.documentElement.style.setProperty( - '--primary-color', - primaryColor && primaryColor !== THEMES.CLASSIC_DARK.PRIMARY - ? primaryColor - : THEMES.CLASSIC_DARK.PRIMARY - ); - document.documentElement.style.setProperty('--danger-color', THEMES.CLASSIC_DARK.DANGER); - document.documentElement.style.setProperty('--disabled-color', THEMES.CLASSIC_DARK.DISABLED); - - document.documentElement.style.setProperty( - '--background-primary-color', - THEMES.CLASSIC_DARK.COLOR1 - ); - document.documentElement.style.setProperty( - '--background-secondary-color', - THEMES.CLASSIC_DARK.COLOR0 - ); - - document.documentElement.style.setProperty('--text-primary-color', THEMES.CLASSIC_DARK.COLOR6); - document.documentElement.style.setProperty('--text-secondary-color', THEMES.CLASSIC_DARK.COLOR5); - - document.documentElement.style.setProperty('--border-color', THEMES.CLASSIC_DARK.COLOR3); - - 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.CLASSIC_DARK.COLOR2 - ); - document.documentElement.style.setProperty( - '--message-bubbles-sent-text-color', - 'var(--background-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.CLASSIC_DARK.COLOR4 - ); - document.documentElement.style.setProperty( - '--menu-button-icon-color', - THEMES.CLASSIC_DARK.COLOR6 - ); - - document.documentElement.style.setProperty( - '--chat-buttons-background-color', - THEMES.CLASSIC_DARK.COLOR2 - ); - document.documentElement.style.setProperty( - '--chat-buttons-background-hover-color', - THEMES.CLASSIC_DARK.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.CLASSIC_DARK.COLOR2 - ); - document.documentElement.style.setProperty( - '--settings-tab-background-selected-color', - THEMES.CLASSIC_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.CLASSIC_DARK.COLOR6)}, 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', - THEMES.CLASSIC_DARK.COLOR3 - ); - document.documentElement.style.setProperty( - '--button-solid-background-hover-color', - THEMES.CLASSIC_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.CLASSIC_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.CLASSIC_DARK.COLOR2 - ); - document.documentElement.style.setProperty( - '--conversation-tab-background-selected-color', - THEMES.CLASSIC_DARK.COLOR3 - ); - document.documentElement.style.setProperty( - '--conversation-tab-background-unread-color', - THEMES.CLASSIC_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', - THEMES.CLASSIC_DARK.COLOR3 - ); - 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', - 'var(--background-secondary-color)' - ); - 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.CLASSIC_DARK.COLOR3 - ); - document.documentElement.style.setProperty( - '--scroll-bar-thumb-hover-color', - THEMES.CLASSIC_DARK.COLOR4 - ); - - document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.CLASSIC_DARK.COLOR3); - 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.CLASSIC_DARK.COLOR0 - ); - - document.documentElement.style.setProperty( - '--button-color-mode-stroke-color', - 'var(--text-primary-color)' - ); - document.documentElement.style.setProperty( - '--button-color-mode-hover-color', - 'var(--text-primary-color)' - ); - document.documentElement.style.setProperty( - '--button-color-mode-fill-color', - 'var(--text-primary-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', - THEMES.CLASSIC_DARK.COLOR2 - ); - 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', - THEMES.CLASSIC_DARK.COLOR2 - ); - document.documentElement.style.setProperty( - '--right-panel-item-background-hover-color', - THEMES.CLASSIC_DARK.COLOR3 - ); - 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', - THEMES.CLASSIC_DARK.COLOR2 - ); - document.documentElement.style.setProperty( - '--suggestions-background-hover-color', - THEMES.CLASSIC_DARK.COLOR3 - ); - 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', - '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)'); -} +import { classicDark } from './classicDark'; +import { classicLight } from './classicLight'; +import { COLORS, PrimaryColorStateType, THEMES, ThemeStateType } from './constants/colors'; +import { loadThemeColors } from './variableColors'; function loadOceanLight(primaryColor?: PrimaryColorStateType) { document.documentElement.style.setProperty( @@ -1717,12 +856,13 @@ export async function switchTheme(theme: ThemeStateType, mainWindow: boolean = t selectedPrimaryColor && (COLORS.PRIMARY as any)[`${selectedPrimaryColor.toUpperCase()}`]; } + // TODO Theming account for Primary colors again switch (theme) { case 'classic-light': - loadClassicLight(primaryColor); + loadThemeColors(classicLight); break; case 'classic-dark': - loadClassicDark(primaryColor); + loadThemeColors(classicDark); break; case 'ocean-light': loadOceanLight(primaryColor); diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx new file mode 100644 index 000000000..c32408dcd --- /dev/null +++ b/ts/themes/variableColors.tsx @@ -0,0 +1,200 @@ +// Default Theme should be Classic Dark +export type ThemeColorVariables = { + '--primary-color': string; + '--danger-color': string; + '--disabled-color': string; + + /* Backgrounds */ + '--background-primary-color': string; + '--background-secondary-color': string; + + /* Text */ + '--text-primary-color': string; + '--text-secondary-color': string; + + /* Borders */ + '--border-color': string; + + /* Text Box */ + '--text-box-background-color': string; + '--text-box-text-control-color': string; + '--text-box-text-user-color': string; + '--text-box-border-color': string; + + /* Message Bubbles */ + '--message-bubbles-sent-background-color': string; + '--message-bubbles-received-background-color': string; + '--message-bubbles-sent-text-color': string; + '--message-bubbles-received-text-color': string; + + /* Menu Button */ + '--menu-button-background-color': string; + '--menu-button-background-hover-color': string; + /* TODO Theming Make a icon fill varible that uses the background color? */ + '--menu-button-icon-color': string; + + /* Chat (Interaction) Buttons */ + /* Also used for Reaction Bar Buttons */ + /* Used for Link Preview Attachment Icons */ + /* Used for Media Grid Item Play Button */ + '--chat-buttons-background-color': string; + '--chat-buttons-background-hover-color': string; + '--chat-buttons-icon-color': string; + + /* Settings Tabs */ + '--settings-tab-background-color': string; + '--settings-tab-background-hover-color': string; + '--settings-tab-background-selected-color': string; + '--settings-tab-text-color': string; + + /* TODO Theming probably consolidate this */ + /* Buttons */ + /* Outline (Default) */ + '--button-outline-background-color': string; + '--button-outline-background-hover-color': string; + '--button-outline-text-color': string; + /* TODO Theming we might not need this */ + '--button-outline-text-hover-color': string; + '--button-outline-border-color': string; + '--button-outline-border-hover-color': string; + '--button-outline-disabled-color': string; + + /* Solid */ + /* TODO Theming - Should Pills have their own colors */ + /* Also used for Pills */ + '--button-solid-background-color': string; + '--button-solid-background-hover-color': string; + '--button-solid-text-color': string; + '--button-solid-text-hover-color': string; + /* Solid buttons stay the same and rely on the disabled pointer */ + '--button-solid-disabled-color': string; + /* TODO Theming - Only light themes have shadows? */ + '--button-solid-shadow-color': string; + + /* Simple */ + '--button-simple-text-color': string; + '--button-simple-disabled-color': string; + + /* Icons */ + '--button-icon-background-color': string; + '--button-icon-stroke-color': string; + '--button-icon-stroke-hover-color': string; + '--button-icon-stroke-selected-color': string; + + /* Conversation Tab */ + /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Message Requests Banner, Member List Item, Contact List Items, Message Right Click Highlighting etc. */ + '--conversation-tab-background-color': string; + '--conversation-tab-background-hover-color': string; + '--conversation-tab-background-selected-color': string; + '--conversation-tab-background-unread-color': string; + '--conversation-tab-text-color': string; + '--conversation-tab-text-selected-color': string; + '--conversation-tab-text-unread-color': string; + '--conversation-tab-text-secondary-color': string; + '--conversation-tab-bubble-background-color': string; + '--conversation-tab-bubble-text-color': string; + '--conversation-tab-color-strip-color': string; + + /* Search Bar */ + '--search-bar-background-color': string; + '--search-bar-text-control-color': string; + '--search-bar-text-user-color': string; + '--search-bar-icon-color': string; + '--search-bar-icon-hover-color': string; + + /* Scroll Bars */ + '--scroll-bar-track-color': string; + '--scroll-bar-thumb-color': string; + '--scroll-bar-thumb-hover-color': string; + + /* Zoom Bar */ + '--zoom-bar-track-color': string; + '--zoom-bar-thumb-color': string; + '--zoom-bar-interval-color': string; + + /* Toggle Switch */ + '--toggle-switch-ball-color': string; + '--toggle-switch-ball-shadow-color': string; + /* TODO Theming think this should be white instead of transparent */ + '--toggle-switch-off-background-color': string; + '--toggle-switch-off-border-color': string; + '--toggle-switch-on-background-color': string; + '--toggle-switch-on-border-color': string; + + /* TODO Theming Think this is part of the Convesations Tab */ + /* Unread Messages Alert */ + '--unread-messages-alert-background-color': string; + '--unread-messages-alert-text-color': string; + + /* toggles between the Light and Dark mode for a Theme */ + /* Color Mode Button */ + '--button-color-mode-stroke-color': string; + '--button-color-mode-hover-color': string; + '--button-color-mode-fill-color': string; + + /* Emoji Reaction Bar */ + '--emoji-reaction-bar-background-color': string; + /* NOTE only used for + icon */ + '--emoji-reaction-bar-icon-background-color': string; + '--emoji-reaction-bar-icon-color': string; + + /* TODO Theming - Should Pills have their own colors? */ + + /* Modals */ + '--modal-background-content-color': string; + '--modal-text-color': string; + '--modal-text-danger-color': string; + + /* Toasts */ + '--toast-background-color': string; + '--toast-text-color': string; + '--toast-color-strip-color': string; + '--toast-progress-color': string; + + /* Right Panel Items */ + /* Also used for Session Dropdown */ + '--right-panel-item-background-color': string; + '--right-panel-item-background-hover-color': string; + '--right-panel-item-text-color': string; + + /* Session Text Logo */ + /* Loads SVG as IMG and uses a filter to change color */ + '--session-logo-text-light-filter': string; + '--session-logo-text-dark-filter': string; + '--session-logo-text-current-filter': string; + + /* Right Click / Context Menu) */ + '--context-menu-background-color': string; + '--context-menu-background-hover-color': string; + '--context-menu-text-color': string; + '--context-menu-text-hover-color': string; + + /* Message Link Preview */ + /* Also used for Images */ + /* Also used for the Media Grid Items */ + /* Also used for Staged Generic Attachments */ + /* Also used for FileDropZone */ + /* Used for Quote References Not Found */ + /* Same for all Themes */ + '--message-link-preview-background-color': string; + + /* Suggestions i.e. Mentions and Emojis */ + '--suggestions-background-color': string; + '--suggestions-background-hover-color': string; + '--suggestions-text-color': string; + '--suggestions-shadow': string; + + /* Inputs */ + /* Also used for some TextAreas */ + '--input-background-color': string; + '--input-background-hover-color': string; + '--input-text-placeholder-color': string; + '--input-text-color': string; + '--input-border-color': string; +}; + +export function loadThemeColors(variables: ThemeColorVariables) { + for (const [key, value] of Object.entries(variables)) { + document.documentElement.style.setProperty(key, value); + } +}