feat: 支持深色模式跟随系统

#23
pot-app · Mar 20, 2023 · 46e68d8 · 46e68d8
1 parent 497110c
commit 46e68d8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/windows/config/App.jsx b/src/windows/config/App.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import axios from 'axios';
 import { get, set, writeConfig } from '../../global/config'
-import { Button, TextField, Select, MenuItem } from '@mui/material'
+import { Button, TextField, Select, MenuItem, useMediaQuery } from '@mui/material'
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { notification, app } from '@tauri-apps/api'
@@ -20,9 +20,9 @@ export default function App() {
   const [shortcutPersistent, setShortcutPersistent] = useState(get('shortcut_persistent', 'CommandOrControl+Shift+D'));
   const [targetLanguage, setTargetLanguage] = useState(get('target_language', 'zh-cn'));
   const [_interface, setInterface] = useState(get('interface', 'youdao_free'));
-  const [theme, setTheme] = useState(get('theme', 'light'));
+  const [theme, setTheme] = useState(get('theme', 'auto'));
   const [interfaceConfigs, setInterfaceConfigs] = useState([]);
-
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   useEffect(() => {
     let interface_configs = [];
     Object.keys(interfaces).map(
@@ -99,7 +99,7 @@ export default function App() {
     )
   }
   return (
-    <ThemeProvider theme={theme == 'light' ? light : dark}>
+    <ThemeProvider theme={theme == 'auto' ? (prefersDarkMode ? dark : light) : (theme == 'dark' ? dark : light)}>
       <CssBaseline />
       <div className='content'>
         <ConfigList label="快捷键">
@@ -153,6 +153,7 @@ export default function App() {
               value={theme}
               onChange={(e) => setTheme(e.target.value)}
             >
+              <MenuItem value='auto'>跟随系统</MenuItem>
               <MenuItem value='light'>明亮</MenuItem>
               <MenuItem value='dark'>黑暗</MenuItem>
             </Select>

diff --git a/src/windows/translator/App.jsx b/src/windows/translator/App.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ThemeProvider } from '@mui/material/styles';
+import { useMediaQuery } from '@mui/material'
 import CssBaseline from '@mui/material/CssBaseline';
 import TopBar from './components/TopBar';
 import SourceArea from './components/SourceArea';
@@ -9,9 +10,10 @@ import { get } from '../../global/config';
 import { light, dark } from '../themes';
 
 export default function App() {
-  const [theme, setTheme] = useState(get('theme', 'light'));
+  const [theme, setTheme] = useState(get('theme', 'auto'));
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   return (
-    <ThemeProvider theme={theme == 'light' ? light : dark}>
+    <ThemeProvider theme={theme == 'auto' ? (prefersDarkMode ? dark : light) : (theme == 'dark' ? dark : light)}>
       <CssBaseline />
       <TopBar />
       <SourceArea />