dark mode

web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx

@@ -132,7 +132,7 @@ export default function DynamicFormItemComponent({
     case DynamicFormItemType.SELECT:
       return (
         <Select value={field.value} onValueChange={field.onChange}>
-          <SelectTrigger>
+          <SelectTrigger className="bg-[#f0f0f0] dark:bg-[#2a2a2e]">
             <SelectValue placeholder={t('common.select')} />
           </SelectTrigger>
           <SelectContent>
@@ -150,7 +150,7 @@ export default function DynamicFormItemComponent({
     case DynamicFormItemType.LLM_MODEL_SELECTOR:
       return (
         <Select value={field.value} onValueChange={field.onChange}>
-          <SelectTrigger>
+          <SelectTrigger className="bg-[#f0f0f0] dark:bg-[#2a2a2e]">
             <SelectValue placeholder={t('models.selectModel')} />
           </SelectTrigger>
           <SelectContent>
@@ -267,7 +267,7 @@ export default function DynamicFormItemComponent({
     case DynamicFormItemType.KNOWLEDGE_BASE_SELECTOR:
       return (
         <Select value={field.value} onValueChange={field.onChange}>
-          <SelectTrigger>
+          <SelectTrigger className="bg-[#f0f0f0] dark:bg-[#2a2a2e]">
             <SelectValue placeholder={t('knowledge.selectKnowledgeBase')} />
           </SelectTrigger>
           <SelectContent>
@@ -291,7 +291,7 @@ export default function DynamicFormItemComponent({
               <div key={index} className="flex gap-2 items-center">
                 {/* 角色选择 */}
                 {index === 0 ? (
-                  <div className="w-[120px] px-3 py-2 border rounded bg-gray-50 text-gray-500">
+                  <div className="w-[120px] px-3 py-2 border rounded bg-gray-50 dark:bg-[#2a292e] text-gray-500 dark:text-white dark:border-gray-600">
                     system
                   </div>
                 ) : (
@@ -303,7 +303,7 @@ export default function DynamicFormItemComponent({
                       field.onChange(newValue);
                     }}
                   >
-                    <SelectTrigger className="w-[120px]">
+                    <SelectTrigger className="w-[120px] bg-[#f0f0f0] dark:bg-[#2a2a2e]">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>

web/src/app/home/components/home-sidebar/HomeSidebar.module.css

@@ -13,6 +13,10 @@
   /* box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); */
 }
 
+:global(.dark) .sidebarContainer {
+  background-color: #0a0a0b !important;
+}
+
 .langbotIconContainer {
   width: 200px;
   height: 70px;
@@ -21,32 +25,49 @@
   align-items: center;
   justify-content: center;
   gap: 0.8rem;
+}
 
-  .langbotIcon {
-    width: 2.8rem;
-    height: 2.8rem;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-  }
+.langbotIcon {
+  width: 2.8rem;
+  height: 2.8rem;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
 
-  .langbotTextContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 0.1rem;
-  }
+:global(.dark) .langbotIcon {
+  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.1);
+}
 
-  .langbotText {
-    font-size: 1.4rem;
-    font-weight: 500;
-  }
+.langbotTextContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.1rem;
+}
 
-  .langbotVersion {
-    font-size: 0.8rem;
-    font-weight: 700;
-    color: #6c6c6c;
-  }
+.langbotText {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+:global(.dark) .langbotText {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: #f0f0f0 !important;
+}
+
+.langbotVersion {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: #6c6c6c;
+}
+
+:global(.dark) .langbotVersion {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: #a0a0a0 !important;
 }
 
 .sidebarTopContainer {
@@ -76,6 +97,7 @@
   justify-content: flex-start;
   cursor: pointer;
   gap: 0.5rem;
+  transition: all 0.2s ease;
   /* background-color: aqua; */
 }
 
@@ -85,16 +107,40 @@
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
+:global(.dark) .sidebarSelected {
+  background-color: #2288ee;
+  color: white;
+  box-shadow: 0 0 10px 0 rgba(34, 136, 238, 0.3);
+}
+
 .sidebarUnselected {
   color: #6c6c6c;
 }
 
+:global(.dark) .sidebarUnselected {
+  color: #a0a0a0 !important;
+}
+
+.sidebarUnselected:hover {
+  background-color: rgba(34, 136, 238, 0.1);
+  color: #2288ee;
+}
+
+:global(.dark) .sidebarUnselected:hover {
+  background-color: rgba(34, 136, 238, 0.2);
+  color: #66baff;
+}
+
 .sidebarChildIcon {
   width: 20px;
   height: 20px;
   background-color: rgba(96, 149, 209, 0);
 }
 
+.sidebarChildName {
+  color: inherit;
+}
+
 .sidebarBottomContainer {
   width: 100%;
   display: flex;

web/src/app/home/components/home-titlebar/HomeTittleBar.module.css

@@ -17,6 +17,10 @@
   color: #585858;
 }
 
+:global(.dark) .titleText {
+  color: #e0e0e0;
+}
+
 .subtitleText {
   margin-left: 3.2rem;
   font-size: 0.8rem;
@@ -25,8 +29,16 @@
   align-items: center;
 }
 
+:global(.dark) .subtitleText {
+  color: #b0b0b0;
+}
+
 .helpLink {
   margin-left: 0.2rem;
   font-size: 0.8rem;
   color: #8b8b8b;
 }
+
+:global(.dark) .helpLink {
+  color: #a0a0a0;
+}