feat: light theme mode

app/containers/Settings/DangerItems.tsx

@@ -68,9 +68,6 @@ export default function DangerItems() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const btnStyle = " !shadow-none !bg-gray-50";
-  const textStyle = " !text-sm";
-
   return (
     <List
       widgetStyle={{
@@ -126,7 +123,6 @@ export default function DangerItems() {
       >
         <Btn
           text={Locale.Settings.Danger.Reset.Action}
-          className={btnStyle}
           onClick={async () => {
             if (await showConfirm(Locale.Settings.Danger.Reset.Confirm)) {
               appConfig.reset();
@@ -141,7 +137,6 @@ export default function DangerItems() {
       >
         <Btn
           text={Locale.Settings.Danger.Clear.Action}
-          className={btnStyle}
           onClick={async () => {
             if (await showConfirm(Locale.Settings.Danger.Clear.Confirm)) {
               chatStore.clearAllData();

app/containers/Settings/PromptSetting.tsx

@@ -21,7 +21,6 @@ export default function PromptSetting(props: PromptSettingProps) {
   const promptStore = usePromptStore();
   const customCount = promptStore.getUserPrompts().length ?? 0;
 
-  const btnStyle = " !shadow-none !bg-gray-50";
   const textStyle = " !text-sm";
 
   return (
@@ -45,7 +44,6 @@ export default function PromptSetting(props: PromptSettingProps) {
         >
           <div className="flex gap-3">
             <Btn
-              className={btnStyle}
               onClick={() => setShowPromptModal(true)}
               text={
                 <span className={textStyle}>{Locale.Settings.Prompt.Edit}</span>

app/containers/Settings/SettingHeader.tsx

@@ -1,5 +1,4 @@
 import { useNavigate } from "react-router-dom";
-import { Path } from "@/app/constant";
 import Locale from "@/app/locales";
 import GobackIcon from "@/app/icons/goback.svg";
 
@@ -19,7 +18,7 @@ export default function SettingHeader(props: ChatHeaderProps) {
   let subTitleClassName = "";
 
   if (isMobileScreen) {
-    containerClassName = "h-menu-title-mobile";
+    containerClassName = "h-menu-title-mobile bg-settings-header-mobile";
     titleClassName = "flex flex-col items-center justify-center gap-0.5 text";
     mainTitleClassName = "text-sm-title h-[19px] leading-5";
     subTitleClassName = "text-sm-mobile-tab leading-4";
@@ -27,7 +26,7 @@ export default function SettingHeader(props: ChatHeaderProps) {
 
   return (
     <div
-      className={`relative flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b-[1px] border-gray-200 ${containerClassName}`}
+      className={`relative flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b border-settings-header ${containerClassName}`}
       data-tauri-drag-region
     >
       {isMobileScreen ? (
@@ -41,7 +40,7 @@ export default function SettingHeader(props: ChatHeaderProps) {
 
       <div className={`flex-1 ${titleClassName}`}>
         <div
-          className={`line-clamp-1 cursor-pointer text-black text-chat-header-title font-common ${mainTitleClassName}`}
+          className={`line-clamp-1 cursor-pointer text-text-settings-panel-header-title text-chat-header-title font-common ${mainTitleClassName}`}
         >
           {Locale.Settings.Title}
         </div>

app/containers/Settings/SettingPanel.tsx

@@ -60,7 +60,7 @@ export default function Settings(props: MenuWrapperInspectProps) {
 
   return (
     <div
-      className={`flex flex-col overflow-hidden bg-chat-panel ${containerClassName}`}
+      className={`flex flex-col overflow-hidden bg-settings-panel ${containerClassName}`}
     >
       <SettingHeader
         isMobileScreen={isMobileScreen}

app/containers/Settings/SyncItems.tsx

@@ -33,7 +33,6 @@ export default function SyncItems() {
     };
   }, [chatStore.sessions, maskStore.masks, promptStore.prompts]);
 
-  const btnStyle = " !shadow-none !bg-gray-50";
   const textStyle = "!text-sm";
   return (
     <>
@@ -50,7 +49,6 @@ export default function SyncItems() {
         >
           <div className="flex gap-3">
             <Btn
-              className={btnStyle}
               onClick={() => {
                 setShowSyncConfigModal(true);
               }}
@@ -58,7 +56,6 @@ export default function SyncItems() {
             ></Btn>
             {couldSync && (
               <Btn
-                className={btnStyle}
                 onClick={async () => {
                   try {
                     await syncStore.sync();
@@ -80,14 +77,12 @@ export default function SyncItems() {
         >
           <div className="flex gap-3">
             <Btn
-              className={btnStyle}
               onClick={() => {
                 syncStore.export();
               }}
               text={<span className={textStyle}>{Locale.UI.Export}</span>}
             ></Btn>
             <Btn
-              className={btnStyle}
               onClick={async () => {
                 syncStore.import();
               }}

app/containers/Settings/index.tsx

@@ -17,9 +17,9 @@ export default MenuLayout(function SettingList(props) {
   let itemClassName = "";
 
   if (isMobileScreen) {
-    layoutClassName = "h-[100%] mx-[-1.5rem] px-6 py-6 bg-blue-50";
+    layoutClassName = "h-[100%] mx-[-1.5rem] px-6 py-6 bg-settings-menu-mobile";
     titleClassName = "h-menu-title-mobile";
-    itemClassName = "p-4 bg-white";
+    itemClassName = "p-4 bg-settings-menu-item-mobile";
   }
 
   return (
@@ -29,25 +29,19 @@ export default MenuLayout(function SettingList(props) {
           className={`flex items-center justify-between ${titleClassName}`}
           data-tauri-drag-region
         >
-          <div className="text-setting-title text-black font-common font-setting-title">
+          <div className="text-setting-title text-text-settings-menu-title font-common font-setting-title">
             {Locale.Settings.Title}
           </div>
         </div>
-        {/* <div className={`pb-3 text-sm sm:text-sm-mobile text-blue-500`}>
-            {Locale.Settings.SubTitle}
-            </div> */}
       </div>
 
       <div
         className={`flex flex-col overflow-y-auto overflow-x-hidden w-[100%]`}
       >
         <div
-          //   className={`p-4 font-common text-setting-items font-normal text-black
-          //     border-[1px] border-blue-200 border-opacity-0 rounded-md
-          //   `}
-          className={`p-4 font-common text-setting-items font-normal text-black
-                border-[1px] border-blue-200 border-opacity-0 rounded-md
-                hover:border-opacity-100 hover:bg-blue-100 ${itemClassName}
+          className={`p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
+                border border-settings-menu-item-selected border-opacity-0 rounded-md
+                hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected ${itemClassName}
                 flex justify-between items-center
             `}
           onClick={() => {