diff --git a/packages/ui-services/src/Keyboard/KeyboardCommands.ts b/packages/ui-services/src/Keyboard/KeyboardCommands.ts index 76a10c3ac..bd48b28c5 100644 --- a/packages/ui-services/src/Keyboard/KeyboardCommands.ts +++ b/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') diff --git a/packages/ui-services/src/Keyboard/getKeyboardShortcuts.ts b/packages/ui-services/src/Keyboard/getKeyboardShortcuts.ts index 1ec92cda1..cd913ef59 100644 --- a/packages/ui-services/src/Keyboard/getKeyboardShortcuts.ts +++ b/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: '/', diff --git a/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx b/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx index 02dae59a0..bd6291a7b 100644 --- a/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx +++ b/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(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 ( <> diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx index fb46afce3..95f793143 100644 --- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx +++ b/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 = ({ application, item }) => { + const commandService = useCommandService() const premiumModal = usePremiumModal() const isThirdPartyTheme = useMemo( @@ -52,6 +56,12 @@ const ThemesMenuButton: FunctionComponent = ({ 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 = ({ application, item }) => { ) : ( - {item.name} + {item.name} + {darkThemeShortcut && } {item.component && canActivateTheme ? (