feat:主题跟随系统

CHANGELOG.md

@@ -2,6 +2,7 @@
 * 支持国产达梦数据库 [Issue #148](https://github.com/alibaba/Chat2DB/issues/147)
 * 支持自定义OPEN AI API_HOST [Issue #173](https://github.com/alibaba/Chat2DB/issues/173)
 * 🔥 支持自定义AI接口
+* 支持主题色跟随系统
 
 # 1.0.6
 * 修复Oracle数据库字符集问题 [Issue #205](https://github.com/alibaba/Chat2DB/issues/205) [Issue #181](https://github.com/alibaba/Chat2DB/issues/181) [Issue #182](https://github.com/alibaba/Chat2DB/issues/182)

ali-dbhub-client/src/components/AppContainer/index.tsx

@@ -80,9 +80,12 @@ export default memo<IProps>(function AppContainer({ className, children }) {
   }
 
   function settings() {
-    const theme = localStorage.getItem('theme') || ThemeType.dark;
+    let theme = localStorage.getItem('theme') || ThemeType.dark;
+    if (theme === 'followOs') {
+      theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default'
+    }
     document.documentElement.setAttribute('theme', theme);
-    localStorage.setItem('theme', theme);
+
     document.documentElement.setAttribute(
       'primary-color',
       localStorage.getItem('primary-color') || 'polar-blue',

ali-dbhub-client/src/components/Setting/index.less

@@ -6,13 +6,20 @@
 
 .backgroundList {
   display: flex;
-  margin-bottom: 20px;
+  margin: 0px 0px 20px -7px;
+
+  .themeItemBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0px 7px;
+  }
   li {
-    margin-right: 15px;
-    border-radius: 6px;
-    overflow: hidden;
+    margin-bottom: 6px;
     width: 64px;
     height: 48px;
+    overflow: hidden;
+    border-radius: 6px;
     background-size: cover;
     background-repeat: no-repeat;
     cursor: pointer;

ali-dbhub-client/src/components/Setting/index.tsx

@@ -11,6 +11,7 @@ import miscService from '@/service/misc';
 import BrandLogo from '@/components/BrandLogo';
 import themeDarkImg from '@/assets/theme-dark.webp';
 import themeDefaultImg from '@/assets/theme-default.webp';
+import themeFollowImg from '@/assets/theme-follow.webp';
 
 const { Option } = Select;
 
@@ -59,6 +60,11 @@ const backgroundList = [
     name: '亮色',
     img: themeDefaultImg
   },
+  {
+    code: 'followOs',
+    name: '跟随系统',
+    img: themeFollowImg
+  },
   // {
   //   code: 'eyeshield',
   //   name: '护眼',
@@ -113,6 +119,20 @@ export default memo<IProps>(function Setting({ className, text }) {
   const [currentMenu, setCurrentMenu] = useState(menusList[0]);
 
   useLayoutEffect(() => {
+    function change(e: any) {
+      if (e.matches) {
+        document.documentElement.setAttribute('theme', 'dark');
+        colorSchemeListeners.forEach(t => t('dark'));
+      } else {
+        document.documentElement.setAttribute('theme', 'default');
+        colorSchemeListeners.forEach(t => t('default'));
+      }
+    }
+    const themeMedia = window.matchMedia("(prefers-color-scheme: dark)");
+    themeMedia.addListener(change);
+    return () => {
+      themeMedia.removeListener(change)
+    }
   }, [])
 
   const showModal = () => {
@@ -281,11 +301,16 @@ export function BaseBody() {
   const [currentPrimaryColor, setCurrentPrimaryColor] = useState(localStorage.getItem('primary-color'));
 
   function changeTheme(item: any) {
+    let theme = item.code
+    if (theme === 'followOs') {
+      theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default'
+    }
+
     const html = document.documentElement;
-    html.setAttribute('theme', item.code);
+    html.setAttribute('theme', theme);
     localStorage.setItem('theme', item.code);
-    setCurrentTheme(item.code)
-    colorSchemeListeners.forEach(t => t(item.code));
+    setCurrentTheme(item.code);
+    colorSchemeListeners.forEach(t => t(theme));
   }
 
   const changePrimaryColor = (item: any) => {
@@ -308,7 +333,10 @@ export function BaseBody() {
     <ul className={styles.backgroundList}>
       {backgroundList.map((item) => {
         return (
-          <li key={item.code} className={classnames({ [styles.current]: currentTheme == item.code })} onClick={changeTheme.bind(null, item)} style={{ backgroundImage: `url(${item.img})` }} />
+          <div className={styles.themeItemBox}>
+            <li key={item.code} className={classnames({ [styles.current]: currentTheme == item.code })} onClick={changeTheme.bind(null, item)} style={{ backgroundImage: `url(${item.img})` }} />
+            {item.name}
+          </div>
         );
       })}
     </ul>

ali-dbhub-client/src/theme/background/dark.less

@@ -1,5 +1,5 @@
 //
-html[theme='dark'] {
+:root[theme='dark'] {
   // 背景色
   --color-bg-400: #43444b;
   --color-bg-300: #27282e;

ali-dbhub-client/src/utils/hooks.ts

@@ -38,9 +38,11 @@ export function useUpdateEffect(fn: Function, arr: any[]) {
 }
 
 export function useTheme() {
-  const [currentColorScheme, setCurrentColorScheme] = useState(
-    localStorage.getItem('theme'),
-  );
+  let theme = localStorage.getItem('theme')
+  if (theme === 'followOs') {
+    theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default'
+  }
+  const [currentColorScheme, setCurrentColorScheme] = useState(theme);
   useEffect(() => {
     addColorSchemeListener(setCurrentColorScheme);
   }, []);