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

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,
           }}