Theme switch support (#3568)

### What problem does this PR solve?
- [x] New Feature (non-breaking change which adds functionality)

---------

Co-authored-by: Yingfeng <yingfeng.zhang@gmail.com>
Co-authored-by: Jin Hai <haijin.chn@gmail.com>

web/src/layouts/components/header/index.less

@@ -48,6 +48,66 @@
       color: white;
     }
   }
+  :global(.ant-radio-button-wrapper-checked.dark) {
+    border-radius: 0px !important;
+    & a {
+      color: white;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked.dark.first) {
+    border-top-left-radius: 6px !important;
+    border-bottom-left-radius: 6px !important;
+    & a {
+      color: white;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked.dark.last) {
+    border-top-right-radius: 6px !important;
+    border-bottom-right-radius: 6px !important;
+    & a {
+      color: white;
+    }
+  }
+}
+
+.radioGroupDark {
+  & label {
+    height: 40px;
+    line-height: 40px;
+    border: 0 !important;
+    background-color: rgba(249, 249, 249, 0.25);
+    font-weight: @fontWeight700;
+    color: rgba(29, 25, 41, 1);
+    &::before {
+      display: none !important;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked) {
+    border-radius: 6px !important;
+    & a {
+      color: white;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked.dark) {
+    border-radius: 0px !important;
+    & a {
+      color: white;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked.dark.first) {
+    border-top-left-radius: 6px !important;
+    border-bottom-left-radius: 6px !important;
+    & a {
+      color: white;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked.dark.last) {
+    border-top-right-radius: 6px !important;
+    border-bottom-right-radius: 6px !important;
+    & a {
+      color: white;
+    }
+  }
 }
 
 .ant-radio-button-wrapper-checked {
@@ -55,6 +115,6 @@
 }
 .radioButtonIcon {
   vertical-align: middle;
-  max-width: 16px;
-  max-height: 16px;
+  max-width: 15px;
+  max-height: 15px;
 }

web/src/layouts/components/header/index.tsx

@@ -10,6 +10,7 @@ import { MouseEventHandler, useCallback, useMemo } from 'react';
 import { useLocation } from 'umi';
 import Toolbar from '../right-toolbar';
 
+import { useTheme } from '@/components/theme-provider';
 import styles from './index.less';
 
 const { Header } = Layout;
@@ -22,7 +23,7 @@ const RagHeader = () => {
   const { pathname } = useLocation();
   const { t } = useTranslate('header');
   const appConf = useFetchAppConf();
-
+  const { theme: themeRag } = useTheme();
   const tagsData = useMemo(
     () => [
       { path: '/knowledge', name: t('knowledgeBase'), icon: KnowledgeBaseIcon },
@@ -78,11 +79,17 @@ const RagHeader = () => {
         <Radio.Group
           defaultValue="a"
           buttonStyle="solid"
-          className={styles.radioGroup}
+          className={
+            themeRag === 'dark' ? styles.radioGroupDark : styles.radioGroup
+          }
           value={currentPath}
         >
-          {tagsData.map((item) => (
-            <Radio.Button value={item.name} key={item.name}>
+          {tagsData.map((item, index) => (
+            <Radio.Button
+              className={`${themeRag === 'dark' ? 'dark' : 'light'} ${index === 0 ? 'first' : ''} ${index === tagsData.length - 1 ? 'last' : ''}`}
+              value={item.name}
+              key={item.name}
+            >
               <a href={item.path}>
                 <Flex
                   align="center"

web/src/layouts/components/right-toolbar/index.less

@@ -11,9 +11,13 @@
   text-align: center;
   height: 32px;
   border-radius: 50%;
-  background-color: rgba(242, 243, 245, 1);
+  background-color: rgba(242, 243, 245, 0.4);
   vertical-align: middle;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .language {

web/src/layouts/components/right-toolbar/index.tsx

@@ -5,9 +5,11 @@ import camelCase from 'lodash/camelCase';
 import React from 'react';
 import User from '../user';
 
+import { useTheme } from '@/components/theme-provider';
 import { LanguageList, LanguageMap } from '@/constants/common';
 import { useChangeLanguage } from '@/hooks/logic-hooks';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
+import { MoonIcon, SunIcon } from 'lucide-react';
 import styled from './index.less';
 
 const Circle = ({ children, ...restProps }: React.PropsWithChildren) => {
@@ -25,6 +27,8 @@ const handleGithubCLick = () => {
 const RightToolBar = () => {
   const { t } = useTranslate('common');
   const changeLanguage = useChangeLanguage();
+  const { setTheme, theme } = useTheme();
+
   const {
     data: { language = 'English' },
   } = useFetchUserInfo();
@@ -40,6 +44,13 @@ const RightToolBar = () => {
     return [...pre!, { type: 'divider' }, cur];
   }, []);
 
+  const onMoonClick = React.useCallback(() => {
+    setTheme('light');
+  }, [setTheme]);
+  const onSunClick = React.useCallback(() => {
+    setTheme('dark');
+  }, [setTheme]);
+
   return (
     <div className={styled.toolbarWrapper}>
       <Space wrap size={16}>
@@ -52,9 +63,13 @@ const RightToolBar = () => {
         <Circle>
           <GithubOutlined onClick={handleGithubCLick} />
         </Circle>
-        {/* <Circle>
-          <MonIcon />
-        </Circle> */}
+        <Circle>
+          {theme === 'dark' ? (
+            <MoonIcon onClick={onMoonClick} size={20} />
+          ) : (
+            <SunIcon onClick={onSunClick} size={20} />
+          )}
+        </Circle>
         <User></User>
       </Space>
     </div>