fix: repair global styling after styled upgrade improved match system setting

set each value on root instead of declaring one global css string. Use setThemeValues in all cases

ts/components/leftpane/ActionsPanel.tsx

@@ -44,7 +44,6 @@ import {
 } from '../../session/apis/snode_api/snodePool';
 import { ConfigurationSync } from '../../session/utils/job_runners/jobs/ConfigurationSyncJob';
 import { isDarkTheme } from '../../state/selectors/theme';
-import { ensureThemeConsistency } from '../../themes/SessionTheme';
 import { switchThemeTo } from '../../themes/switchTheme';
 import { ReleasedFeatures } from '../../util/releaseFeature';
 import { getOppositeTheme } from '../../util/theme';
@@ -149,29 +148,6 @@ const cleanUpMediasInterval = DURATION.MINUTES * 60;
 // * if there is a version on the fileserver more recent than our current, we fetch github to get the UpdateInfos and trigger an update as usual (asking user via dialog)
 const fetchReleaseFromFileServerInterval = 1000 * 60; // try to fetch the latest release from the fileserver every minute
 
-const setupTheme = async () => {
-  const shouldFollowSystemTheme = window.getSettingValue(SettingsKey.hasFollowSystemThemeEnabled);
-  const theme = window.Events.getThemeSetting();
-  const themeConfig = {
-    theme,
-    mainWindow: true,
-    usePrimaryColor: true,
-    dispatch: window?.inboxStore?.dispatch || undefined,
-  };
-
-  if (shouldFollowSystemTheme) {
-    // Check if system theme matches currently set theme, if not switch it and return true, if matching return false
-    const wasThemeSwitched = await ensureThemeConsistency();
-    if (!wasThemeSwitched) {
-      // if theme wasn't switched them set theme to default
-      await switchThemeTo(themeConfig);
-    }
-    return;
-  }
-
-  await switchThemeTo(themeConfig);
-};
-
 // Do this only if we created a new account id, or if we already received the initial configuration message
 const triggerSyncIfNeeded = async () => {
   const us = UserUtils.getOurPubKeyStrFromCache();
@@ -199,7 +175,6 @@ const triggerAvatarReUploadIfNeeded = async () => {
  * This function is called only once: on app startup with a logged in user
  */
 const doAppStartUp = async () => {
-  void setupTheme();
   // this generates the key to encrypt attachments locally
   await Data.generateAttachmentKeyIfEmpty();
 

ts/themes/SessionTheme.tsx

@@ -1,27 +1,12 @@
 import { ipcRenderer } from 'electron';
 
 import { ReactNode } from 'react';
-import { createGlobalStyle } from 'styled-components';
+import useMount from 'react-use/lib/useMount';
+import { SettingsKey } from '../data/settings-key';
 import { getOppositeTheme, isThemeMismatched } from '../util/theme';
-import { classicDark } from './classicDark';
-import { THEME_GLOBALS, declareCSSVariables } from './globals';
+import { THEME_GLOBALS, setThemeValues } from './globals';
 import { switchThemeTo } from './switchTheme';
 
-// Defaults to Classic Dark theme
-const SessionGlobalStyles = createGlobalStyle`
-  html {
-    ${declareCSSVariables(THEME_GLOBALS)}
-    ${declareCSSVariables(classicDark)}
-  };
-`;
-
-export const SessionTheme = ({ children }: { children: ReactNode }) => (
-  <>
-    <SessionGlobalStyles />
-    {children}
-  </>
-);
-
 export async function ensureThemeConsistency(): Promise<boolean> {
   const theme = window.Events.getThemeSetting();
 
@@ -44,3 +29,33 @@ export async function ensureThemeConsistency(): Promise<boolean> {
     });
   });
 }
+
+const setupTheme = async () => {
+  const shouldFollowSystemTheme = window.getSettingValue(SettingsKey.hasFollowSystemThemeEnabled);
+  const theme = window.Events.getThemeSetting();
+  const themeConfig = {
+    theme,
+    mainWindow: true,
+    usePrimaryColor: true,
+    dispatch: window?.inboxStore?.dispatch || undefined,
+  };
+
+  if (shouldFollowSystemTheme) {
+    // Check if system theme matches currently set theme, if not switch it and return true, if matching return false
+    const wasThemeSwitched = await ensureThemeConsistency();
+    if (!wasThemeSwitched) {
+      // if theme wasn't switched them set theme to default
+      await switchThemeTo(themeConfig);
+    }
+  } else {
+    await switchThemeTo(themeConfig);
+  }
+};
+
+export const SessionTheme = ({ children }: { children: ReactNode }) => {
+  useMount(() => {
+    setThemeValues(THEME_GLOBALS);
+    void setupTheme();
+  });
+  return children;
+};

ts/themes/globals.tsx

@@ -179,18 +179,15 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--right-panel-duration': setDuration('0.3s'),
 };
 
-// These should only be needed for the global style (at root).
-export function declareCSSVariables(variables: Record<string, string>) {
-  let output = '';
-  // eslint-disable-next-line no-restricted-syntax
-  for (const [key, value] of Object.entries(variables)) {
-    output += `${key}: ${value};\n`;
-  }
-
-  return output;
-}
-
 type ThemeKeys = ThemeGlobals & ThemeColorVariables;
+
 export function getThemeValue(key: keyof ThemeKeys) {
   return getComputedStyle(document.documentElement).getPropertyValue(key);
 }
+
+export function setThemeValues(variables: ThemeGlobals | ThemeColorVariables) {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const [key, value] of Object.entries(variables)) {
+    document.documentElement.style.setProperty(key, value);
+  }
+}

ts/themes/switchTheme.tsx

@@ -1,8 +1,8 @@
 import { Dispatch } from '@reduxjs/toolkit';
-import { applyTheme } from '../state/ducks/theme';
 import { classicDark, classicLight, oceanDark, oceanLight } from '.';
-import { convertThemeStateToName, THEMES, ThemeStateType } from './constants/colors';
-import { loadThemeColors } from './variableColors';
+import { applyTheme } from '../state/ducks/theme';
+import { THEMES, ThemeStateType, convertThemeStateToName } from './constants/colors';
+import { setThemeValues } from './globals';
 import { findPrimaryColorId, switchPrimaryColorTo } from './switchPrimaryColor';
 
 type SwitchThemeProps = {
@@ -18,19 +18,19 @@ export async function switchThemeTo(props: SwitchThemeProps) {
 
   switch (theme) {
     case 'classic-dark':
-      loadThemeColors(classicDark);
+      setThemeValues(classicDark);
       newTheme = 'classic-dark';
       break;
     case 'classic-light':
-      loadThemeColors(classicLight);
+      setThemeValues(classicLight);
       newTheme = 'classic-light';
       break;
     case 'ocean-dark':
-      loadThemeColors(oceanDark);
+      setThemeValues(oceanDark);
       newTheme = 'ocean-dark';
       break;
     case 'ocean-light':
-      loadThemeColors(oceanLight);
+      setThemeValues(oceanLight);
       newTheme = 'ocean-light';
       break;
     default:

ts/themes/variableColors.tsx

@@ -205,10 +205,3 @@ export type ThemeColorVariables = {
   '--file-dropzone-background-color': string;
   '--file-dropzone-border-color': string;
 };
-
-export function loadThemeColors(variables: ThemeColorVariables) {
-  // eslint-disable-next-line no-restricted-syntax
-  for (const [key, value] of Object.entries(variables)) {
-    document.documentElement.style.setProperty(key, value);
-  }
-}