From e9abe5b705a5fe8b153c40fd0a2c99e8817dadbe Mon Sep 17 00:00:00 2001 From: kahosan <15116355657l@gmail.com> Date: Tue, 16 Apr 2024 17:11:39 +0800 Subject: [PATCH 1/2] refactor: dark mode --- web/src/components/HeaderBar.js | 28 +++++++++------------- web/src/context/Theme/index.js | 36 +++++++++++++++++++++++++++++ web/src/index.js | 41 ++++++++++++++++++--------------- 3 files changed, 69 insertions(+), 36 deletions(-) create mode 100644 web/src/context/Theme/index.js diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js index a5da4df..5510d42 100644 --- a/web/src/components/HeaderBar.js +++ b/web/src/components/HeaderBar.js @@ -1,6 +1,7 @@ import React, { useContext, useEffect, useState } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { UserContext } from '../context/User'; +import { useSetTheme, useTheme } from '../context/Theme'; import { API, getLogo, getSystemName, showSuccess } from '../helpers'; import '../index.css'; @@ -34,10 +35,8 @@ const HeaderBar = () => { let navigate = useNavigate(); const [showSidebar, setShowSidebar] = useState(false); - const [dark, setDark] = useState(false); const systemName = getSystemName(); const logo = getLogo(); - var themeMode = localStorage.getItem('theme-mode'); const currentDate = new Date(); // enable fireworks on new year(1.1 and 2.9-2.24) const isNewYear = @@ -66,26 +65,19 @@ const HeaderBar = () => { }, 3000); }; + const theme = useTheme(); + const setTheme = useSetTheme(); + useEffect(() => { - if (themeMode === 'dark') { - switchMode(true); + if (theme === 'dark') { + document.body.setAttribute('theme-mode', 'dark'); } + if (isNewYear) { console.log('Happy New Year!'); } }, []); - const switchMode = (model) => { - const body = document.body; - if (!model) { - body.removeAttribute('theme-mode'); - localStorage.setItem('theme-mode', 'light'); - } else { - body.setAttribute('theme-mode', 'dark'); - localStorage.setItem('theme-mode', 'dark'); - } - setDark(model); - }; return ( <> @@ -132,9 +124,11 @@ const HeaderBar = () => { { + setTheme(checked); + }} /> {userState.user ? ( <> diff --git a/web/src/context/Theme/index.js b/web/src/context/Theme/index.js new file mode 100644 index 0000000..7654988 --- /dev/null +++ b/web/src/context/Theme/index.js @@ -0,0 +1,36 @@ +import { createContext, useCallback, useContext, useState } from 'react'; + +const ThemeContext = createContext(null); +export const useTheme = () => useContext(ThemeContext); + +const SetThemeContext = createContext(null); +export const useSetTheme = () => useContext(SetThemeContext); + +export const ThemeProvider = ({ children }) => { + const [theme, _setTheme] = useState(() => { + try { + return localStorage.getItem('theme-mode') || null; + } catch { + return null; + } + }); + + const setTheme = useCallback((input) => { + _setTheme(input ? 'dark' : 'light'); + + const body = document.body; + if (!input) { + body.removeAttribute('theme-mode'); + localStorage.setItem('theme-mode', 'light'); + } else { + body.setAttribute('theme-mode', 'dark'); + localStorage.setItem('theme-mode', 'dark'); + } + }, []); + + return ( + + {children} + + ); +}; diff --git a/web/src/index.js b/web/src/index.js index c73daef..94b2286 100644 --- a/web/src/index.js +++ b/web/src/index.js @@ -12,6 +12,7 @@ import 'react-toastify/dist/ReactToastify.css'; import { StatusProvider } from './context/Status'; import { Layout } from '@douyinfe/semi-ui'; import SiderBar from './components/SiderBar'; +import { ThemeProvider } from './context/Theme'; // initialization @@ -22,27 +23,29 @@ root.render( - - - - + -
- -
- - - - -
- + + + + +
+ +
+ + + + +
+ + + - - + From 848358d87644d56c20a4d014f6a3e1001bc363b0 Mon Sep 17 00:00:00 2001 From: kahosan <15116355657l@gmail.com> Date: Tue, 16 Apr 2024 17:12:54 +0800 Subject: [PATCH 2/2] fix: the dark mode does not work for the `OperationSetting` and `SystemSetting` panels --- web/src/components/OperationSetting.js | 39 ++++++++++++++++++++------ web/src/components/SystemSetting.js | 25 ++++++++++------- 2 files changed, 45 insertions(+), 19 deletions(-) diff --git a/web/src/components/OperationSetting.js b/web/src/components/OperationSetting.js index 14b70d7..7a112e5 100644 --- a/web/src/components/OperationSetting.js +++ b/web/src/components/OperationSetting.js @@ -8,6 +8,8 @@ import { verifyJSON, } from '../helpers'; +import { useTheme } from '../context/Theme'; + const OperationSetting = () => { let now = new Date(); let [inputs, setInputs] = useState({ @@ -77,6 +79,9 @@ const OperationSetting = () => { } }; + const theme = useTheme(); + const isDark = theme === 'dark'; + useEffect(() => { getOptions().then(); }, []); @@ -219,8 +224,10 @@ const OperationSetting = () => { return ( -
-
通用设置
+ +
+ 通用设置 +
{ 保存通用设置 -
绘图设置
+
+ 绘图设置 +
{ /> -
屏蔽词过滤设置
+
+ 屏蔽词过滤设置 +
{ 保存屏蔽词设置 -
日志设置
+
+ 日志设置 +
{ 清理历史日志 -
数据看板
+
+ 数据看板 +
{ /> -
监控设置
+
+ 监控设置 +
{ 保存监控设置 -
额度设置
+
+ 额度设置 +
{ 保存额度设置 -
倍率设置
+
+ 倍率设置 +
{ let [inputs, setInputs] = useState({ PasswordLoginEnabled: '', @@ -57,6 +59,9 @@ const SystemSetting = () => { const [showPasswordWarningModal, setShowPasswordWarningModal] = useState(false); + const theme = useTheme(); + const isDark = theme === 'dark'; + const getOptions = async () => { const res = await API.get('/api/option/'); const { success, message, data } = res.data; @@ -306,8 +311,8 @@ const SystemSetting = () => { return ( - -
通用设置
+ +
通用设置
{ 更新服务器地址 -
+
支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
@@ -385,7 +390,7 @@ const SystemSetting = () => { 更新支付设置 -
配置登录注册
+
配置登录注册
{ /> -
+
配置邮箱域名白名单 用以防止恶意用户利用临时邮箱批量注册 @@ -533,7 +538,7 @@ const SystemSetting = () => { 保存邮箱域名白名单设置 -
+
配置 SMTP 用以支持系统的邮件发送
@@ -592,7 +597,7 @@ const SystemSetting = () => { 保存 SMTP 设置 -
+
配置 GitHub OAuth App 用以支持通过 GitHub 进行登录注册， @@ -634,7 +639,7 @@ const SystemSetting = () => { 保存 GitHub OAuth 设置 -
+
配置 WeChat Server 用以支持通过微信进行登录注册， @@ -679,7 +684,7 @@ const SystemSetting = () => { 保存 WeChat Server 设置 -
配置 Telegram 登录
+
配置 Telegram 登录
{ 保存 Telegram 登录设置 -
+
配置 Turnstile 用以支持用户校验，