fix: refactor and move various functions

_locales/en/messages.json

@@ -222,7 +222,7 @@
   "noteToSelf": "Note to Self",
   "hideMenuBarTitle": "Hide Menu Bar",
   "hideMenuBarDescription": "Toggle system menu bar visibility.",
-  "matchThemeSystemSettingTitle": "Auto night-mode",
+  "matchThemeSystemSettingTitle": "Auto dark-mode",
   "matchThemeSystemSettingDescription": "Match system settings",
   "startConversation": "Start New Conversation",
   "invalidNumberError": "Please check the Session ID or ONS name and try again",

ts/components/leftpane/ActionsPanel.tsx

@@ -43,8 +43,8 @@ import {
   getFreshSwarmFor,
 } from '../../session/apis/snode_api/snodePool';
 import { isDarkTheme } from '../../state/selectors/theme';
-import { getOppositeTheme, checkThemeCongruency } from '../../themes/SessionTheme';
+import { ensureThemeConsistency } from '../../themes/SessionTheme';
-import { ThemeStateType } from '../../themes/constants/colors';
+import { getOppositeTheme } from '../../util/theme';
 import { switchThemeTo } from '../../themes/switchTheme';
 import { ConfigurationSync } from '../../session/utils/job_runners/jobs/ConfigurationSyncJob';
 
@@ -63,7 +63,7 @@ const Section = (props: { type: SectionType }) => {
       dispatch(editProfileModal({}));
     } else if (type === SectionType.ColorMode) {
       const currentTheme = String(window.Events.getThemeSetting());
-      const newTheme = getOppositeTheme(currentTheme) as ThemeStateType;
+      const newTheme = getOppositeTheme(currentTheme);
       // We want to persist the primary color when using the color mode button
       void switchThemeTo({
         theme: newTheme,
@@ -157,9 +157,10 @@ const setupTheme = async () => {
   };
 
   if (shouldFollowSystemTheme) {
-    const themeIsCongruent = await checkThemeCongruency();
+    // Check if system theme matches currently set theme, if not switch it and return true, if matching return false
-    // Only set theme if it matches with native theme, otherwise handled by checkThemeCongruency()
+    const wasThemeSwitched = await ensureThemeConsistency();
-    if (!themeIsCongruent) {
+    if (!wasThemeSwitched) {
+      // if theme wasn't switched them set theme to default
       await switchThemeTo(themeConfig);
     }
     return;

ts/components/settings/section/CategoryAppearance.tsx

@@ -4,7 +4,7 @@ import useUpdate from 'react-use/lib/useUpdate';
 import { SettingsKey } from '../../../data/settings-key';
 import { isHideMenuBarSupported } from '../../../types/Settings';
 import { useHasFollowSystemThemeEnabled } from '../../../state/selectors/settings';
-import { checkThemeCongruency } from '../../../themes/SessionTheme';
+import { ensureThemeConsistency } from '../../../themes/SessionTheme';
 import { SessionToggleWithDescription } from '../SessionSettingListItem';
 import { SettingsThemeSwitcher } from '../SettingsThemeSwitcher';
 import { ZoomingSessionSlider } from '../ZoomingSessionSlider';
@@ -35,16 +35,18 @@ export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null
           />
         )}
         <SessionToggleWithDescription
-          onClickToggle={() => {
+          // eslint-disable-next-line @typescript-eslint/no-misused-promises
+          onClickToggle={async () => {
             const toggledValue = !isFollowSystemThemeEnabled;
-            void window.setSettingValue(SettingsKey.hasFollowSystemThemeEnabled, toggledValue);
+            await window.setSettingValue(SettingsKey.hasFollowSystemThemeEnabled, toggledValue);
             if (!isFollowSystemThemeEnabled) {
-              void checkThemeCongruency();
+              await ensureThemeConsistency();
             }
           }}
           title={window.i18n('matchThemeSystemSettingTitle')}
           description={window.i18n('matchThemeSystemSettingDescription')}
           active={isFollowSystemThemeEnabled}
+          dataTestId="enable-follow-system-theme"
         />
       </>
     );

ts/mains/main_renderer.tsx

@@ -27,9 +27,8 @@ import { switchPrimaryColorTo } from '../themes/switchPrimaryColor';
 import { LibSessionUtil } from '../session/utils/libsession/libsession_utils';
 import { runners } from '../session/utils/job_runners/JobRunner';
 import { SettingsKey } from '../data/settings-key';
-import { getOppositeTheme } from '../themes/SessionTheme';
+import { getOppositeTheme, isThemeMismatched } from '../util/theme';
 import { switchThemeTo } from '../themes/switchTheme';
-import { ThemeStateType } from '../themes/constants/colors';
 
 // Globally disable drag and drop
 document.body.addEventListener(
@@ -118,11 +117,8 @@ ipcRenderer.on('native-theme-update', (__unused, shouldUseDarkColors) => {
 
   if (shouldFollowSystemTheme) {
     const theme = window.Events.getThemeSetting();
-    if (
+    if (isThemeMismatched(theme, shouldUseDarkColors)) {
-      (shouldUseDarkColors && theme.includes('light')) ||
+      const newTheme = getOppositeTheme(theme);
-      (!shouldUseDarkColors && theme.includes('dark'))
-    ) {
-      const newTheme = getOppositeTheme(theme) as ThemeStateType;
       void switchThemeTo({
         theme: newTheme,
         mainWindow: true,

ts/themes/SessionTheme.tsx

@@ -2,8 +2,8 @@ import { ipcRenderer } from 'electron';
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 import { switchThemeTo } from './switchTheme';
-import { ThemeStateType } from './constants/colors';
 import { classicDark } from './classicDark';
+import { getOppositeTheme, isThemeMismatched } from '../util/theme';
 import { declareCSSVariables, THEME_GLOBALS } from './globals';
 
 // Defaults to Classic Dark theme
@@ -21,28 +21,15 @@ export const SessionTheme = ({ children }: { children: any }) => (
   </>
 );
 
-export function getOppositeTheme(themeName: string) {
+export async function ensureThemeConsistency(): Promise<boolean> {
-  if (themeName.includes('dark')) {
-    return themeName.replace('dark', 'light');
-  }
-  if (themeName.includes('light')) {
-    return themeName.replace('light', 'dark');
-  }
-  // If neither 'dark' nor 'light' is in the theme name, return the original theme name.
-  return themeName;
-}
-
-export async function checkThemeCongruency(): Promise<boolean> {
   const theme = window.Events.getThemeSetting();
 
   return new Promise(resolve => {
     ipcRenderer.send('get-native-theme');
     ipcRenderer.once('send-native-theme', (_, shouldUseDarkColors) => {
-      const isMismatchedTheme =
+      const isMismatchedTheme = isThemeMismatched(theme, shouldUseDarkColors);
-        (shouldUseDarkColors && theme.includes('light')) ||
-        (!shouldUseDarkColors && theme.includes('dark'));
       if (isMismatchedTheme) {
-        const newTheme = getOppositeTheme(theme) as ThemeStateType;
+        const newTheme = getOppositeTheme(theme);
         void switchThemeTo({
           theme: newTheme,
           mainWindow: true,