Support switch theme on backend config page

3 files changed, 19 insertions, 9 deletions

diff --git a/src/store/app.ts b/src/store/app.ts
index ccdae1a..c6a455e 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -95,14 +95,15 @@ export function updateClashAPIConfig({ baseURL, secret }) {
   };
 }
 
-const bodyElement = document.body;
+const rootEl = document.querySelector('html');
+const themeColorMeta = document.querySelector('meta[name="theme-color"]');
 function setTheme(theme = 'dark') {
   if (theme === 'dark') {
-    bodyElement.classList.remove('light');
-    bodyElement.classList.add('dark');
+    rootEl.setAttribute('data-theme', 'dark');
+    themeColorMeta.setAttribute('content', '#202020');
   } else {
-    bodyElement.classList.remove('dark');
-    bodyElement.classList.add('light');
+    rootEl.setAttribute('data-theme', 'light');
+    themeColorMeta.setAttribute('content', '#eeeeee');
   }
 }
 
diff --git a/src/store/modals.ts b/src/store/modals.ts
index 3b8b488..0b27ce9 100644
--- a/src/store/modals.ts
+++ b/src/store/modals.ts
@@ -1,13 +1,15 @@
-export function openModal(modalName) {
-  return (dispatch) => {
+import { DispatchFn } from './types';
+
+export function openModal(modalName: string) {
+  return (dispatch: DispatchFn) => {
     dispatch(`openModal:${modalName}`, (s) => {
       s.modals[modalName] = true;
     });
   };
 }
 
-export function closeModal(modalName) {
-  return (dispatch) => {
+export function closeModal(modalName: string) {
+  return (dispatch: DispatchFn) => {
     dispatch(`closeModal:${modalName}`, (s) => {
       s.modals[modalName] = false;
     });
diff --git a/src/store/types.ts b/src/store/types.ts
index c358ae3..7e6a39d 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -88,6 +88,12 @@ export type StateConfigs = {
   haveFetchedConfig: boolean;
 };
 
+///// store.modals
+
+export type StateModals = {
+  apiConfig: boolean;
+};
+
 //////
 
 export type State = {
@@ -95,6 +101,7 @@ export type State = {
   configs: StateConfigs;
   proxies: StateProxies;
   logs: StateLogs;
+  modals: StateModals;
 };
 
 export type GetStateFn = () => State;