diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 9f7ef513b..6a42b5d9d 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -12,7 +12,8 @@ $session-compose-margin: 20px; &-list-item { background: var(--conversation-tab-background-color); - transition: var(--default-duration); + // TODO Theming, make everything have the default duration for transitioning colors + // transition: var(--default-duration); &:hover { background: var(--conversation-tab-background-hover-color); diff --git a/ts/components/AboutView.tsx b/ts/components/AboutView.tsx index d31d5c94f..3af5df44a 100644 --- a/ts/components/AboutView.tsx +++ b/ts/components/AboutView.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from 'react'; import styled from 'styled-components'; -import { switchThemeTo } from '../session/utils/Theme'; +import { switchThemeTo } from '../themes/switchTheme'; import { SessionTheme } from '../themes/SessionTheme'; const StyledContent = styled.div` @@ -36,7 +36,9 @@ export const AboutView = () => { useEffect(() => { if ((window as any).theme) { - void switchThemeTo((window as any).theme, null, false); + void switchThemeTo({ + theme: (window as any).theme, + }); } }, []); diff --git a/ts/components/DebugLogView.tsx b/ts/components/DebugLogView.tsx index 128f9864d..2eeb809cd 100644 --- a/ts/components/DebugLogView.tsx +++ b/ts/components/DebugLogView.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; -import { switchThemeTo } from '../session/utils/Theme'; +import { switchThemeTo } from '../themes/switchTheme'; import { SessionTheme } from '../themes/SessionTheme'; import { fetch } from '../util/logging'; import { SessionButton, SessionButtonType } from './basic/SessionButton'; @@ -101,7 +101,9 @@ const DebugLogViewAndSave = () => { export const DebugLogView = () => { useEffect(() => { if ((window as any).theme) { - void switchThemeTo((window as any).theme, null, false); + void switchThemeTo({ + theme: (window as any).theme, + }); } }, []); diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx index c0c48d08f..5f4c0b934 100644 --- a/ts/components/SessionPasswordPrompt.tsx +++ b/ts/components/SessionPasswordPrompt.tsx @@ -5,7 +5,7 @@ import autoBind from 'auto-bind'; import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton'; import { SessionSpinner } from './basic/SessionSpinner'; import { SessionTheme } from '../themes/SessionTheme'; -import { switchThemeTo } from '../session/utils/Theme'; +import { switchThemeTo } from '../themes/switchTheme'; import styled from 'styled-components'; import { ToastUtils } from '../session/utils'; import { isString } from 'lodash'; @@ -192,7 +192,9 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { export const SessionPasswordPrompt = () => { useEffect(() => { if ((window as any).theme) { - void switchThemeTo((window as any).theme, null, false); + void switchThemeTo({ + theme: (window as any).theme, + }); } }, []); diff --git a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx index 752655d1c..c51fe3412 100644 --- a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx +++ b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { COLORS } from '../../../themes/colors'; +import { COLORS } from '../../../themes/constants/colors'; import { getInitials } from '../../../util/getInitials'; type Props = { diff --git a/ts/components/conversation/SessionEmojiPanel.tsx b/ts/components/conversation/SessionEmojiPanel.tsx index 5eddc6fb0..e06cc55e6 100644 --- a/ts/components/conversation/SessionEmojiPanel.tsx +++ b/ts/components/conversation/SessionEmojiPanel.tsx @@ -6,7 +6,12 @@ import Picker from '@emoji-mart/react'; import { useSelector } from 'react-redux'; import { getTheme } from '../../state/selectors/theme'; import { FixedBaseEmoji, FixedPickerProps } from '../../types/Reaction'; -import { COLORS, PrimaryColorStateType, THEMES, ThemeStateType } from '../../themes/colors.js'; +import { + COLORS, + PrimaryColorStateType, + THEMES, + ThemeStateType, +} from '../../themes/constants/colors.js'; import { hexColorToRGB } from '../../util/hexColorToRGB'; import { getPrimaryColor } from '../../state/selectors/primaryColor'; import { i18nEmojiData } from '../../util/emoji'; diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx index c7a4a0d17..c17088ca1 100644 --- a/ts/components/leftpane/ActionsPanel.tsx +++ b/ts/components/leftpane/ActionsPanel.tsx @@ -49,10 +49,9 @@ import { ipcRenderer } from 'electron'; import { UserUtils } from '../../session/utils'; import { getLatestReleaseFromFileServer } from '../../session/apis/file_server_api/FileServerApi'; -import { switchThemeTo } from '../../session/utils/Theme'; -import { ThemeStateType } from '../../themes/colors'; +import { switchThemeTo } from '../../themes/switchTheme'; +import { ThemeStateType } from '../../themes/constants/colors'; import { getTheme } from '../../state/selectors/theme'; -import { switchPrimaryColor } from '../../themes/switchPrimaryColor'; const Section = (props: { type: SectionType }) => { const ourNumber = useSelector(getOurNumber); @@ -74,7 +73,11 @@ const Section = (props: { type: SectionType }) => { ? currentTheme.replace('light', 'dark') : currentTheme.replace('dark', 'light')) as ThemeStateType; - await switchThemeTo(newTheme, dispatch); + await switchThemeTo({ + theme: newTheme, + mainWindow: true, + dispatch, + }); } else if (type === SectionType.PathIndicator) { // Show Path Indicator Modal dispatch(onionPathModal({})); @@ -154,11 +157,14 @@ const cleanUpMediasInterval = DURATION.MINUTES * 60; const fetchReleaseFromFileServerInterval = 1000 * 60; // try to fetch the latest release from the fileserver every minute const setupTheme = async () => { - const primaryColor = window.Events.getPrimaryColorSetting(); - await switchPrimaryColor(primaryColor, window?.inboxStore?.dispatch || null); - const theme = window.Events.getThemeSetting(); - await switchThemeTo(theme, window?.inboxStore?.dispatch || null); + // We don't want to reset the primary color on startup + await switchThemeTo({ + theme, + mainWindow: true, + usePrimaryColor: true, + dispatch: window?.inboxStore?.dispatch || undefined, + }); }; // Do this only if we created a new Session ID, or if we already received the initial configuration message diff --git a/ts/components/settings/SettingsThemeSwitcher.tsx b/ts/components/settings/SettingsThemeSwitcher.tsx index 6e4753ab7..697a8646b 100644 --- a/ts/components/settings/SettingsThemeSwitcher.tsx +++ b/ts/components/settings/SettingsThemeSwitcher.tsx @@ -1,13 +1,17 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; -import { switchThemeTo } from '../../session/utils/Theme'; +import { switchThemeTo } from '../../themes/switchTheme'; import { getTheme } from '../../state/selectors/theme'; import { SessionRadio, SessionRadioPrimaryColors } from '../basic/SessionRadio'; import { SpacerLG, SpacerMD } from '../basic/Text'; import { StyledDescriptionSettingsItem, StyledTitleSettingsItem } from './SessionSettingListItem'; -import { getPrimaryColors, THEMES, ThemeStateType } from '../../themes/colors'; -import { switchPrimaryColor } from '../../themes/switchPrimaryColor'; +import { + getPrimaryColors, + getThemeColors, + StyleSessionSwitcher, +} from '../../themes/constants/colors'; +import { switchPrimaryColorTo } from '../../themes/switchPrimaryColor'; import { getPrimaryColor } from '../../state/selectors/primaryColor'; // tslint:disable: use-simple-attributes @@ -47,19 +51,6 @@ const ThemesContainer = styled.div` gap: var(--margins-lg); `; -type ThemeType = { - id: ThemeStateType; - title: string; - style: StyleSessionSwitcher; -}; - -type StyleSessionSwitcher = { - background: string; - border: string; - receivedBackground: string; - sentBackground: string; -}; - const StyledPreview = styled.svg` max-height: 100%; `; @@ -84,49 +75,7 @@ const ThemePreview = (props: { style: StyleSessionSwitcher }) => { }; const Themes = () => { - const themes: Array = [ - { - id: 'classic-dark', - title: window.i18n('classicDarkThemeTitle'), - style: { - background: THEMES.CLASSIC_DARK.COLOR0, - border: THEMES.CLASSIC_DARK.COLOR3, - receivedBackground: THEMES.CLASSIC_DARK.COLOR2, - sentBackground: THEMES.CLASSIC_DARK.PRIMARY, - }, - }, - { - id: 'classic-light', - title: window.i18n('classicLightThemeTitle'), - style: { - background: THEMES.CLASSIC_LIGHT.COLOR6, - border: THEMES.CLASSIC_LIGHT.COLOR3, - receivedBackground: THEMES.CLASSIC_LIGHT.COLOR4, - sentBackground: THEMES.CLASSIC_LIGHT.PRIMARY, - }, - }, - { - id: 'ocean-dark', - title: window.i18n('oceanDarkThemeTitle'), - style: { - background: THEMES.OCEAN_DARK.COLOR2, - border: THEMES.OCEAN_DARK.COLOR4, - receivedBackground: THEMES.OCEAN_DARK.COLOR4, - sentBackground: THEMES.OCEAN_DARK.PRIMARY, - }, - }, - { - id: 'ocean-light', - title: window.i18n('oceanLightThemeTitle'), - style: { - background: THEMES.OCEAN_LIGHT.COLOR7!, - border: THEMES.OCEAN_LIGHT.COLOR3, - receivedBackground: THEMES.OCEAN_LIGHT.COLOR1, - sentBackground: THEMES.OCEAN_LIGHT.PRIMARY, - }, - }, - ]; - + const themes = getThemeColors(); const selectedTheme = useSelector(getTheme); const dispatch = useDispatch(); @@ -135,9 +84,12 @@ const Themes = () => { {themes.map(theme => ( { - // TODO Change to switchTheme function - void switchThemeTo(theme.id, dispatch); + onClick={async () => { + await switchThemeTo({ + theme: theme.id, + mainWindow: true, + dispatch, + }); }} > @@ -179,8 +131,8 @@ export const SettingsThemeSwitcher = () => { inputName="primary-colors" ariaLabel={item.ariaLabel} color={item.color} - onClick={() => { - switchPrimaryColor(item.id, dispatch); + onClick={async () => { + await switchPrimaryColorTo(item.id, dispatch); }} /> ); diff --git a/ts/session/utils/Theme.tsx b/ts/session/utils/Theme.tsx deleted file mode 100644 index 6fc332817..000000000 --- a/ts/session/utils/Theme.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Dispatch } from 'redux'; -import { applyTheme } from '../../state/ducks/theme'; -import { ThemeStateType } from '../../themes/colors'; -import { switchHtmlToDarkTheme, switchHtmlToLightTheme } from '../../themes/SessionTheme'; -import { switchTheme } from '../../themes/switchTheme'; - -export async function switchThemeTo( - theme: ThemeStateType, - dispatch: Dispatch | null, - mainWindow: boolean = true -) { - if (mainWindow) { - await window.setTheme(theme); - } - - let newTheme: ThemeStateType | null = null; - - switch (theme) { - case 'classic-dark': - switchHtmlToDarkTheme(); - newTheme = 'classic-dark'; - break; - case 'classic-light': - switchHtmlToLightTheme(); - newTheme = 'classic-light'; - break; - case 'ocean-dark': - switchHtmlToDarkTheme(); - newTheme = 'ocean-dark'; - break; - case 'ocean-light': - switchHtmlToLightTheme(); - newTheme = 'ocean-light'; - break; - default: - window.log.warn('Unsupported theme: ', theme); - } - - if (newTheme) { - switchTheme(newTheme, mainWindow); - if (dispatch) { - dispatch?.(applyTheme(newTheme)); - } - } -} diff --git a/ts/state/ducks/primaryColor.tsx b/ts/state/ducks/primaryColor.tsx index ea00fcf65..75bcfc645 100644 --- a/ts/state/ducks/primaryColor.tsx +++ b/ts/state/ducks/primaryColor.tsx @@ -1,4 +1,4 @@ -import { PrimaryColorStateType } from '../../themes/colors'; +import { PrimaryColorStateType } from '../../themes/constants/colors'; export const APPLY_PRIMARY_COLOR = 'APPLY_PRIMARY_COLOR'; diff --git a/ts/state/ducks/theme.tsx b/ts/state/ducks/theme.tsx index d8b09a6fb..54edce7ef 100644 --- a/ts/state/ducks/theme.tsx +++ b/ts/state/ducks/theme.tsx @@ -1,4 +1,4 @@ -import { ThemeStateType } from '../../themes/colors'; +import { ThemeStateType } from '../../themes/constants/colors'; export const APPLY_THEME = 'APPLY_THEME'; diff --git a/ts/state/reducer.ts b/ts/state/reducer.ts index f113900dd..4a4603a4e 100644 --- a/ts/state/reducer.ts +++ b/ts/state/reducer.ts @@ -17,7 +17,7 @@ import { reducer as stagedAttachments, StagedAttachmentsStateType, } from './ducks/stagedAttachments'; -import { PrimaryColorStateType, ThemeStateType } from '../themes/colors'; +import { PrimaryColorStateType, ThemeStateType } from '../themes/constants/colors'; export type StateType = { search: SearchStateType; diff --git a/ts/state/selectors/primaryColor.ts b/ts/state/selectors/primaryColor.ts index 9829eba6e..f0f608942 100644 --- a/ts/state/selectors/primaryColor.ts +++ b/ts/state/selectors/primaryColor.ts @@ -1,4 +1,4 @@ -import { PrimaryColorStateType } from '../../themes/colors'; +import { PrimaryColorStateType } from '../../themes/constants/colors'; import { StateType } from '../reducer'; export const getPrimaryColor = (state: StateType): PrimaryColorStateType => state.primaryColor; diff --git a/ts/state/selectors/theme.ts b/ts/state/selectors/theme.ts index 21b9e7bd9..5f24e5471 100644 --- a/ts/state/selectors/theme.ts +++ b/ts/state/selectors/theme.ts @@ -1,4 +1,4 @@ -import { ThemeStateType } from '../../themes/colors'; +import { ThemeStateType } from '../../themes/constants/colors'; import { StateType } from '../reducer'; export const getTheme = (state: StateType): ThemeStateType => state.theme; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 756e50c4a..892c0e605 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 './'; +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 @@ -350,7 +350,6 @@ export const switchHtmlToLightTheme = () => { // default to classic light theme export const SessionGlobalStyles = createGlobalStyle` html { - /* Old Theme Variables */ /* FONTS */ --font-default: 'Roboto'; --font-font-accent: 'Loor'; @@ -461,230 +460,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..a2b27ee19 --- /dev/null +++ b/ts/themes/classicDark.ts @@ -0,0 +1,146 @@ +import { hexColorToRGB } from '../util/hexColorToRGB'; +import { COLORS, THEMES } from './constants/colors'; +import { ThemeColorVariables } from './variableColors'; + +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)', +}; + +export default classicDark; diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts new file mode 100644 index 000000000..361314059 --- /dev/null +++ b/ts/themes/classicLight.ts @@ -0,0 +1,146 @@ +import { hexColorToRGB } from '../util/hexColorToRGB'; +import { COLORS, THEMES } from './constants/colors'; +import { ThemeColorVariables } from './variableColors'; + +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)', +}; + +export default classicLight; diff --git a/ts/themes/colors.tsx b/ts/themes/constants/colors.tsx similarity index 68% rename from ts/themes/colors.tsx rename to ts/themes/constants/colors.tsx index af75226e3..fbafa6ebd 100644 --- a/ts/themes/colors.tsx +++ b/ts/themes/constants/colors.tsx @@ -91,22 +91,25 @@ export type PrimaryColorStateType = type PrimaryColorType = { id: PrimaryColorStateType; ariaLabel: string; color: string }; -export const getPrimaryColors = (): Array => { - return [ - { id: 'green', ariaLabel: window.i18n('primaryColorGreen'), color: COLORS.PRIMARY.GREEN }, - { id: 'blue', ariaLabel: window.i18n('primaryColorBlue'), color: COLORS.PRIMARY.BLUE }, - { id: 'yellow', ariaLabel: window.i18n('primaryColorYellow'), color: COLORS.PRIMARY.YELLOW }, - { id: 'pink', ariaLabel: window.i18n('primaryColorPink'), color: COLORS.PRIMARY.PINK }, - { id: 'purple', ariaLabel: window.i18n('primaryColorPurple'), color: COLORS.PRIMARY.PURPLE }, - { id: 'orange', ariaLabel: window.i18n('primaryColorOrange'), color: COLORS.PRIMARY.ORANGE }, - { id: 'red', ariaLabel: window.i18n('primaryColorRed'), color: COLORS.PRIMARY.RED }, - ]; -}; +export const getPrimaryColors = (): Array => [ + { id: 'green', ariaLabel: window.i18n('primaryColorGreen'), color: COLORS.PRIMARY.GREEN }, + { id: 'blue', ariaLabel: window.i18n('primaryColorBlue'), color: COLORS.PRIMARY.BLUE }, + { id: 'yellow', ariaLabel: window.i18n('primaryColorYellow'), color: COLORS.PRIMARY.YELLOW }, + { id: 'pink', ariaLabel: window.i18n('primaryColorPink'), color: COLORS.PRIMARY.PINK }, + { id: 'purple', ariaLabel: window.i18n('primaryColorPurple'), color: COLORS.PRIMARY.PURPLE }, + { id: 'orange', ariaLabel: window.i18n('primaryColorOrange'), color: COLORS.PRIMARY.ORANGE }, + { id: 'red', ariaLabel: window.i18n('primaryColorRed'), color: COLORS.PRIMARY.RED }, +]; // Themes export type ThemeStateType = 'classic-light' | 'classic-dark' | 'ocean-light' | 'ocean-dark'; // used for redux state type ThemeNames = 'CLASSIC_LIGHT' | 'CLASSIC_DARK' | 'OCEAN_LIGHT' | 'OCEAN_DARK'; + +export function convertThemeStateToName(themeState: string): ThemeNames { + return themeState.replace('-', '_').toUpperCase() as ThemeNames; +} + type ThemeColors = { PRIMARY: string; DANGER: string; @@ -225,4 +228,60 @@ const THEMES: Themes = { }, }; +type ThemeType = { + id: ThemeStateType; + title: string; + style: StyleSessionSwitcher; +}; + +export type StyleSessionSwitcher = { + background: string; + border: string; + receivedBackground: string; + sentBackground: string; +}; + +export const getThemeColors = (): Array => [ + { + id: 'classic-dark', + title: window.i18n('classicDarkThemeTitle'), + style: { + background: THEMES.CLASSIC_DARK.COLOR0, + border: THEMES.CLASSIC_DARK.COLOR3, + receivedBackground: THEMES.CLASSIC_DARK.COLOR2, + sentBackground: THEMES.CLASSIC_DARK.PRIMARY, + }, + }, + { + id: 'classic-light', + title: window.i18n('classicLightThemeTitle'), + style: { + background: THEMES.CLASSIC_LIGHT.COLOR6, + border: THEMES.CLASSIC_LIGHT.COLOR3, + receivedBackground: THEMES.CLASSIC_LIGHT.COLOR4, + sentBackground: THEMES.CLASSIC_LIGHT.PRIMARY, + }, + }, + { + id: 'ocean-dark', + title: window.i18n('oceanDarkThemeTitle'), + style: { + background: THEMES.OCEAN_DARK.COLOR2, + border: THEMES.OCEAN_DARK.COLOR4, + receivedBackground: THEMES.OCEAN_DARK.COLOR4, + sentBackground: THEMES.OCEAN_DARK.PRIMARY, + }, + }, + { + id: 'ocean-light', + title: window.i18n('oceanLightThemeTitle'), + style: { + background: THEMES.OCEAN_LIGHT.COLOR7!, + border: THEMES.OCEAN_LIGHT.COLOR3, + receivedBackground: THEMES.OCEAN_LIGHT.COLOR1, + sentBackground: THEMES.OCEAN_LIGHT.PRIMARY, + }, + }, +]; + export { COLORS, THEMES }; 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/index.ts b/ts/themes/index.ts new file mode 100644 index 000000000..540c53113 --- /dev/null +++ b/ts/themes/index.ts @@ -0,0 +1,6 @@ +import classicLight from './classicLight'; +import classicDark from './classicDark'; +import oceanLight from './oceanLight'; +import oceanDark from './oceanDark'; + +export { classicLight, classicDark, oceanLight, oceanDark }; diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts new file mode 100644 index 000000000..479c9b337 --- /dev/null +++ b/ts/themes/oceanDark.ts @@ -0,0 +1,146 @@ +import { hexColorToRGB } from '../util/hexColorToRGB'; +import { COLORS, THEMES } from './constants/colors'; +import { ThemeColorVariables } from './variableColors'; + +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)', +}; + +export default oceanDark; diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts new file mode 100644 index 000000000..9b48b0e1c --- /dev/null +++ b/ts/themes/oceanLight.ts @@ -0,0 +1,146 @@ +import { hexColorToRGB } from '../util/hexColorToRGB'; +import { COLORS, THEMES } from './constants/colors'; +import { ThemeColorVariables } from './variableColors'; + +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)', +}; + +export default oceanLight; diff --git a/ts/themes/switchPrimaryColor.tsx b/ts/themes/switchPrimaryColor.tsx index 84cd7b980..5f74004c9 100644 --- a/ts/themes/switchPrimaryColor.tsx +++ b/ts/themes/switchPrimaryColor.tsx @@ -1,8 +1,17 @@ +import { find } from 'lodash'; import { Dispatch } from 'redux'; import { applyPrimaryColor } from '../state/ducks/primaryColor'; -import { COLORS, PrimaryColorStateType } from './colors'; +import { COLORS, getPrimaryColors, PrimaryColorStateType } from './constants/colors'; -export async function switchPrimaryColor(color: PrimaryColorStateType, dispatch: Dispatch | null) { +export function findPrimaryColorId(hexCode: string): PrimaryColorStateType | undefined { + const primaryColors = getPrimaryColors(); + return find(primaryColors, { color: hexCode })?.id; +} + +export async function switchPrimaryColorTo( + color: PrimaryColorStateType, + dispatch: Dispatch | null +) { await window.Events.setPrimaryColorSetting(color); document.documentElement.style.setProperty( diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index 8d82d0189..8ffa29e80 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -1,1737 +1,67 @@ -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)'); -} - -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)'); -} - -export async function switchTheme(theme: ThemeStateType, mainWindow: boolean = true) { - let primaryColor = null; - - if (mainWindow) { - const selectedPrimaryColor = await window.Events.getPrimaryColorSetting(); - primaryColor = - selectedPrimaryColor && (COLORS.PRIMARY as any)[`${selectedPrimaryColor.toUpperCase()}`]; - } +import { Dispatch } from 'redux'; +import { applyTheme } from '../state/ducks/theme'; +import { classicDark, classicLight, oceanDark, oceanLight } from '.'; +import { convertThemeStateToName, THEMES, ThemeStateType } from './constants/colors'; +import { switchHtmlToDarkTheme, switchHtmlToLightTheme } from './SessionTheme'; +import { loadThemeColors } from './variableColors'; +import { findPrimaryColorId, switchPrimaryColorTo } from './switchPrimaryColor'; + +type SwitchThemeProps = { + theme: ThemeStateType; + mainWindow?: boolean; + usePrimaryColor?: boolean; + dispatch?: Dispatch; +}; + +export async function switchThemeTo(props: SwitchThemeProps) { + const { theme, mainWindow, usePrimaryColor, dispatch } = props; + let newTheme: ThemeStateType | null = null; switch (theme) { - case 'classic-light': - loadClassicLight(primaryColor); - break; case 'classic-dark': - loadClassicDark(primaryColor); + switchHtmlToDarkTheme(); + loadThemeColors(classicDark); + newTheme = 'classic-dark'; break; - case 'ocean-light': - loadOceanLight(primaryColor); + case 'classic-light': + switchHtmlToLightTheme(); + loadThemeColors(classicLight); + newTheme = 'classic-light'; break; case 'ocean-dark': - loadOceanDark(primaryColor); + switchHtmlToDarkTheme(); + loadThemeColors(oceanDark); + newTheme = 'ocean-dark'; break; - default: - window.log.warn('Unsupported theme:', theme); + case 'ocean-light': + switchHtmlToLightTheme(); + loadThemeColors(oceanLight); + newTheme = 'ocean-light'; break; + default: + window.log.warn('Unsupported theme: ', theme); + } + + if (newTheme) { + if (mainWindow) { + await window.setTheme(theme); + } + + if (dispatch) { + dispatch(applyTheme(newTheme)); + if (usePrimaryColor) { + // Set primary color after the theme is loaded so that it's not overwritten + const primaryColor = window.Events.getPrimaryColorSetting(); + await switchPrimaryColorTo(primaryColor, dispatch); + } else { + // By default, when we change themes we want to reset the primary color + const defaultPrimaryColor = findPrimaryColorId( + THEMES[convertThemeStateToName(newTheme)].PRIMARY + ); + if (defaultPrimaryColor) { + await switchPrimaryColorTo(defaultPrimaryColor, dispatch); + } + } + } } } 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); + } +}