refactor: remove unused dark mode code (#2332)

packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts

@@ -40,7 +40,6 @@ export enum PrefKey {
   NewNoteTitleFormat = 'newNoteTitleFormat',
   CustomNoteTitleFormat = 'customNoteTitleFormat',
   UpdateSavingStatusIndicator = 'updateSavingStatusIndicator',
-  DarkMode = 'darkMode',
   DefaultEditorIdentifier = 'defaultEditorIdentifier',
   MomentsDefaultTagUuid = 'momentsDefaultTagUuid',
   ClipperDefaultTagUuid = 'clipperDefaultTagUuid',
@@ -118,7 +117,6 @@ export type PrefValue = {
   [PrefKey.EditorLineWidth]: EditorLineWidth
   [PrefKey.EditorFontSize]: EditorFontSize
   [PrefKey.UpdateSavingStatusIndicator]: boolean
-  [PrefKey.DarkMode]: boolean
   [PrefKey.DefaultEditorIdentifier]: EditorIdentifier
   [PrefKey.MomentsDefaultTagUuid]: string | undefined
   [PrefKey.ClipperDefaultTagUuid]: string | undefined

packages/ui-services/src/Theme/ThemeManager.ts

@@ -249,7 +249,6 @@ export class ThemeManager extends AbstractService {
     const setTheme = () => {
       if (themeIdentifier === DefaultThemeIdentifier) {
         toggleActiveTheme()
-        void this.application.setPreference(PrefKey.DarkMode, false)
       } else {
         const theme = themes.find((theme) => theme.package_info.identifier === themeIdentifier)
         if (theme && !theme.active) {
@@ -345,8 +344,6 @@ export class ThemeManager extends AbstractService {
       }
     }
     document.getElementsByTagName('head')[0].appendChild(link)
-
-    void this.application.setPreference(PrefKey.DarkMode, false)
   }
 
   private getBackgroundColor() {

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

@@ -22,7 +22,6 @@ import FileDragNDropProvider from '../FileDragNDropProvider'
 import ResponsivePaneProvider from '../Panes/ResponsivePaneProvider'
 import AndroidBackHandlerProvider from '@/NativeMobileWeb/useAndroidBackHandler'
 import ConfirmDeleteAccountContainer from '@/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal'
-import DarkModeHandler from '../DarkModeHandler/DarkModeHandler'
 import ApplicationProvider from '../ApplicationProvider'
 import CommandProvider from '../CommandProvider'
 import PanesSystemComponent from '../Panes/PanesSystemComponent'
@@ -216,7 +215,6 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
     <ApplicationProvider application={application}>
       <CommandProvider service={application.keyboardService}>
         <AndroidBackHandlerProvider application={application}>
-          <DarkModeHandler application={application} />
           <ResponsivePaneProvider paneController={application.getViewControllerManager().paneController}>
             <PremiumModalProvider
               application={application}

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

@@ -1,26 +0,0 @@
-import { WebApplication } from '@/Application/WebApplication'
-import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'
-import { useEffect } from 'react'
-
-type Props = {
-  application: WebApplication
-}
-
-const DarkModeHandler = ({ application }: Props) => {
-  useEffect(() => {
-    application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
-      const isDarkModeOn = application.getPreference(PrefKey.DarkMode, PrefDefaults[PrefKey.DarkMode])
-
-      if (isDarkModeOn) {
-        document.documentElement.classList.add('dark-mode')
-      } else {
-        document.documentElement.classList.remove('dark-mode')
-      }
-    })
-  }, [application])
-
-  return null
-}
-
-export default DarkModeHandler

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

@@ -1,13 +1,5 @@
 import { WebApplication } from '@/Application/WebApplication'
-import {
+import { ComponentArea, ContentType, FeatureIdentifier, GetFeatures, SNComponent } from '@standardnotes/snjs'
-  ApplicationEvent,
-  ComponentArea,
-  ContentType,
-  FeatureIdentifier,
-  GetFeatures,
-  PrefKey,
-  SNComponent,
-} from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
@@ -18,7 +10,6 @@ import { sortThemes } from '@/Utils/SortThemes'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import PanelSettingsSection from './PanelSettingsSection'
-import { PrefDefaults } from '@/Constants/PrefDefaults'
 import Menu from '../Menu/Menu'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
@@ -34,24 +25,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
   const [themes, setThemes] = useState<ThemeItem[]>([])
   const [toggleableComponents, setToggleableComponents] = useState<SNComponent[]>([])
 
-  const [isDarkModeOn, setDarkModeOn] = useState(() =>
+  const defaultThemeOn = !themes.map((item) => item?.component).find((theme) => theme?.active && !theme.isLayerable())
-    application.getPreference(PrefKey.DarkMode, PrefDefaults[PrefKey.DarkMode]),
-  )
-  const defaultThemeOn =
-    !themes.map((item) => item?.component).find((theme) => theme?.active && !theme.isLayerable()) && !isDarkModeOn
-
-  useEffect(() => {
-    const removeObserver = application.addEventObserver(async (event) => {
-      if (event !== ApplicationEvent.PreferencesChanged) {
-        return
-      }
-
-      const isDarkModeOn = application.getPreference(PrefKey.DarkMode, PrefDefaults[PrefKey.DarkMode])
-      setDarkModeOn(isDarkModeOn)
-    })
-
-    return removeObserver
-  }, [application])
 
   const prefsButtonRef = useRef<HTMLButtonElement>(null)
   const defaultThemeButtonRef = useRef<HTMLButtonElement>(null)
@@ -145,8 +119,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
 
   const toggleDefaultTheme = useCallback(() => {
     deactivateAnyNonLayerableTheme()
-    void application.setPreference(PrefKey.DarkMode, false)
+  }, [deactivateAnyNonLayerableTheme])
-  }, [application, deactivateAnyNonLayerableTheme])
 
   return (
     <Menu a11yLabel="Quick settings menu" isOpen>

packages/web/src/javascripts/Constants/PrefDefaults.ts

@@ -36,6 +36,5 @@ export const PrefDefaults = {
   [PrefKey.NewNoteTitleFormat]: NewNoteTitleFormat.CurrentDateAndTime,
   [PrefKey.CustomNoteTitleFormat]: 'YYYY-MM-DD [at] hh:mm A',
   [PrefKey.UpdateSavingStatusIndicator]: true,
-  [PrefKey.DarkMode]: false,
   [PrefKey.PaneGesturesEnabled]: true,
 } as const