dark mode

web/src/app/home/bots/components/bot-card/botCard.module.css

@@ -6,12 +6,22 @@
   box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
   padding: 1.2rem;
   cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+:global(.dark) .cardContainer {
+  background-color: #1a1a1e;
+  box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1);
 }
 
 .cardContainer:hover {
   box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
 }
 
+:global(.dark) .cardContainer:hover {
+  box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15);
+}
+
 .iconBasicInfoContainer {
   width: 100%;
   height: 100%;
@@ -47,6 +57,11 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: #1a1a1a;
+}
+
+:global(.dark) .basicInfoName {
+  color: #f0f0f0;
 }
 
 .basicInfoDescription {
@@ -58,6 +73,10 @@
   text-overflow: ellipsis;
 }
 
+:global(.dark) .basicInfoDescription {
+  color: #888888;
+}
+
 .basicInfoAdapterContainer {
   display: flex;
   flex-direction: row;
@@ -71,12 +90,20 @@
   color: #626262;
 }
 
+:global(.dark) .basicInfoAdapterIcon {
+  color: #a0a0a0;
+}
+
 .basicInfoAdapterLabel {
   font-size: 1.2rem;
   font-weight: 500;
   color: #626262;
 }
 
+:global(.dark) .basicInfoAdapterLabel {
+  color: #a0a0a0;
+}
+
 .basicInfoPipelineContainer {
   display: flex;
   flex-direction: row;
@@ -90,12 +117,20 @@
   margin-top: 0.2rem;
 }
 
+:global(.dark) .basicInfoPipelineIcon {
+  color: #a0a0a0;
+}
+
 .basicInfoPipelineLabel {
   font-size: 1.2rem;
   font-weight: 500;
   color: #626262;
 }
 
+:global(.dark) .basicInfoPipelineLabel {
+  color: #a0a0a0;
+}
+
 .bigText {
   white-space: nowrap;
   overflow: hidden;

web/src/app/home/bots/components/bot-form/BotForm.tsx

@@ -394,7 +394,7 @@ export default function BotForm({
                       <FormLabel>{t('bots.bindPipeline')}</FormLabel>
                       <FormControl>
                         <Select onValueChange={field.onChange} {...field}>
-                          <SelectTrigger>
+                          <SelectTrigger className="bg-[#f0f0f0] dark:bg-[#2a2a2e]">
                             <SelectValue
                               placeholder={t('bots.selectPipeline')}
                             />
@@ -467,7 +467,7 @@ export default function BotForm({
                         }}
                         value={field.value}
                       >
-                        <SelectTrigger className="w-[180px]">
+                        <SelectTrigger className="w-[180px] bg-[#f0f0f0] dark:bg-[#2a2a2e]">
                           <SelectValue placeholder={t('bots.selectAdapter')} />
                         </SelectTrigger>
                         <SelectContent className="fixed z-[1000]">