preserve dark mode setting

akasaki-is-a-rubbish · Apr 12, 2022 · 0d50879 · 0d50879
1 parent 0979e21
commit 0d50879
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,7 @@ import { activities, ActivityName, defaultActivitiy } from './activities';
 import { appTheme } from './appTheme';
 import { navContext } from './contexts';
 
+appTheme.init();
 
 function App() {
   // The Ref of (router) navigation state is created here.
@@ -33,7 +34,6 @@ function App() {
 
   // Initializing app theme
   useEffect(() => {
-    appTheme.init();
     var keydown = (e: KeyboardEvent) => {
       if (e.ctrlKey && e.key == 'd') {
         e.preventDefault();

diff --git a/src/activities/PairActivity.tsx b/src/activities/PairActivity.tsx
@@ -6,10 +6,10 @@ import Container from "@material-ui/core/Container"
 export const PairActivity = createActivity(function (props) {
     return (
         <Activity hidden={props.hidden} className={"pair"}>
-            <Container>
-                <QRCodeSVG value="https://reactjs.org/" size={300} />
-                <h2>手机端扫码绑定</h2>
-            </Container>
+            <div className="qrcode">
+                <QRCodeSVG value="https://reactjs.org/" size={300} fgColor="black" />
+            </div>
+            <h2>手机端扫码绑定</h2>
         </Activity>
     )
 });
diff --git a/src/activities/SettingsActivity.tsx b/src/activities/SettingsActivity.tsx
@@ -11,6 +11,7 @@ import { navContext } from "../contexts"
 
 export const SettingsActivity = createActivity(function (props) {
     const navState = useContext(navContext);
+    const dark = useWebfxRef(appTheme.enabledRef);
     return (
         <Activity hidden={props.hidden} className={"settings"}>
             <ThemeProvider theme={createMuiTheme({
@@ -26,7 +27,7 @@ export const SettingsActivity = createActivity(function (props) {
                 <Container>
                     <FormGroup>
                         <FormControlLabel control={
-                            <Switch size="medium" value={useWebfxRef(appTheme.enabledRef)} onChange={(e, val) => {
+                            <Switch size="medium" checked={dark} onChange={(e, val) => {
                                 appTheme.toggle(val);
                             }} />
                         } label="夜间模式" />

diff --git a/src/appTheme.ts b/src/appTheme.ts
@@ -8,12 +8,14 @@ export const appTheme = {
     enabledRef: new Ref<boolean>(),
     init() {
         this.enabledRef.value = false;
-        if (!(darkreader as any).isEnabled()) {
+        if (localStorage.getItem('drivingui-dark') == '1') {
+            this.toggle(true);
         }
     },
     toggle(enable?: boolean) {
         if (enable == this.enabledRef.value) return;
         this.enabledRef.value = !this.enabledRef.value;
+        localStorage.setItem('drivingui-dark', this.enabledRef.value ? '1' : '0');
         if (this.enabledRef.value) {
             darkreader.enable({
                 brightness: 100,