feat: colormode

src/pages/_app.tsx

@@ -1,7 +1,7 @@
 import type { AppProps, NextWebVitalsMetric } from 'next/app';
 import Script from 'next/script';
 import Head from 'next/head';
-import { ChakraProvider } from '@chakra-ui/react';
+import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
 import Layout from '@/components/Layout';
 import { theme } from '@/constants/theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -41,6 +41,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <Script src="/iconfont.js" strategy="afterInteractive"></Script>
       <QueryClientProvider client={queryClient}>
         <ChakraProvider theme={theme}>
+          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
           <Layout>
             <Component {...pageProps} />
           </Layout>

src/pages/chat/components/SlideBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { AddIcon, ChatIcon, DeleteIcon } from '@chakra-ui/icons';
+import { AddIcon, ChatIcon, DeleteIcon, MoonIcon, SunIcon } from '@chakra-ui/icons';
 import {
   Box,
   Button,
@@ -18,7 +18,8 @@ import {
   ModalFooter,
   ModalBody,
   ModalCloseButton,
-  useDisclosure
+  useDisclosure,
+  useColorMode
 } from '@chakra-ui/react';
 import { useUserStore } from '@/store/user';
 import { useChatStore } from '@/store/chat';
@@ -45,6 +46,7 @@ const SlideBar = ({
   onClose: () => void;
 }) => {
   const router = useRouter();
+  const { colorMode, toggleColorMode } = useColorMode();
   const { copyData } = useCopyData();
   const { myModels, getMyModels } = useUserStore();
   const { chatHistory, removeChatHistoryByWindowId } = useChatStore();
@@ -217,15 +219,27 @@ const SlideBar = ({
         </>
       </RenderButton>
 
-      <RenderButton
-        onClick={onOpenShare}
-      >
+      <RenderButton onClick={onOpenShare}>
         <>
           <MyIcon name="share" fill={'white'} w={'16px'} h={'16px'} mr={4} />
           分享
         </>
       </RenderButton>
 
+      <Box textAlign={'end'} mr={4}>
+        <IconButton
+          icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+          aria-label={''}
+          variant={'outline'}
+          w={'16px'}
+          colorScheme={'white'}
+          _hover={{
+            backgroundColor: 'rgba(255,255,255,0.2)'
+          }}
+          onClick={toggleColorMode}
+        />
+      </Box>
+
       {/* 分享提示modal */}
       <Modal isOpen={isOpenShare} onClose={onCloseShare}>
         <ModalOverlay />
@@ -250,7 +264,7 @@ const SlideBar = ({
                     '已复制分享链接'
                   );
                   onCloseShare();
-                  onClose()
+                  onClose();
                 }}
               >
                 分享空白对话
@@ -261,7 +275,7 @@ const SlideBar = ({
               onClick={() => {
                 copyData(`${location.origin}/chat?chatId=${chatId}`, '已复制分享链接');
                 onCloseShare();
-                onClose()
+                onClose();
               }}
             >
               分享当前对话

src/pages/chat/index.tsx

@@ -18,7 +18,8 @@ import {
   useDisclosure,
   Drawer,
   DrawerOverlay,
-  DrawerContent
+  DrawerContent,
+  useColorModeValue
 } from '@chakra-ui/react';
 import { useToast } from '@/hooks/useToast';
 import Icon from '@/components/Iconfont';
@@ -413,7 +414,12 @@ const Chat = ({ chatId }: { chatId: string }) => {
               key={index}
               py={media(9, 6)}
               px={media(4, 2)}
-              backgroundColor={index % 2 === 0 ? 'rgba(247,247,248,1)' : '#fff'}
+              backgroundColor={
+                index % 2 === 0
+                  ? useColorModeValue('blackAlpha.50', '')
+                  : useColorModeValue('white', 'gray.700')
+              }
+              color={useColorModeValue('blackAlpha.700', 'white')}
               borderBottom={'1px solid rgba(0,0,0,0.1)'}
             >
               <Flex maxW={'750px'} m={'auto'} alignItems={'flex-start'}>
@@ -445,7 +451,7 @@ const Chat = ({ chatId }: { chatId: string }) => {
           m={media('20px auto', '0 auto')}
           w={'100%'}
           maxW={media('min(750px, 100%)', 'auto')}
-          boxShadow={'0 -14px 30px rgba(255,255,255,0.6)'}
+          boxShadow={`0 -14px 30px ${useColorModeValue('rgba(255,255,255,0.5)', 'blackAlpha.200')}`}
           borderTop={media('none', '1px solid rgba(0,0,0,0.1)')}
         >
           {!!chatWindowError ? (
@@ -488,6 +494,7 @@ const Chat = ({ chatId }: { chatId: string }) => {
                 maxHeight={'150px'}
                 maxLength={chatData?.secret.contentMaxLen || -1}
                 overflowY={'auto'}
+                color={useColorModeValue('blackAlpha.600', 'white')}
                 onChange={(e) => {
                   const textarea = e.target;
                   setInputVal(textarea.value);
@@ -517,7 +524,12 @@ const Chat = ({ chatId }: { chatId: string }) => {
                   />
                 ) : (
                   <Box cursor={'pointer'} onClick={sendPrompt}>
-                    <Icon name={'icon-fasong'} width={20} height={20} color={'#718096'}></Icon>
+                    <Icon
+                      name={'icon-fasong'}
+                      width={20}
+                      height={20}
+                      color={useColorModeValue('#718096', 'white')}
+                    ></Icon>
                   </Box>
                 )}
               </Box>