feat: classic-dark is now the default theme

preload.js

@@ -157,8 +157,8 @@ ipc.on('get-theme-setting', () => {
 
 window.getSettingValue = (settingID, comparisonValue = null) => {
   // Comparison value allows you to pull boolean values from any type.
-  // Eg. window.getSettingValue('theme', 'light')
+  // Eg. window.getSettingValue('theme', 'classic-dark')
-  // returns 'false' when the value is 'dark'.
+  // returns 'false' when the value is 'classic-light'.
 
   // We need to get specific settings from the main process
   if (settingID === 'media-permissions') {

stylesheets/_session_signin.scss

@@ -3,6 +3,7 @@
     width: 100%;
     height: 100%;
     background-color: var(--background-primary-color);
+    color: var(--text-primary-color);
   }
   &-content {
     &-accent {

ts/components/conversation/SessionEmojiPanel.tsx

@@ -114,15 +114,15 @@ export const SessionEmojiPanel = forwardRef<HTMLDivElement, Props>((props: Props
         setPanelBackgroundRGB(hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR7!));
         setPanelTextRGB(hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR1));
         break;
-      case 'classic-dark':
-        setPanelBackgroundRGB(hexColorToRGB(THEMES.CLASSIC_DARK.COLOR1));
-        setPanelTextRGB(hexColorToRGB(THEMES.CLASSIC_DARK.COLOR6));
-        break;
       case 'classic-light':
-      default:
         setPanelBackgroundRGB(hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR6));
         setPanelTextRGB(hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0));
         break;
+      case 'classic-dark':
+      default:
+        setPanelBackgroundRGB(hexColorToRGB(THEMES.CLASSIC_DARK.COLOR1));
+        setPanelTextRGB(hexColorToRGB(THEMES.CLASSIC_DARK.COLOR6));
+        break;
     }
   }, [theme]);
 

ts/components/registration/SessionRegistrationView.tsx

@@ -13,9 +13,9 @@ export const SessionRegistrationView = () => {
     void setSignInByLinking(false);
   }, []);
   return (
-    <div className="session-fullscreen">
+    <SessionTheme>
-      <div className="session-full-screen-flow session-fullscreen">
+      <div className="session-fullscreen">
-        <SessionTheme>
+        <div className="session-full-screen-flow session-fullscreen">
           <Flex
             className="session-content"
             alignItems="center"
@@ -31,8 +31,8 @@ export const SessionRegistrationView = () => {
               <RegistrationStages />
             </Flex>
           </Flex>
-        </SessionTheme>
+        </div>
       </div>
-    </div>
+    </SessionTheme>
   );
 };

ts/mains/main_renderer.tsx

@@ -21,6 +21,7 @@ import { OpenGroupData } from '../data/opengroups';
 import { loadKnownBlindedKeys } from '../session/apis/open_group_api/sogsv3/knownBlindedkeys';
 import nativeEmojiData from '@emoji-mart/data';
 import { initialiseEmojiData } from '../util/emoji';
+import { switchPrimaryColorTo } from '../themes/switchPrimaryColor';
 // tslint:disable: max-classes-per-file
 
 // Globally disable drag and drop
@@ -100,7 +101,7 @@ function mapOldThemeToNew(theme: string) {
     case 'android':
     case 'ios':
     case '':
-      return 'classic-light';
+      return 'classic-dark';
     default:
       return theme;
   }
@@ -130,7 +131,7 @@ Storage.onready(async () => {
     setPrimaryColorSetting: async (value: any) => {
       await Storage.put('primary-color-setting', value);
     },
-    getThemeSetting: () => Storage.get('theme-setting', 'classic-light'),
+    getThemeSetting: () => Storage.get('theme-setting', 'classic-dark'),
     setThemeSetting: async (value: any) => {
       await Storage.put('theme-setting', value);
     },
@@ -268,6 +269,8 @@ async function start() {
     await connect();
     openInbox();
   } else {
+    const primaryColor = window.Events.getPrimaryColorSetting();
+    await switchPrimaryColorTo(primaryColor);
     openStandAlone();
   }
 

ts/state/ducks/theme.tsx

@@ -9,7 +9,7 @@ export const applyTheme = (theme: ThemeStateType) => {
   };
 };
 
-export const initialThemeState: ThemeStateType = 'classic-light';
+export const initialThemeState: ThemeStateType = 'classic-dark';
 
 export const reducer = (
   state: any = initialThemeState,

ts/themes/SessionTheme.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
 import { createGlobalStyle } from 'styled-components';
-import { classicLight } from './';
+import { classicDark } from './';
 import { declareCSSVariables, THEME_GLOBALS } from './globals';
 
 // Defaults to Classic Dark theme
 export const SessionGlobalStyles = createGlobalStyle`
   html {
     ${declareCSSVariables(THEME_GLOBALS)}
-    ${declareCSSVariables(classicLight)}
+    ${declareCSSVariables(classicDark)}
   };
 `;
 

ts/themes/switchPrimaryColor.tsx

@@ -8,10 +8,7 @@ export function findPrimaryColorId(hexCode: string): PrimaryColorStateType | und
   return find(primaryColors, { color: hexCode })?.id;
 }
 
-export async function switchPrimaryColorTo(
+export async function switchPrimaryColorTo(color: PrimaryColorStateType, dispatch?: Dispatch) {
-  color: PrimaryColorStateType,
-  dispatch: Dispatch | null
-) {
   await window.Events.setPrimaryColorSetting(color);
 
   document.documentElement.style.setProperty(