support auto system theme and modified sidebar theme logic

src/components/toast/index.tsx

@@ -1,22 +1,22 @@
-import { useSettings } from "@/store/settingStore";
 import { themeVars } from "@/theme/theme.css";
 import { rgbAlpha } from "@/utils/theme";
 import { Toaster } from "sonner";
 import styled from "styled-components";
 
+import { useTheme } from "@/theme/hooks";
 import { Iconify } from "../icon";
 
 /**
  * https://sonner.emilkowal.ski/getting-started
  */
 export default function Toast() {
-	const { themeMode } = useSettings();
+	const { mode } = useTheme();
 
 	return (
 		<ToasterStyleWrapper>
 			<Toaster
 				position="top-right"
-				theme={themeMode}
+				theme={mode}
 				toastOptions={{
 					duration: 3000,
 					style: {

src/global.css

@@ -11,3 +11,45 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+
+:root {
+  --c-bg: transparent;
+  --c-scrollbar: #aaa;
+  --c-scrollbar-hover: #777;
+}
+html {
+  background-color: var(--c-bg);
+  overflow: auto;
+}
+html.dark {
+  --c-bg: transparent;
+  --c-scrollbar: #555;
+  --c-scrollbar-hover: #888;
+}
+
+/* native scrollbar customize */
+::-webkit-scrollbar {
+  width: 7px;
+  cursor: pointer !important;
+}
+::-webkit-scrollbar:horizontal {
+  height: 7px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background: var(--c-bg);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--c-scrollbar);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--c-scrollbar-hover);
+}
+
+/* simplebar customize */
+.simplebar-scrollbar::before {
+  border-radius: 10px;
+  background: var(--c-scrollbar-hover);
+}

src/layouts/components/setting-button.tsx

@@ -8,7 +8,7 @@ import screenfull from "screenfull";
 import CyanBlur from "@/assets/images/background/cyan-blur.png";
 import RedBlur from "@/assets/images/background/red-blur.png";
 import { varHover } from "@/components/animate/variants/action";
-import { IconButton, SvgIcon } from "@/components/icon";
+import { IconButton, Iconify, SvgIcon } from "@/components/icon";
 import { useSettingActions, useSettings } from "@/store/settingStore";
 import { presetsColors } from "@/theme/tokens/color";
 
@@ -207,6 +207,16 @@ export default function SettingButton() {
 									color={themeMode === ThemeMode.Dark ? themeVars.colors.palette.primary.default : ""}
 								/>
 							</Card>
+							<Card
+								onClick={() => setThemeMode(ThemeMode.System)}
+								className="flex h-20 w-full cursor-pointer items-center justify-center"
+							>
+								<Iconify
+									icon="mingcute:computer-line"
+									size="24"
+									color={themeMode === ThemeMode.System ? themeVars.colors.palette.primary.default : ""}
+								/>
+							</Card>
 						</div>
 					</div>
 

src/layouts/dashboard/nav/nav-vertical.tsx

@@ -11,6 +11,7 @@ import { NAV_WIDTH } from "../config";
 
 import NavLogo from "./nav-logo";
 
+import { useTheme } from "@/theme/hooks";
 import { ThemeLayout, ThemeMode } from "#/enum";
 
 const { Sider } = Layout;
@@ -24,7 +25,8 @@ export default function NavVertical(props: Props) {
 	const pathname = usePathname();
 
 	const settings = useSettings();
-	const { themeLayout, themeMode, darkSidebar } = settings;
+	const { mode } = useTheme();
+	const { themeLayout, darkSidebar } = settings;
 	const { setSettings } = useSettingActions();
 
 	const routeToMenuFn = useRouteToMenuFn();
@@ -74,11 +76,10 @@ export default function NavVertical(props: Props) {
 	};
 
 	const sidebarTheme = useMemo(() => {
-		if (themeMode === ThemeMode.Dark) {
-			return darkSidebar ? "light" : "dark";
-		}
+		// sidebar should be dark when global theme is dark
+		if (mode === ThemeMode.Dark) return "dark";
 		return darkSidebar ? "dark" : "light";
-	}, [themeMode, darkSidebar]);
+	}, [mode, darkSidebar]);
 
 	return (
 		<Sider

src/pages/sys/others/calendar/index.tsx

@@ -1,6 +1,6 @@
 import Card from "@/components/card";
 import { down, useMediaQuery } from "@/hooks";
-import { useSettings } from "@/store/settingStore";
+import { useTheme } from "@/theme/hooks";
 import { faker } from "@faker-js/faker";
 import type { DateSelectArg, EventClickArg, EventInput } from "@fullcalendar/core";
 import dayGridPlugin from "@fullcalendar/daygrid";
@@ -33,7 +33,7 @@ export default function Calendar() {
 	const [eventInitValue, setEventInitValue] = useState<CalendarEventFormFieldType>(DefaultEventInitValue);
 	const [eventFormType, setEventFormType] = useState<"add" | "edit">("add");
 
-	const { themeMode } = useSettings();
+	const { mode } = useTheme();
 	const xsBreakPoint = useMediaQuery(down("xs"));
 
 	useEffect(() => {
@@ -176,7 +176,7 @@ export default function Calendar() {
 	return (
 		<Card className="h-full w-full">
 			<div className="h-full w-full">
-				<StyledCalendar $themeMode={themeMode}>
+				<StyledCalendar $themeMode={mode}>
 					<CalendarHeader
 						now={date}
 						view={view}

src/pages/sys/others/kanban/kanban-column.tsx

@@ -6,7 +6,7 @@ import { type CSSProperties, useRef, useState } from "react";
 import { useEvent } from "react-use";
 
 import { Iconify } from "@/components/icon";
-import { useSettings } from "@/store/settingStore";
+import { useTheme } from "@/theme/hooks";
 import { ThemeMode } from "#/enum";
 import KanbanTask from "./kanban-task";
 import { type Column, type Task, TaskPriority } from "./types";
@@ -33,7 +33,7 @@ export default function KanbanColumn({
 	renameColumn,
 	isDragging,
 }: Props) {
-	const { themeMode } = useSettings();
+	const { mode } = useTheme();
 	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
 
 	const style: CSSProperties = {
@@ -42,7 +42,7 @@ export default function KanbanColumn({
 		height: "100%",
 		padding: "16px",
 		borderRadius: "16px",
-		backgroundColor: themeMode === ThemeMode.Light ? "rgb(244, 246, 248)" : "rgba(145, 158, 171, 0.12)",
+		backgroundColor: mode === ThemeMode.Light ? "rgb(244, 246, 248)" : "rgba(145, 158, 171, 0.12)",
 		opacity: isDragging ? 0.5 : 1,
 	};
 

src/store/settingStore.ts

@@ -30,7 +30,7 @@ const useSettingStore = create<SettingStore>()(
 		(set) => ({
 			settings: {
 				themeColorPresets: ThemeColorPresets.Default,
-				themeMode: ThemeMode.Light,
+				themeMode: ThemeMode.System,
 				themeLayout: ThemeLayout.Vertical,
 				themeStretch: false,
 				breadCrumb: true,

src/theme/hooks/use-system-theme.ts

@@ -0,0 +1,29 @@
+import { useSyncExternalStore } from "react";
+
+import { ThemeMode } from "#/enum";
+
+export const useSystemTheme = () => {
+	const subscribe = (callback: () => void) => {
+		if (!window) return () => {};
+
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+		if (mediaQuery.addEventListener) {
+			mediaQuery.addEventListener("change", callback);
+			return () => mediaQuery.removeEventListener("change", callback);
+		}
+		// for old version browsers
+		mediaQuery.addListener(callback);
+		return () => mediaQuery.removeListener(callback);
+	};
+
+	const getSnapshot = () => {
+		if (!window) return ThemeMode.Light;
+
+		return window.matchMedia("(prefers-color-scheme: dark)").matches ? ThemeMode.Dark : ThemeMode.Light;
+	};
+
+	const getServerSnapshot = () => ThemeMode.Light;
+
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+};

src/theme/hooks/use-theme.ts

@@ -1,27 +1,35 @@
 import { useSettingActions, useSettings } from "@/store/settingStore";
+import { useMemo } from "react";
 import type { ThemeMode } from "#/enum";
 import { themeVars } from "../theme.css";
 import { baseThemeTokens } from "../tokens/base";
 import { darkColorTokens, lightColorTokens, presetsColors } from "../tokens/color";
 import { darkShadowTokens, lightShadowTokens } from "../tokens/shadow";
 import { typographyTokens } from "../tokens/typography";
+import { useSystemTheme } from "./use-system-theme";
 
 export function useTheme() {
 	const settings = useSettings();
+	const systemTheme = useSystemTheme();
 	const { setSettings } = useSettingActions();
 
-	let colorTokens = settings.themeMode === "light" ? lightColorTokens : darkColorTokens;
+	const colorTokens = useMemo(() => {
+		const tokens = settings.themeMode === "light" ? lightColorTokens : darkColorTokens;
+		return {
+			...tokens,
+			palette: {
+				...tokens.palette,
+				primary: presetsColors[settings.themeColorPresets],
+			},
+		};
+	}, [settings.themeMode, settings.themeColorPresets]);
 
-	colorTokens = {
-		...colorTokens,
-		palette: {
-			...colorTokens.palette,
-			primary: presetsColors[settings.themeColorPresets],
-		},
-	};
+	const currTheme = useMemo(() => {
+		return settings.themeMode === "system" ? systemTheme : settings.themeMode;
+	}, [settings.themeMode, systemTheme]);
 
 	return {
-		mode: settings.themeMode,
+		mode: currTheme,
 		setMode: (mode: ThemeMode) => {
 			setSettings({
 				...settings,

src/theme/theme-provider.tsx

@@ -2,6 +2,7 @@ import { useSettings } from "@/store/settingStore";
 import { hexToRgbChannel, rgbAlpha } from "@/utils/theme";
 import { useEffect } from "react";
 import { ThemeMode } from "#/enum";
+import { useTheme } from "./hooks";
 import { layoutClass } from "./layout.css";
 import { presetsColors } from "./tokens/color";
 import type { UILibraryAdapter } from "./type";
@@ -11,14 +12,15 @@ interface ThemeProviderProps {
 }
 
 export function ThemeProvider({ children, adapters = [] }: ThemeProviderProps) {
-	const { themeMode, themeColorPresets, fontFamily, fontSize } = useSettings();
+	const { themeColorPresets, fontFamily, fontSize } = useSettings();
+	const { mode } = useTheme();
 
 	// Update HTML class to support Tailwind dark mode
 	useEffect(() => {
 		const root = window.document.documentElement;
 		root.classList.remove(ThemeMode.Light, ThemeMode.Dark);
-		root.classList.add(themeMode);
-	}, [themeMode]);
+		root.classList.add(mode);
+	}, [mode]);
 
 	// Dynamically update theme color related CSS variables
 	useEffect(() => {
@@ -43,7 +45,7 @@ export function ThemeProvider({ children, adapters = [] }: ThemeProviderProps) {
 	// Wrap children with adapters
 	const wrappedWithAdapters = adapters.reduce(
 		(children, Adapter) => (
-			<Adapter key={Adapter.name} mode={themeMode}>
+			<Adapter key={Adapter.name} mode={mode}>
 				{children}
 			</Adapter>
 		),

types/enum.ts

@@ -19,6 +19,7 @@ export enum StorageEnum {
 export enum ThemeMode {
 	Light = "light",
 	Dark = "dark",
+	System = "system",
 }
 
 export enum ThemeLayout {