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/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>