fix: update selector usage and theme checking code

ts/components/leftpane/ActionsPanel.tsx

@@ -62,7 +62,7 @@ const Section = (props: { type: SectionType }) => {
     if (type === SectionType.Profile) {
       dispatch(editProfileModal({}));
     } else if (type === SectionType.ColorMode) {
-      const currentTheme = String(window.Events.getThemeSetting());
+      const currentTheme = window.Events.getThemeSetting();
       const newTheme = getOppositeTheme(currentTheme);
       // We want to persist the primary color when using the color mode button
       void switchThemeTo({

ts/state/selectors/theme.ts

@@ -1,8 +1,9 @@
 import { ThemeStateType } from '../../themes/constants/colors';
 import { StateType } from '../reducer';
+import { checkDarkTheme, checkLightTheme } from '../../util/theme';
 
 export const getTheme = (state: StateType): ThemeStateType => state.theme;
 
-export const isDarkTheme = (state: StateType): boolean => state.theme.includes('dark');
+export const isDarkTheme = (state: StateType): boolean => checkDarkTheme(state.theme);
 
-export const isLightTheme = (state: StateType): boolean => state.theme.includes('light');
+export const isLightTheme = (state: StateType): boolean => checkLightTheme(state.theme);

ts/util/theme.ts

@@ -1,18 +1,21 @@
 import { ThemeStateType } from '../themes/constants/colors';
 
-export function getOppositeTheme(themeName: string): ThemeStateType {
+export const checkDarkTheme = (theme: ThemeStateType): boolean => theme.includes('dark');
-  if (themeName.includes('dark')) {
+export const checkLightTheme = (theme: ThemeStateType): boolean => theme.includes('light');
+
+export function getOppositeTheme(themeName: ThemeStateType): ThemeStateType {
+  if (checkDarkTheme(themeName)) {
     return themeName.replace('dark', 'light') as ThemeStateType;
   }
-  if (themeName.includes('light')) {
+  if (checkLightTheme(themeName)) {
     return themeName.replace('light', 'dark') as ThemeStateType;
   }
   // If neither 'dark' nor 'light' is in the theme name, return the original theme name.
   return themeName as ThemeStateType;
 }
 
-export function isThemeMismatched(themeName: string, prefersDark: boolean): boolean {
+export function isThemeMismatched(themeName: ThemeStateType, prefersDark: boolean): boolean {
-  const isLightTheme = themeName.includes('light');
+  const systemLightTheme = checkLightTheme(themeName);
-  const isDarkTheme = themeName.includes('dark');
+  const systemDarkTheme = checkDarkTheme(themeName);
-  return (prefersDark && isLightTheme) || (!prefersDark && isDarkTheme);
+  return (prefersDark && systemLightTheme) || (!prefersDark && systemDarkTheme);
 }