feat: Added keyboard shortcut to toggle dark theme (Ctrl/Cmd+Shift+D)

packages/ui-services/src/Keyboard/KeyboardCommands.ts

@@ -17,6 +17,7 @@ export const DELETE_NOTE_KEYBOARD_COMMAND = createKeyboardCommand('DELETE_NOTE_K
 export const TAB_COMMAND = createKeyboardCommand('PLAIN_EDITOR_INSERT_TAB_KEYBOARD_COMMAND')
 export const ESCAPE_COMMAND = createKeyboardCommand('ESCAPE_COMMAND')
 export const TOGGLE_FOCUS_MODE_COMMAND = createKeyboardCommand('TOGGLE_FOCUS_MODE_COMMAND')
+export const TOGGLE_DARK_MODE_COMMAND = createKeyboardCommand('TOGGLE_DARK_MODE_COMMAND')
 export const CHANGE_EDITOR_COMMAND = createKeyboardCommand('CHANGE_EDITOR_COMMAND')
 export const FOCUS_TAGS_INPUT_COMMAND = createKeyboardCommand('FOCUS_TAGS_INPUT_COMMAND')
 export const CREATE_NEW_TAG_COMMAND = createKeyboardCommand('CREATE_NEW_TAG_COMMAND')

packages/ui-services/src/Keyboard/getKeyboardShortcuts.ts

@@ -23,6 +23,7 @@ import {
   PIN_NOTE_COMMAND,
   SUPER_SHOW_MARKDOWN_PREVIEW,
   OPEN_PREFERENCES_COMMAND,
+  TOGGLE_DARK_MODE_COMMAND,
 } from './KeyboardCommands'
 import { KeyboardKey } from './KeyboardKey'
 import { KeyboardModifier } from './KeyboardModifier'
@@ -93,6 +94,12 @@ export function getKeyboardShortcuts(platform: Platform, _environment: Environme
       key: 'f',
       modifiers: [primaryModifier, KeyboardModifier.Shift],
     },
+    {
+      command: TOGGLE_DARK_MODE_COMMAND,
+      key: 'd',
+      modifiers: [primaryModifier, KeyboardModifier.Shift],
+      preventDefault: true,
+    },
     {
       command: CHANGE_EDITOR_COMMAND,
       key: '/',

packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx

@@ -1,7 +1,10 @@
 import { WebApplication } from '@/Application/Application'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
+import { FeatureIdentifier, SNTheme } from '@standardnotes/snjs'
+import { TOGGLE_DARK_MODE_COMMAND } from '@standardnotes/ui-services'
 import { classNames } from '@standardnotes/utils'
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
+import { useCommandService } from '../CommandProvider'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
 import QuickSettingsMenu from '../QuickSettingsMenu/QuickSettingsMenu'
@@ -16,6 +19,21 @@ type Props = {
 
 const QuickSettingsButton = ({ application, isOpen, toggleMenu, quickSettingsMenuController }: Props) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
+  const commandService = useCommandService()
+
+  useEffect(() => {
+    return commandService.addCommandHandler({
+      command: TOGGLE_DARK_MODE_COMMAND,
+      onKeyDown: () => {
+        const darkTheme = application.items
+          .getDisplayableComponents()
+          .find((theme) => theme.package_info.identifier === FeatureIdentifier.DarkTheme) as SNTheme | undefined
+        if (darkTheme) {
+          void application.mutator.toggleTheme(darkTheme)
+        }
+      },
+    })
+  }, [application, commandService])
 
   return (
     <>

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

@@ -9,6 +9,9 @@ import { isMobileScreen } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
+import { useCommandService } from '../CommandProvider'
+import { TOGGLE_DARK_MODE_COMMAND } from '@standardnotes/ui-services'
+import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 
 type Props = {
   item: ThemeItem
@@ -16,6 +19,7 @@ type Props = {
 }
 
 const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
+  const commandService = useCommandService()
   const premiumModal = usePremiumModal()
 
   const isThirdPartyTheme = useMemo(
@@ -52,6 +56,12 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
   const isMobile = application.isNativeMobileWeb() || isMobileScreen()
   const shouldHideButton = item.identifier === FeatureIdentifier.DynamicTheme && isMobile
 
+  const darkThemeShortcut = useMemo(() => {
+    if (item.identifier === FeatureIdentifier.DarkTheme) {
+      return commandService.keyboardShortcutForCommand(TOGGLE_DARK_MODE_COMMAND)
+    }
+  }, [commandService, item.identifier])
+
   if (shouldHideButton) {
     return null
   }
@@ -65,10 +75,11 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
     </MenuSwitchButtonItem>
   ) : (
     <MenuRadioButtonItem checked={Boolean(item.component?.active)} onClick={onClick}>
-      <span className={item.component?.active ? 'font-semibold' : undefined}>{item.name}</span>
+      <span className={classNames('mr-auto', item.component?.active ? 'font-semibold' : undefined)}>{item.name}</span>
+      {darkThemeShortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={darkThemeShortcut} />}
       {item.component && canActivateTheme ? (
         <div
-          className="ml-auto h-5 w-5 rounded-full"
+          className="h-5 w-5 rounded-full"
           style={{
             backgroundColor: item.component.package_info?.dock_icon?.background_color,
           }}