fix:本地存储的主题色与背景色与代码不兼容时导致页面崩溃

shanhexi · shanhexi · commit 372b21e209ce · 2023-08-12T16:34:48.000+08:00
diff --git a/chat2db-client/src/hooks/useTheme.ts b/chat2db-client/src/hooks/useTheme.ts
@@ -6,13 +6,25 @@ import { ThemeType, PrimaryColorType } from '@/constants';
 import { getPrimaryColor, getTheme, setPrimaryColor, setTheme } from '@/utils/localStorage';
 
 const initialTheme = () => {
-  let backgroundColor = getTheme() || ThemeType.Dark;
+  const localStorageTheme = getTheme();
+  const localStoragePrimaryColor = getPrimaryColor();
 
-  let primaryColor = getPrimaryColor() || PrimaryColorType.Golden_Purple;
+  // 判断localStorage的theme在不在ThemeType中, 如果存在就用localStorageTheme
+  let backgroundColor = ThemeType.Light
+  if (Object.values(ThemeType).includes(localStorageTheme)) {
+    backgroundColor = localStorageTheme;
+  }
+
+  let primaryColor = PrimaryColorType.Golden_Purple
+  if (Object.values(PrimaryColorType).includes(localStoragePrimaryColor)) {
+    primaryColor = localStoragePrimaryColor;
+  }
 
   if (backgroundColor === ThemeType.FollowOs) {
     backgroundColor = getOsTheme();
   }
+  document.documentElement.setAttribute('theme', backgroundColor);
+  document.documentElement.setAttribute('primary-color', primaryColor);
   return {
     backgroundColor,
     primaryColor,
diff --git a/chat2db-client/src/layouts/index.tsx b/chat2db-client/src/layouts/index.tsx
@@ -98,7 +98,6 @@ function AppContainer() {
   // 初始化app
   function collectInitApp() {
     monitorOsTheme();
-    initTheme();
     initLang();
     setInitEnd(true);
   }
@@ -119,19 +118,6 @@ function AppContainer() {
     };
   }
 
-  // 初始化主题
-  function initTheme() {
-    let theme = getTheme();
-    if (theme === ThemeType.FollowOs) {
-      theme =
-        (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-          ? ThemeType.Dark
-          : ThemeType.Light) || ThemeType.Dark;
-    }
-    document.documentElement.setAttribute('theme', theme);
-    document.documentElement.setAttribute('primary-color', getPrimaryColor());
-  }
-
   // 初始化语言
   function initLang() {
     if (!getLang()) {
diff --git a/chat2db-client/src/utils/localStorage.ts b/chat2db-client/src/utils/localStorage.ts
@@ -10,8 +10,8 @@ export function setLang(lang: LangType) {
 }
 
 export function getTheme(): ThemeType {
-  const themeColor:any = localStorage.getItem('theme') as ThemeType
-  if(themeColor){
+  const themeColor: any = localStorage.getItem('theme') as ThemeType
+  if (themeColor) {
     return themeColor
   }
   localStorage.setItem('theme', ThemeType.Light)
@@ -25,7 +25,7 @@ export function setTheme(theme: ThemeType) {
 
 export function getPrimaryColor(): PrimaryColorType {
   const primaryColor = localStorage.getItem('primary-color') as PrimaryColorType
-  if(primaryColor){
+  if (primaryColor) {
     return primaryColor
   }
   localStorage.setItem('primary-color', PrimaryColorType.Golden_Purple)

Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,8 @@ export function setLang(lang: LangType) {`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`export function getTheme(): ThemeType {`
`13`		`- const themeColor:any = localStorage.getItem('theme') as ThemeType`
`14`		`- if(themeColor){`
	`13`	`+ const themeColor: any = localStorage.getItem('theme') as ThemeType`
	`14`	`+ if (themeColor) {`
`15`	`15`	`return themeColor`
`16`	`16`	`}`
`17`	`17`	`localStorage.setItem('theme', ThemeType.Light)`
`@@ -25,7 +25,7 @@ export function setTheme(theme: ThemeType) {`
`25`	`25`
`26`	`26`	`export function getPrimaryColor(): PrimaryColorType {`
`27`	`27`	`const primaryColor = localStorage.getItem('primary-color') as PrimaryColorType`
`28`		`- if(primaryColor){`
	`28`	`+ if (primaryColor) {`
`29`	`29`	`return primaryColor`
`30`	`30`	`}`
`31`	`31`	`localStorage.setItem('primary-color', PrimaryColorType.Golden_Purple)`