fix: dark mode not working in editors (#1773)

packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -58,11 +58,6 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
         }
       })
 
-    themesAsItems.unshift({
-      label: 'Dark',
-      value: 'Dark',
-    })
-
     themesAsItems.unshift({
       label: 'Default',
       value: 'Default',

packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -166,13 +166,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
     application.setPreference(PrefKey.DarkMode, false)
   }, [application, deactivateAnyNonLayerableTheme])
 
-  const toggleDarkMode = useCallback(() => {
-    if (!isDarkModeOn) {
-      deactivateAnyNonLayerableTheme()
-      application.setPreference(PrefKey.DarkMode, true)
-    }
-  }, [application, isDarkModeOn, deactivateAnyNonLayerableTheme])
-
   return (
     <div>
       {toggleableComponents.length > 0 && (
@@ -205,13 +198,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
         <RadioIndicator checked={defaultThemeOn} className="mr-2" />
         Default
       </button>
-      <button
-        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
-        onClick={toggleDarkMode}
-      >
-        <RadioIndicator checked={isDarkModeOn} className="mr-2" />
-        Dark
-      </button>
       {themes.map((theme) => (
         <ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
       ))}

packages/web/src/javascripts/Utils/SortThemes.ts

@@ -1,4 +1,7 @@
 import { ThemeItem } from '@/Components/QuickSettingsMenu/ThemeItem'
+import { FeatureIdentifier } from '@standardnotes/snjs'
+
+const isDarkModeTheme = (theme: ThemeItem) => theme.identifier === FeatureIdentifier.DarkTheme
 
 export const sortThemes = (a: ThemeItem, b: ThemeItem) => {
   const aIsLayerable = a.component?.isLayerable()
@@ -8,6 +11,8 @@ export const sortThemes = (a: ThemeItem, b: ThemeItem) => {
     return 1
   } else if (!aIsLayerable && bIsLayerable) {
     return -1
+  } else if (!isDarkModeTheme(a) && isDarkModeTheme(b)) {
+    return 1
   } else {
     return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
   }

packages/web/src/stylesheets/_dark-mode.scss

@@ -1,71 +0,0 @@
-.dark-mode {
-  --foreground-color: #eeeeee;
-  --background-color: #0f1011;
-  --highlight-color: #a464c2;
-  --border-color: #0f1011;
-
-  --sn-component-foreground-color: var(--foreground-color);
-  --sn-component-background-color: transparent;
-  --sn-component-foreground-highlight-color: var(--highlight-color);
-  --sn-component-outer-border-color: transparent;
-  --sn-component-inner-border-color: var(--foreground-color);
-
-  // StyleKit Vars
-
-  --sn-stylekit-passive-color-0: #999999;
-  --sn-stylekit-passive-color-3: #28292b;
-  --sn-stylekit-passive-color-4: #1c1d1e;
-  --sn-stylekit-passive-color-5: #1d1f20;
-
-  --sn-stylekit-shadow-color: #000000;
-
-  --sn-stylekit-info-color: var(--highlight-color);
-  --sn-stylekit-info-contrast-color: var(--foreground-color);
-
-  --sn-stylekit-neutral-color: #7c7c7c;
-  --sn-stylekit-neutral-contrast-color: #ffffff;
-
-  --sn-stylekit-success-color: #2b9612;
-  --sn-stylekit-success-contrast-color: #ffffff;
-
-  --sn-stylekit-warning-color: #f6a200;
-  --sn-stylekit-warning-contrast-color: #ffffff;
-
-  --sn-stylekit-danger-color: #f80324;
-  --sn-stylekit-danger-contrast-color: #ffffff;
-
-  --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
-  --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);
-
-  --sn-stylekit-background-color: var(--background-color);
-  --sn-stylekit-foreground-color: var(--foreground-color);
-  --sn-stylekit-border-color: #000000;
-
-  --sn-stylekit-contrast-background-color: #000000;
-  --sn-stylekit-contrast-foreground-color: #ffffff;
-  --sn-stylekit-contrast-border-color: #000000;
-
-  --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4);
-  --sn-stylekit-secondary-foreground-color: #ffffff;
-  --sn-stylekit-secondary-border-color: #000000;
-
-  --sn-stylekit-secondary-contrast-background-color: #000000;
-  --sn-stylekit-secondary-contrast-foreground-color: #ffffff;
-  --sn-stylekit-secondary-contrast-border-color: #ffffff;
-
-  --sn-stylekit-paragraph-text-color: #ffffff;
-
-  --sn-desktop-titlebar-bg-color: var(--background-color);
-  --sn-desktop-titlebar-border-color: var(--border-color);
-  --sn-desktop-titlebar-ui-color: var(--foreground-color);
-  --sn-desktop-titlebar-ui-hover-color: var(--highlight-color);
-
-  --sn-stylekit-scrollbar-track-border-color: var(--border-color);
-  --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
-
-  --sn-stylekit-menu-border: 1px solid #424242;
-
-  // Theme
-
-  --navigation-item-selected-background-color: var(--background-color);
-}

packages/web/src/stylesheets/index.css.scss

@@ -3,7 +3,6 @@
 @import '../../../styles/src/Styles/_scrollbar.scss';
 @import '../../../styles/src/Styles/utils/_animation.scss';
 @import 'theme';
-@import 'dark-mode';
 @import 'main';
 @import 'ui';
 @import 'footer';