smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add system mode to the theme selector (#7853)

Browse source 
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Arnost Pleskot 2024-04-08 16:46:24 +02:00 • committed by GitHub
parent 92bc08207c
commit cd50aa719f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 301 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

64
packages/excalidraw/components/main-menu/DefaultItems.tsx
View file

@ -8,6 +8,7 @@ import {
} from "../App";
import {
boltIcon,
DeviceDesktopIcon,
ExportIcon,
ExportImageIcon,
HelpIcon,
@ -35,6 +36,9 @@ import { jotaiScope } from "../../jotai";
import { useUIAppState } from "../../context/ui-appState";
import { openConfirmModal } from "../OverwriteConfirm/OverwriteConfirmState";
import Trans from "../Trans";
import DropdownMenuItemContentRadio from "../dropdownMenu/DropdownMenuItemContentRadio";
import { THEME } from "../../constants";
import type { Theme } from "../../element/types";
import "./DefaultItems.scss";
@ -181,32 +185,80 @@ export const ClearCanvas = () => {
};
ClearCanvas.displayName = "ClearCanvas";
export const ToggleTheme = () => {
export const ToggleTheme = (
props:
| {
allowSystemTheme: true;
theme: Theme | "system";
onSelect: (theme: Theme | "system") => void;
}
| {
allowSystemTheme?: false;
onSelect?: (theme: Theme) => void;
},
) => {
const { t } = useI18n();
const appState = useUIAppState();
const actionManager = useExcalidrawActionManager();
const shortcut = getShortcutFromShortcutName("toggleTheme");
if (!actionManager.isActionEnabled(actionToggleTheme)) {
return null;
}
if (props?.allowSystemTheme) {
return (
<DropdownMenuItemContentRadio
name="theme"
value={props.theme}
onChange={(value: Theme | "system") => props.onSelect(value)}
choices={[
{
value: THEME.LIGHT,
label: SunIcon,
ariaLabel: `${t("buttons.lightMode")} - ${shortcut}`,
},
{
value: THEME.DARK,
label: MoonIcon,
ariaLabel: `${t("buttons.darkMode")} - ${shortcut}`,
},
{
value: "system",
label: DeviceDesktopIcon,
ariaLabel: t("buttons.systemMode"),
},
]}
>
{t("labels.theme")}
</DropdownMenuItemContentRadio>
);
}
return (
<DropdownMenuItem
onSelect={(event) => {
// do not close the menu when changing theme
event.preventDefault();
return actionManager.executeAction(actionToggleTheme);
if (props?.onSelect) {
props.onSelect(
appState.theme === THEME.DARK ? THEME.LIGHT : THEME.DARK,
);
} else {
return actionManager.executeAction(actionToggleTheme);
}
}}
icon={appState.theme === "dark" ? SunIcon : MoonIcon}
icon={appState.theme === THEME.DARK ? SunIcon : MoonIcon}
data-testid="toggle-dark-mode"
shortcut={getShortcutFromShortcutName("toggleTheme")}
shortcut={shortcut}
aria-label={
appState.theme === "dark"
appState.theme === THEME.DARK
? t("buttons.lightMode")
: t("buttons.darkMode")
}
>
{appState.theme === "dark"
{appState.theme === THEME.DARK
? t("buttons.lightMode")
: t("buttons.darkMode")}
</DropdownMenuItem>