Add a compact theme switcher option (3152243d) · Commits · sc07 / Canvas · GitLab

packages/client/src/components/Header/HeaderRight.tsx

+5 −3

Original line number	Diff line number	Diff line
		@@ -39,6 +39,8 @@ export const HeaderRight = () => {
		const Dialog = useDialog();
		const { settings } = useAppContext();
		const compactButtons = settings.get["ui.compactButtons"];
		const compactThemeSwitcher =
		compactButtons \|\| settings.get["ui.compactThemeSwitcher"];
		const headerActionClass = `header-action-button${compactButtons ? " header-action-button--compact" : ""}`;
		const sidebarWidth = useSidebarWidth("Right");
		const isMobile = useIsMobile();
		@@ -223,8 +225,8 @@ export const HeaderRight = () => {
		<p className="header-button-label">Settings</p>
		</Button>
		<div className="header-lower-priority">
		{settings.get["ui.showThemeToggle"] && (
		<ThemeSwitcher compact={compactButtons} />
		{settings.get["ui.showThemeSwitcher"] && (
		<ThemeSwitcher compact={compactThemeSwitcher} />
		)}
		{hasMod && (
		<Button
		@@ -330,7 +332,7 @@ export const HeaderRight = () => {
		<Settings aria-hidden="true" size={16} />
		<p>Settings</p>
		</Button>
		{settings.get["ui.showThemeToggle"] && (
		{settings.get["ui.showThemeSwitcher"] && (
		<ThemeSwitcher
		className="justify-start"
		onPress={() => setMoreMenuOpen(false)}

packages/client/src/components/Header/ThemeSwitcher.tsx

+12 −15

Original line number	Diff line number	Diff line
		@@ -12,28 +12,21 @@ export const ThemeSwitcher = ({
		...props
		}: ButtonProps & { compact?: boolean }) => {
		const [mounted, setMounted] = useState(false);
		const { theme, setTheme } = useTheme();
		const [isToggled, setToggle] = useState(false);
		const { resolvedTheme, setTheme } = useTheme();

		useEffect(() => {
		setMounted(true);
		setToggle(theme === "dark");
		}, []);

		useEffect(() => {
		if (isToggled) {
		setTheme("dark");
		} else {
		setTheme("light");
		}
		}, [isToggled]);

		if (!mounted) return null;

		const isDarkMode = resolvedTheme === "dark";

		return (
		<Button
		{...props}
		aria-label={theme === "dark" ? "Dark theme" : "Light theme"}
		aria-label={isDarkMode ? "Dark theme" : "Light theme"}
		aria-pressed={isDarkMode}
		className={
		compact === undefined
		? className
		@@ -41,12 +34,16 @@ export const ThemeSwitcher = ({
		}
		onPress={(event) => {
		onPress?.(event);
		setToggle(!isToggled);
		setTheme(isDarkMode ? "light" : "dark");
		}}
		>
		{theme === "dark" ? <Moon aria-hidden="true" size={18} /> : <Sun aria-hidden="true" size={18} />}
		{isDarkMode ? (
		<Moon aria-hidden="true" size={18} />
		) : (
		<Sun aria-hidden="true" size={18} />
		)}
		<p className="header-button-label header-button-label--medium">
		{theme === "dark" ? "Dark" : "Light"}
		{isDarkMode ? "Dark" : "Light"}
		</p>
		</Button>
		);

packages/client/src/components/Settings/MiscSettings.tsx

+30 −8

Original line number	Diff line number	Diff line
		import { useTheme } from "next-themes";

		import { usePanel } from "@/contexts/PanelContext";

		import { useAppContext } from "../../contexts/AppContext";
		@@ -11,6 +13,7 @@ export const MiscSettings = () => {
		const { config, settings } = useAppContext();
		const Dialog = useDialog();
		const Panel = usePanel();
		const { resolvedTheme, setTheme } = useTheme();
		const isMobile = useIsMobile();
		const compactPaletteDefault = useIsCompactPaletteDefault();
		const compactPaletteSetting = settings.get["palette.compact"];
		@@ -24,6 +27,14 @@ export const MiscSettings = () => {
		<p className="text-xs text-default-600">Other settings</p>
		</header>
		<section className="flex gap-2 flex-col">
		<Switch
		isSelected={resolvedTheme === "dark"}
		onValueChange={(value) => {
		setTheme(value ? "dark" : "light");
		}}
		>
		Dark Mode
		</Switch>
		<Switch
		isSelected={settings.get["capture.cameraFlash"]}
		onValueChange={(value) => {
		@@ -86,6 +97,25 @@ export const MiscSettings = () => {
		>
		Compact Buttons
		</Switch>
		{!settings.get["ui.compactButtons"] && (
		<Switch
		className="sidebar-adaptation-setting"
		isSelected={settings.get["ui.compactThemeSwitcher"]}
		onValueChange={(value) => {
		settings.set({ key: "ui.compactThemeSwitcher", value });
		}}
		>
		Compact Theme Switcher
		</Switch>
		)}
		<Switch
		isSelected={settings.get["ui.showThemeSwitcher"]}
		onValueChange={(value) => {
		settings.set({ key: "ui.showThemeSwitcher", value });
		}}
		>
		Show Theme Switcher
		</Switch>
		{showCompactPaletteSettings && (
		<Switch
		isSelected={compactPaletteSelected}
		@@ -127,14 +157,6 @@ export const MiscSettings = () => {
		>
		Show Overlays Card
		</Switch>
		<Switch
		isSelected={settings.get["ui.showThemeToggle"]}
		onValueChange={(value) => {
		settings.set({ key: "ui.showThemeToggle", value });
		}}
		>
		Show Theme Toggle
		</Switch>
		<Button
		className="w-fit"
		onPress={() => {

packages/client/src/components/Toolbar/Palette.tsx

+1 −1

Original line number	Diff line number	Diff line
		@@ -860,7 +860,7 @@ export const Palette = () => {
		<Settings aria-hidden="true" size={16} />
		<p>Settings</p>
		</Button>
		{settings.get["ui.showThemeToggle"] && (
		{settings.get["ui.showThemeSwitcher"] && (
		<ThemeSwitcher
		className="mobile-action-sheet-item"
		onPress={() => setMobileActionSheet(null)}

packages/client/src/contexts/AppContext.tsx

+4 −2

Original line number	Diff line number	Diff line
		@@ -28,8 +28,9 @@ interface ISettings {
		"ui.adaptElementsToSidebar"(val: boolean): boolean;
		"ui.compactPaletteForSidebar"(val: boolean): boolean;
		"ui.compactButtons"(val: boolean): boolean;
		"ui.compactThemeSwitcher"(val: boolean): boolean;
		"ui.showOverlaysCard"(val: boolean): boolean;
		"ui.showThemeToggle"(val: boolean): boolean;
		"ui.showThemeSwitcher"(val: boolean): boolean;
		"template.pixelCounts"(val: boolean): boolean;
		"template.hideUnusedColors"(val: boolean): boolean;
		}
		@@ -183,8 +184,9 @@ export const AppContext = ({ children }: PropsWithChildren) => {
		"ui.adaptElementsToSidebar": true,
		"ui.compactPaletteForSidebar": true,
		"ui.compactButtons": false,
		"ui.compactThemeSwitcher": false,
		"ui.showOverlaysCard": true,
		"ui.showThemeToggle": true,
		"ui.showThemeSwitcher": true,
		"template.pixelCounts": false,
		"template.hideUnusedColors": false,
		},