feat: we can now toggle to the classic dark theme

fixed ocean dark colors and updating theme setting logic

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)

ts/components/conversation/message/reactions/ReactionPopup.tsx

@@ -96,7 +96,7 @@ const generateContactsString = async (
 };
 
 const Contacts = (contacts: Array<string>, count: number) => {
-  const darkMode = useSelector(getTheme) === 'dark';
+  const darkMode = useSelector(getTheme) === 'classic-dark';
 
   if (!Boolean(contacts?.length > 0)) {
     return;

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);
 

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('');

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) {

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) {

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"
       />
       <path
-        fill={props.style.receivedBg}
+        fill={props.style.receivedBackground}
         d="M8.7 27.9c0-3.2 2.6-5.7 5.7-5.7h30.4c3.2 0 5.7 2.6 5.7 5.7 0 3.2-2.6 5.7-5.7 5.7H14.4c-3.1.1-5.7-2.5-5.7-5.7z"
       />
       <path
-        fill={props.style.sentBg}
+        fill={props.style.sentBackground}
         d="M32.6 42.2c0-3.2 2.6-5.7 5.7-5.7h27c3.2 0 5.7 2.6 5.7 5.7 0 3.2-2.6 5.7-5.7 5.7h-27c-3.1 0-5.7-2.5-5.7-5.7z"
       />
     </StyledPreview>
@@ -89,43 +85,43 @@ const ThemePreview = (props: { style: StyleSessionSwitcher }) => {
 const Themes = () => {
   const themes: Array<ThemeType> = [
     {
-      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 (
-          <ThemeContainer key={theme.id} onClick={onSelectTheme}>
-            <ThemePreview style={theme.style} />
-            <SpacerLG />
-
-            <StyledTitleSettingsItem>{theme.title}</StyledTitleSettingsItem>
-            <SessionRadio
-              active={selectedTheme === theme.id}
-              label={''}
-              value={theme.id}
-              inputName={'theme-switcher'}
-            />
-          </ThemeContainer>
-        );
-      })}
+      {themes.map(theme => (
+        <ThemeContainer
+          key={theme.id}
+          onClick={() => {
+            void switchThemeTo(theme.id, dispatch);
+          }}
+        >
+          <ThemePreview style={theme.style} />
+          <SpacerLG />
+
+          <StyledTitleSettingsItem>{theme.title}</StyledTitleSettingsItem>
+          <SessionRadio
+            active={selectedTheme === theme.id}
+            label={''}
+            value={theme.id}
+            inputName={'theme-switcher'}
+          />
+        </ThemeContainer>
+      ))}
     </>
   );
 };

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);
     },

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));
   }

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,

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;

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;

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 };

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<ThemeNames, ThemeColors>;
 
@@ -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,

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;
+  }
+};

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;