From edefa21a2bffe3b743770cb1f4790146c42b6cc7 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 26 Sep 2022 12:04:53 +1000 Subject: [PATCH] feat: we can now toggle to the classic dark theme fixed ocean dark colors and updating theme setting logic --- .../conversation/SessionEmojiPanel.tsx | 1 + .../message/reactions/ReactionPopup.tsx | 2 +- ts/components/dialog/BanOrUnbanUserDialog.tsx | 2 +- ts/components/dialog/ModeratorsAddDialog.tsx | 2 +- ts/components/dialog/ReactClearAllModal.tsx | 2 +- ts/components/leftpane/ActionsPanel.tsx | 8 +- .../settings/SettingsThemeSwitcher.tsx | 108 ++- ts/mains/main_renderer.tsx | 8 +- ts/session/utils/Theme.tsx | 25 +- ts/state/ducks/theme.tsx | 7 +- ts/state/reducer.ts | 3 +- ts/state/selectors/theme.ts | 2 +- ts/themes/SessionTheme.tsx | 29 +- ts/themes/colors.tsx | 35 +- ts/themes/switchTheme.ts | 713 ++++++++++++++++++ ts/types/Reaction.ts | 1 + 16 files changed, 829 insertions(+), 119 deletions(-) create mode 100644 ts/themes/switchTheme.ts diff --git a/ts/components/conversation/SessionEmojiPanel.tsx b/ts/components/conversation/SessionEmojiPanel.tsx index ec4759ea4..55a4118bc 100644 --- a/ts/components/conversation/SessionEmojiPanel.tsx +++ b/ts/components/conversation/SessionEmojiPanel.tsx @@ -40,6 +40,7 @@ export const StyledEmojiPanel = styled.div<{ isModal: boolean; theme: 'light' | ${props => { switch (props.theme) { + // TODO Theming - Add Ocean Colors case 'dark': return ` --background-rgb: 27, 27, 27; // var(--color-cell-background) diff --git a/ts/components/conversation/message/reactions/ReactionPopup.tsx b/ts/components/conversation/message/reactions/ReactionPopup.tsx index ca62def1e..04b262abb 100644 --- a/ts/components/conversation/message/reactions/ReactionPopup.tsx +++ b/ts/components/conversation/message/reactions/ReactionPopup.tsx @@ -96,7 +96,7 @@ const generateContactsString = async ( }; const Contacts = (contacts: Array, count: number) => { - const darkMode = useSelector(getTheme) === 'dark'; + const darkMode = useSelector(getTheme) === 'classic-dark'; if (!Boolean(contacts?.length > 0)) { return; diff --git a/ts/components/dialog/BanOrUnbanUserDialog.tsx b/ts/components/dialog/BanOrUnbanUserDialog.tsx index c8079a5e1..914ac7c35 100644 --- a/ts/components/dialog/BanOrUnbanUserDialog.tsx +++ b/ts/components/dialog/BanOrUnbanUserDialog.tsx @@ -67,7 +67,7 @@ export const BanOrUnBanUserDialog = (props: { const { i18n } = window; const isBan = banType === 'ban'; const dispatch = useDispatch(); - const darkMode = useSelector(getTheme) === 'dark'; + const darkMode = useSelector(getTheme) === 'classic-dark'; const convo = getConversationController().get(conversationId); const inputRef = useRef(null); diff --git a/ts/components/dialog/ModeratorsAddDialog.tsx b/ts/components/dialog/ModeratorsAddDialog.tsx index 974ababd2..831a5a123 100644 --- a/ts/components/dialog/ModeratorsAddDialog.tsx +++ b/ts/components/dialog/ModeratorsAddDialog.tsx @@ -20,7 +20,7 @@ export const AddModeratorsDialog = (props: Props) => { const { conversationId } = props; const dispatch = useDispatch(); - const darkMode = useSelector(getTheme) === 'dark'; + const darkMode = useSelector(getTheme) === 'classic-dark'; const convo = getConversationController().get(conversationId); const [inputBoxValue, setInputBoxValue] = useState(''); diff --git a/ts/components/dialog/ReactClearAllModal.tsx b/ts/components/dialog/ReactClearAllModal.tsx index 2ab1e5ff2..11de49a18 100644 --- a/ts/components/dialog/ReactClearAllModal.tsx +++ b/ts/components/dialog/ReactClearAllModal.tsx @@ -54,7 +54,7 @@ export const ReactClearAllModal = (props: Props): ReactElement => { const [clearingInProgress, setClearingInProgress] = useState(false); const dispatch = useDispatch(); - const darkMode = useSelector(getTheme) === 'dark'; + const darkMode = useSelector(getTheme) === 'classic-dark'; const msgProps = useMessageReactsPropsById(messageId); if (!msgProps) { diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx index fc4e9c6c6..c766ad00f 100644 --- a/ts/components/leftpane/ActionsPanel.tsx +++ b/ts/components/leftpane/ActionsPanel.tsx @@ -50,6 +50,7 @@ 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'; const Section = (props: { type: SectionType }) => { const ourNumber = useSelector(getOurNumber); @@ -65,9 +66,10 @@ const Section = (props: { type: SectionType }) => { if (type === SectionType.Profile) { dispatch(editProfileModal({})); } else if (type === SectionType.Moon) { - // TODO Theming Toggle current theme light and dark mode with new system - const currentTheme = window.Events.getThemeSetting(); - const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + const currentTheme = String(window.Events.getThemeSetting()); + const newTheme = (currentTheme.includes('light') + ? currentTheme.replace('light', 'dark') + : currentTheme.replace('dark', 'light')) as ThemeStateType; await switchThemeTo(newTheme, dispatch); } else if (type === SectionType.PathIndicator) { diff --git a/ts/components/settings/SettingsThemeSwitcher.tsx b/ts/components/settings/SettingsThemeSwitcher.tsx index 0ca644a60..150bda21a 100644 --- a/ts/components/settings/SettingsThemeSwitcher.tsx +++ b/ts/components/settings/SettingsThemeSwitcher.tsx @@ -2,33 +2,29 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; import { switchThemeTo } from '../../session/utils/Theme'; -import { - darkColorReceivedMessageBg, - darkColorSentMessageBg, - getPrimaryColors, - lightColorReceivedMessageBg, - lightColorSentMessageBg, - OceanBlueDark, - OceanBlueLight, - PrimaryColorIds, -} from '../../themes/SessionTheme'; -import { ThemeStateType } from '../../state/ducks/theme'; +import { getPrimaryColors, PrimaryColorIds } from '../../themes/SessionTheme'; import { getTheme } from '../../state/selectors/theme'; import { SessionRadio, SessionRadioPrimaryColors } from '../basic/SessionRadio'; import { SpacerLG, SpacerMD } from '../basic/Text'; import { StyledDescriptionSettingsItem, StyledTitleSettingsItem } from './SessionSettingListItem'; +import { THEMES, ThemeStateType } from '../../themes/colors'; // tslint:disable: use-simple-attributes const StyledSwitcherContainer = styled.div` font-size: var(--font-size-md); padding: var(--margins-lg); - background: var(--color-cell-background); + margin-bottom: var(--margins-lg); + + background: var(--settings-tab-background-color); + color: var(--settings-tab-text-color); + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); `; const ThemeContainer = styled.button` - background: var(--color-conversation-list); - border: 1px solid var(--color-clickable-hovered); + background: var(--background-secondary-color); + border: 1px solid var(--border-color); border-radius: 8px; padding: var(--margins-sm); display: flex; @@ -40,7 +36,7 @@ const ThemeContainer = styled.button` transition: var(--default-duration); :hover { - background: var(--color-clickable-hovered); + background: var(--settings-tab-background-hover-color); } `; @@ -59,8 +55,8 @@ type ThemeType = { type StyleSessionSwitcher = { background: string; border: string; - receivedBg: string; - sentBg: string; + receivedBackground: string; + sentBackground: string; }; const StyledPreview = styled.svg` @@ -75,11 +71,11 @@ const ThemePreview = (props: { style: StyleSessionSwitcher }) => { d="M7.5.9h64.6c3.6 0 6.5 2.9 6.5 6.5v56.9c0 3.6-2.9 6.5-6.5 6.5H7.5c-3.6 0-6.5-2.9-6.5-6.5V7.4C1 3.9 3.9.9 7.5.9z" /> @@ -89,43 +85,43 @@ const ThemePreview = (props: { style: StyleSessionSwitcher }) => { const Themes = () => { const themes: Array = [ { - id: 'dark', + id: 'classic-dark', title: window.i18n('classicDarkThemeTitle'), style: { - background: '#000000', - border: '#414141', - receivedBg: darkColorReceivedMessageBg, - sentBg: darkColorSentMessageBg, + background: THEMES.CLASSIC_DARK.COLOR0, + border: THEMES.CLASSIC_DARK.COLOR3, + receivedBackground: THEMES.CLASSIC_DARK.COLOR2, + sentBackground: THEMES.CLASSIC_DARK.PRIMARY, }, }, { - id: 'light', + id: 'classic-light', title: window.i18n('classicLightThemeTitle'), style: { - background: '#ffffff', - border: '#414141', - receivedBg: lightColorReceivedMessageBg, - sentBg: lightColorSentMessageBg, + 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: OceanBlueDark.background, - border: OceanBlueDark.border, - receivedBg: OceanBlueDark.received, - sentBg: OceanBlueDark.sent, + 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: OceanBlueLight.background, - border: OceanBlueLight.border, - receivedBg: OceanBlueLight.received, - sentBg: OceanBlueLight.sent, + background: THEMES.OCEAN_LIGHT.COLOR7!, + border: THEMES.OCEAN_LIGHT.COLOR3, + receivedBackground: THEMES.OCEAN_LIGHT.COLOR1, + sentBackground: THEMES.OCEAN_LIGHT.PRIMARY, }, }, ]; @@ -135,25 +131,25 @@ const Themes = () => { return ( <> - {themes.map(theme => { - function onSelectTheme() { - void switchThemeTo(theme.id, dispatch); - } - return ( - - - - - {theme.title} - - - ); - })} + {themes.map(theme => ( + { + void switchThemeTo(theme.id, dispatch); + }} + > + + + + {theme.title} + + + ))} ); }; diff --git a/ts/mains/main_renderer.tsx b/ts/mains/main_renderer.tsx index 367613e28..fb3661793 100644 --- a/ts/mains/main_renderer.tsx +++ b/ts/mains/main_renderer.tsx @@ -95,13 +95,13 @@ function mapOldThemeToNew(theme: string) { switch (theme) { case 'dark': case 'light': - return theme; + return `classic-${theme}`; case 'android-dark': - return 'dark'; + return 'classic-dark'; case 'android': case 'ios': default: - return 'light'; + return 'classic-light'; } } @@ -125,7 +125,7 @@ Storage.onready(async () => { // These make key operations available to IPC handlers created in preload.js window.Events = { - getThemeSetting: () => Storage.get('theme-setting', 'light'), + getThemeSetting: () => Storage.get('theme-setting', 'classic-light'), setThemeSetting: async (value: any) => { await Storage.put('theme-setting', value); }, diff --git a/ts/session/utils/Theme.tsx b/ts/session/utils/Theme.tsx index ceaef1634..e654dbd78 100644 --- a/ts/session/utils/Theme.tsx +++ b/ts/session/utils/Theme.tsx @@ -1,27 +1,38 @@ import { Dispatch } from 'redux'; -import { applyTheme, ThemeStateType } from '../../state/ducks/theme'; +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) { await window.setTheme(theme); - // for now, do not switch to ocean light nor dark theme as the SessionTheme associated with them is not complete let newTheme: ThemeStateType | null = null; switch (theme) { - case 'dark': + case 'classic-dark': switchHtmlToDarkTheme(); - newTheme = 'dark'; + switchTheme(theme); + newTheme = 'classic-dark'; break; - case 'light': + case 'classic-light': switchHtmlToLightTheme(); - newTheme = 'light'; + 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); } + switchTheme(theme); + if (newTheme) { dispatch?.(applyTheme(newTheme)); } diff --git a/ts/state/ducks/theme.tsx b/ts/state/ducks/theme.tsx index b3a9ac3e9..d8b09a6fb 100644 --- a/ts/state/ducks/theme.tsx +++ b/ts/state/ducks/theme.tsx @@ -1,7 +1,6 @@ -export const APPLY_THEME = 'APPLY_THEME'; +import { ThemeStateType } from '../../themes/colors'; -// TODO Theming - should be classic-light and classic-dark -export type ThemeStateType = 'light' | 'dark' | 'ocean-light' | 'ocean-dark'; +export const APPLY_THEME = 'APPLY_THEME'; export const applyTheme = (theme: ThemeStateType) => { return { @@ -10,7 +9,7 @@ export const applyTheme = (theme: ThemeStateType) => { }; }; -export const initialThemeState: ThemeStateType = 'light'; +export const initialThemeState: ThemeStateType = 'classic-light'; export const reducer = ( state: any = initialThemeState, diff --git a/ts/state/reducer.ts b/ts/state/reducer.ts index 4e81828d7..91315fd67 100644 --- a/ts/state/reducer.ts +++ b/ts/state/reducer.ts @@ -3,7 +3,7 @@ import { combineReducers } from 'redux'; import { reducer as search, SearchStateType } from './ducks/search'; import { ConversationsStateType, reducer as conversations } from './ducks/conversations'; import { reducer as user, UserStateType } from './ducks/user'; -import { reducer as theme, ThemeStateType } from './ducks/theme'; +import { reducer as theme } from './ducks/theme'; import { reducer as section, SectionStateType } from './ducks/section'; import { defaultRoomReducer as defaultRooms, DefaultRoomsState } from './ducks/defaultRooms'; import { callReducer as call, CallStateType } from './ducks/call'; @@ -16,6 +16,7 @@ import { reducer as stagedAttachments, StagedAttachmentsStateType, } from './ducks/stagedAttachments'; +import { ThemeStateType } from '../themes/colors'; export type StateType = { search: SearchStateType; diff --git a/ts/state/selectors/theme.ts b/ts/state/selectors/theme.ts index 947da7e0b..21b9e7bd9 100644 --- a/ts/state/selectors/theme.ts +++ b/ts/state/selectors/theme.ts @@ -1,4 +1,4 @@ +import { ThemeStateType } from '../../themes/colors'; import { StateType } from '../reducer'; -import { ThemeStateType } from '../ducks/theme'; export const getTheme = (state: StateType): ThemeStateType => state.theme; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 91dbfb479..05818d23a 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -347,7 +347,7 @@ export const switchHtmlToLightTheme = () => { ); }; -// default to light theme +// default to classic light theme export const SessionGlobalStyles = createGlobalStyle` html { /* Old Theme Variables */ @@ -487,7 +487,7 @@ export const SessionGlobalStyles = createGlobalStyle` /* Text Box */ /* Also used for inputs specifically password box input */ --text-box-background-color: var(--background-primary-color); - --text-box-text-control-color: ${THEMES.CLASSIC_LIGHT.COLOR1}; + --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}; @@ -616,10 +616,12 @@ export const SessionGlobalStyles = createGlobalStyle` /* TODO Theming - Should Pills have their own colors? */ - /* Modals / Toasts */ + /* Modals */ --modal-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; --modal-text-color: var(--text-primary-color); --modal-text-danger-color: var(--danger-color); + + /* Toasts */ --toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1); /* Right Panel Items */ @@ -648,27 +650,6 @@ export const SessionTheme = ({ children }: { children: any }) => ( * */ -// TODO Theming need to improve this somehow -type SettingsThemeSwitcherColor = { - background: string; - border: string; - sent: string; - received: string; -}; - -export const OceanBlueDark: SettingsThemeSwitcherColor = { - background: '#242735', - border: '#3D4A5E', - sent: '#57C9FA', - received: '#3D4A5D', -}; -export const OceanBlueLight: SettingsThemeSwitcherColor = { - background: '#ECFAFB', - border: '#5CAACC', - sent: '#57C9FA', - received: '#B3EDF2', -}; - export type PrimaryColorIds = 'green' | 'blue' | 'yellow' | 'pink' | 'purple' | 'orange' | 'red'; type PrimaryColorType = { id: PrimaryColorIds; ariaLabel: string; color: string }; diff --git a/ts/themes/colors.tsx b/ts/themes/colors.tsx index a736856d1..635ebdc7f 100644 --- a/ts/themes/colors.tsx +++ b/ts/themes/colors.tsx @@ -77,6 +77,8 @@ const COLORS: Colors = { }; // 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'; type ThemeColors = { PRIMARY: string; @@ -88,6 +90,7 @@ type ThemeColors = { COLOR4: string; COLOR5: string; COLOR6: string; + COLOR7?: string; // Only used with Ocean Light }; type Themes = Record; @@ -115,25 +118,26 @@ const classicDark6 = '#FFFFFF'; // Ocean Light const oceanLightPrimary = '#57C9FA'; -const oceanLightDanger = dangerDark; +const oceanLightDanger = dangerLight; const oceanLight0 = '#000000'; -const oceanLight1 = '#1A1C28'; -const oceanLight2 = '#252735'; -const oceanLight3 = '#2B2D40'; -const oceanLight4 = '#3D4A5D'; -const oceanLight5 = '#A6A9CE'; -const oceanLight6 = '#FFFFFF'; +const oceanLight1 = '#19345D'; +const oceanLight2 = '#6A6E90'; +const oceanLight3 = '#5CAACC'; +const oceanLight4 = '#B3EDF2'; +const oceanLight5 = '#E7F3F4'; +const oceanLight6 = '#ECFAFB'; +const oceanLight7 = '#FCFFFF'; // Ocean Dark const oceanDarkPrimary = '#57C9FA'; -const oceanDarkDanger = dangerLight; -const oceanDark0 = '#19345D'; -const oceanDark1 = '#6A6E90'; -const oceanDark2 = '#5CAACC'; -const oceanDark3 = '#B3EDF2'; -const oceanDark4 = '#E7F3F4'; -const oceanDark5 = '#ECFAFB'; -const oceanDark6 = '#FCFFFF'; +const oceanDarkDanger = dangerDark; +const oceanDark0 = '#000000'; +const oceanDark1 = '#1A1C28'; +const oceanDark2 = '#252735'; +const oceanDark3 = '#2B2D40'; +const oceanDark4 = '#3D4A5D'; +const oceanDark5 = '#A6A9CE'; +const oceanDark6 = '#FFFFFF'; const THEMES: Themes = { CLASSIC_LIGHT: { @@ -168,6 +172,7 @@ const THEMES: Themes = { COLOR4: oceanLight4, COLOR5: oceanLight5, COLOR6: oceanLight6, + COLOR7: oceanLight7, }, OCEAN_DARK: { PRIMARY: oceanDarkPrimary, diff --git a/ts/themes/switchTheme.ts b/ts/themes/switchTheme.ts new file mode 100644 index 000000000..c23aa29f1 --- /dev/null +++ b/ts/themes/switchTheme.ts @@ -0,0 +1,713 @@ +import { hexColorToRGB } from '../util/hexColorToRGB'; +import { COLORS, THEMES, ThemeStateType } from './colors'; + +function loadClassicLight() { + document.documentElement.style.setProperty('--primary-color', THEMES.CLASSIC_LIGHT.PRIMARY); + document.documentElement.style.setProperty('--danger-color', THEMES.CLASSIC_LIGHT.DANGER); + + 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(--text-secondary-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-disabled-color', + 'var(--text-primary-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-fill-color', + 'var(--text-secondary-color)' + ); + + document.documentElement.style.setProperty( + '--zoom-bar-interval-color', + 'var(--text-secondary-color)' + ); + document.documentElement.style.setProperty('--zoom-bar-selector-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(--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', + 'var(--text-primary-color)' + ); + + 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-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-progress-color', + `rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 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)' + ); +} + +function loadClassicDark() { + document.documentElement.style.setProperty('--primary-color', THEMES.CLASSIC_DARK.PRIMARY); + document.documentElement.style.setProperty('--danger-color', THEMES.CLASSIC_DARK.DANGER); + + 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(--text-secondary-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)' + ); + // TODO Theming - Confirm this + 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-disabled-color', + 'var(--text-primary-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-fill-color', THEMES.CLASSIC_DARK.COLOR4); + + document.documentElement.style.setProperty( + '--zoom-bar-interval-color', + THEMES.CLASSIC_DARK.COLOR4 + ); + document.documentElement.style.setProperty('--zoom-bar-selector-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', + 'var(--background-primary-color)' + ); + + 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-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)'); + + // TODO Theming - Update + document.documentElement.style.setProperty( + '--toast-progress-color', + `rgba(${hexColorToRGB(THEMES.CLASSIC_DARK.COLOR0)}, 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_DARK.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)' + ); +} + +function loadOceanLight() {} + +function loadOceanDark() {} + +export const switchTheme = (theme: ThemeStateType) => { + switch (theme) { + case 'classic-light': + loadClassicLight(); + break; + case 'classic-dark': + loadClassicDark(); + break; + case 'ocean-light': + loadOceanLight(); + break; + case 'ocean-dark': + loadOceanDark(); + break; + default: + window.log.warn('Unsupported theme:', theme); + break; + } +}; diff --git a/ts/types/Reaction.ts b/ts/types/Reaction.ts index cf1b26c75..64f15a9aa 100644 --- a/ts/types/Reaction.ts +++ b/ts/types/Reaction.ts @@ -58,6 +58,7 @@ export interface NativeEmojiData { export interface FixedPickerProps { autoFocus?: boolean | undefined; title?: string | undefined; + // TODO Theming - Add Ocean Colors theme?: 'auto' | 'light' | 'dark' | undefined; perLine?: number | undefined; stickySearch?: boolean | undefined;