✨ 暗色模式添加跟随系统

neila-a · Mar 23, 2024 · d97de3d · d97de3d
1 parent 55c98cc
commit d97de3d
Show file tree

Hide file tree

Showing 9 changed files with 171 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "verkfi",
  "version": "1.6.3",
- "devVersion": "802",
+ "devVersion": "805",
  "dev": true,
  "description": "Platform for Neila's something useless tools.",
  "private": true,

diff --git a/src/app/components/HeadBar.tsx b/src/app/components/HeadBar.tsx
@@ -33,7 +33,6 @@ import {
 } from '@mui/material/styles';
 import Link from 'next/link';
 import {
- darkMode as darkModeContext,
  forkMeOnGitHub as forkMeOnGitHubContext,
  share as shareContext,
  showSidebar

diff --git a/src/app/index/Sidebar.tsx b/src/app/index/Sidebar.tsx
@@ -75,8 +75,8 @@ export default function Sidebar(props: {
  setSortingFor
  } = props,
  [editing, setEditing] = useState<boolean>(searchText === ""),
+ [clickCount, setClickCount] = useState<number>(0),
  [list, setList] = useState<lists>(getList);
- var clickCount = 0;
  return (
  <Drawer variant="permanent" sx={{
  maxWidth: drawerWidth,
@@ -141,7 +141,7 @@ export default function Sidebar(props: {
  props.setExpand(true);
  if (clickCount === 1) {
  props.setExpand(false);
- clickCount = 0;
+ setClickCount(0);
  }
  }}>
  <Selects
@@ -160,9 +160,9 @@ export default function Sidebar(props: {
  searchTools={searchTools}
  modifyClickCount={value => {
  if (value === "++") {
- clickCount++;
+ setClickCount(old => old + 1);
  } else {
- clickCount = value as number;
+ setClickCount(value);
  }
  }}
  />

diff --git a/src/app/index/SingleTool.tsx b/src/app/index/SingleTool.tsx
@@ -37,6 +37,7 @@ import {
  windows,
  recentlyUsed as recentlyUsedContext,
  mostUsed as mostUsedContext,
+ useLightMode,
 } from '../layout/layoutClient';
 import stringToBoolean from "../setting/stringToBoolean";
 import {
@@ -49,7 +50,6 @@ import destroyer from '../components/destroyer';
 export default function SingleTool(props: {
  tool: tool;
  isFirst: boolean;
- darkMode: boolean;
  viewMode: viewMode;
  setTools: setState<tool[]>;
  editMode: boolean;
@@ -63,10 +63,11 @@ export default function SingleTool(props: {
  setTools,
  sortingFor
  } = props,
+ lightMode = useLightMode(),
  ToolIcon = tool.icon,
  subStyle = {
  sx: {
- color: props.darkMode ? "" : "#999999"
+ color: lightMode ? "" : "#999999"
  }
  },
  Router = useRouter(),

diff --git a/src/app/index/ToolsStack.tsx b/src/app/index/ToolsStack.tsx
@@ -14,7 +14,6 @@ import SingleTool from './SingleTool';
 import {
  viewMode
 } from './consts';
-import stringToBoolean from '../setting/stringToBoolean';
 import {
  setState
 } from '../declare';
@@ -23,9 +22,6 @@ import {
  Droppable,
  Draggable
 } from "@hello-pangea/dnd";
-import {
- darkMode as darkModeContext
-} from '../layout/layoutClient';
 import reorder from '../components/reorder';
 import buttonCommonSorting from './buttonCommonSorting';
 import ToolsNotFound from './ToolsNotFound';
@@ -61,7 +57,6 @@ export default function ToolsStack(props: {
  sortingFor={props.sortingFor}
  key={tool.to}
  focus={props.focus === tool.to}
- darkMode={darkMode}
  viewMode={viewMode}
  setTools={props.setTools}
  editMode={props.editMode} />
@@ -124,8 +119,6 @@ export default function ToolsStack(props: {
  </TransitionGroup>
  );
  }
- const darkModeFormStorage = useContext(darkModeContext).mode,
- darkMode = stringToBoolean(darkModeFormStorage.replace("light", "false").replace("dark", "true"));
  return (
  <Stack spacing={viewMode == "list" ? 3 : 5} sx={{
  flexDirection: viewMode === "grid" && "row",

diff --git a/src/app/layout/layoutClient.tsx b/src/app/layout/layoutClient.tsx
@@ -13,7 +13,8 @@ import {
  useState,
  useMemo,
  ReactNode,
- createElement
+ createElement,
+ useContext
 } from 'react';
 import {
  ThemeProvider,
@@ -84,9 +85,24 @@ export const paletteColors = createContext<{
  set: setState<string>;
 }>(null);
 export const darkMode = createContext<{
- mode: PaletteMode;
- set: setState<PaletteMode>;
+ mode: PaletteMode | "system";
+ set: setState<PaletteMode | "system">;
 }>(null);
+export function useLightMode() {
+ const gotContext = useContext(darkMode).mode;
+ var value: boolean = true;
+ switch (gotContext) {
+ case "dark":
+ value = false;
+ break;
+ case "system":
+ if (isBrowser()) {
+ value = !(window.matchMedia('(prefers-color-scheme: dark)').matches);
+ }
+ break;
+ }
+ return value;
+}
 export const colorMode = createContext<{
  value: stringifyCheck;
  set: setState<stringifyCheck>;
@@ -121,10 +137,46 @@ export function WindowsProvider(props: {
  );
 }
 export default function ModifiedApp(props: {
- children: ReactNode
+ children: ReactNode;
 }) {
- const [mode, setMode] = useStoragedState<PaletteMode>("darkmode", "暗色模式", "light"),
- [palette, setPalette] = useStoragedState<string>("palette", "调色板", "__none__"),
+ const [mode, setMode] = useStoragedState<PaletteMode | "system">("darkmode", "暗色模式", "system"),
+ [palette, setPalette] = useStoragedState<string>("palette", "调色板", JSON.stringify({
+ // 来自theme.tsx中palette的快照
+ "primary": {
+ "50": "#e3f2fd",
+ "100": "#bbdefb",
+ "200": "#90caf9",
+ "300": "#64b5f6",
+ "400": "#42a5f5",
+ "500": "#2196f3",
+ "600": "#1e88e5",
+ "700": "#1976d2",
+ "800": "#1565c0",
+ "900": "#0d47a1",
+ "A100": "#82b1ff",
+ "A200": "#448aff",
+ "A400": "#2979ff",
+ "A700": "#2962ff",
+ "main": "#2196f3"
+ },
+ "secondary": {
+ "50": "#fce4ec",
+ "100": "#f8bbd0",
+ "200": "#f48fb1",
+ "300": "#f06292",
+ "400": "#ec407a",
+ "500": "#e91e63",
+ "600": "#d81b60",
+ "700": "#c2185b",
+ "800": "#ad1457",
+ "900": "#880e4f",
+ "A100": "#ff80ab",
+ "A200": "#ff4081",
+ "A400": "#f50057",
+ "A700": "#c51162",
+ "main": "#f50057"
+ }
+ })),
  [recentlyUsedState, setRecentlyUsed] = useStoragedState<string>("recently-tools", "最近使用的工具", "[]"),
  [mostUsedState, setMostUsed] = useStoragedState<string>("most-tools", "最常使用的工具", "{}"),
  realPalette = useMemo(() => (palette === "__none__" ? {} : JSON.parse(palette)), [palette]),
@@ -133,7 +185,7 @@ export default function ModifiedApp(props: {
  createTheme({
  palette: {
  ...realPalette,
- mode,
+ mode: mode === "system" ? (isBrowser() ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light") : "light") : mode,
  },
  typography: {
  fontFamily: [

diff --git a/src/app/locales/zh-CN.json b/src/app/locales/zh-CN.json
@@ -66,7 +66,6 @@
  "拆分": "拆分",
  "结果：": "结果：",
  "你的浏览器不支持这个工具。": "你的浏览器不支持这个工具。",
- "暗色模式": "暗色模式",
  "确定离开Verkfi并跳转至": "确定离开Verkfi并跳转至",
  "多彩主页": "多彩主页",
  "未找到工具": "未找到工具",
@@ -217,6 +216,12 @@
  "amber": "琥珀",
  "orange": "橙色",
  "deepOrange": "深橙"
+ },
+ "colorMode": {
+ "text": "色彩模式",
+ "light": "亮色模式",
+ "dark": "暗色模式",
+ "system": "跟随系统"
  }
  },
  "menu": {

diff --git a/src/app/setting/layout.tsx b/src/app/setting/layout.tsx
@@ -133,41 +133,45 @@ export default function Settings(props: {
  <ErrorBoundary>
  {props.children}
  </ErrorBoundary>
- {extendedTools.map(item => item.settings.filter(settingItem => settingItem.page === id).map((settingItem, index) => {
- switch (settingItem.type) {
- case "boolean":
- return <FormControlLabel control={<Switch checked={settingItem.value as boolean} onChange={event => {
- const modifiedSettings = item.settings.slice(0);
- modifiedSettings[index].value = !(modifiedSettings[index].value as boolean);
- db.extendedTools.put({
- ...item,
- settings: modifiedSettings
- });
- }} />} label={settingItem.text} />;
- case "input":
- return <TextField value={settingItem.value as string} label={settingItem.text} variant="outlined" onChange={event => {
- const modifiedSettings = item.settings.slice(0);
- modifiedSettings[index].value = event.target.value;
- db.extendedTools.put({
- ...item,
- settings: modifiedSettings
- });
- }} />
- case "switch":
- return <Select value={settingItem.value as string} label={settingItem.text} onChange={event => {
- const modifiedSettings = item.settings.slice(0);
- modifiedSettings[index].value = event.target.value;
- db.extendedTools.put({
- ...item,
- settings: modifiedSettings
- });
- }}>
- {settingItem.switches.map(switching => (
- <MenuItem key={switching} value={switching}>{switching}</MenuItem>
- ))}
- </Select>;
- }
- }))}
+ <Box sx={{
+ mt: 2
+ }}>
+ {extendedTools.map(item => item.settings.filter(settingItem => settingItem.page === id).map((settingItem, index) => {
+ switch (settingItem.type) {
+ case "boolean":
+ return <FormControlLabel control={<Switch checked={settingItem.value as boolean} onChange={event => {
+ const modifiedSettings = item.settings.slice(0);
+ modifiedSettings[index].value = !(modifiedSettings[index].value as boolean);
+ db.extendedTools.put({
+ ...item,
+ settings: modifiedSettings
+ });
+ }} />} label={settingItem.text} />;
+ case "input":
+ return <TextField value={settingItem.value as string} label={settingItem.text} variant="outlined" onChange={event => {
+ const modifiedSettings = item.settings.slice(0);
+ modifiedSettings[index].value = event.target.value;
+ db.extendedTools.put({
+ ...item,
+ settings: modifiedSettings
+ });
+ }} />
+ case "switch":
+ return <Select value={settingItem.value as string} label={settingItem.text} onChange={event => {
+ const modifiedSettings = item.settings.slice(0);
+ modifiedSettings[index].value = event.target.value;
+ db.extendedTools.put({
+ ...item,
+ settings: modifiedSettings
+ });
+ }}>
+ {settingItem.switches.map(switching => (
+ <MenuItem key={switching} value={switching}>{switching}</MenuItem>
+ ))}
+ </Select>;
+ }
+ }))}
+ </Box>
  </Box>
  </>
  );