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
   }