Revert feat: temporary remove dark mode (janhq#2221)

* Revert "feat: temporary remove dark mode :(  (janhq#2168)"

This reverts commit 222b4ad.

* fix: revert darkmode and fix darkmode for import model

* fix: prettier format import model

---------

Co-authored-by: Louis <[email protected]>

uikit/src/button/styles.scss

@@ -5,19 +5,19 @@
   @apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
 
   &-primary {
-    @apply bg-blue-600 text-white hover:bg-blue-600/90;
+    @apply bg-primary hover:bg-primary/90 text-white;
   }
 
   &-secondary-blue {
-    @apply bg-blue-200 text-blue-600 hover:bg-blue-300/50;
+    @apply bg-blue-200 text-blue-600 hover:bg-blue-300/50 dark:hover:bg-blue-200/80;
   }
 
   &-danger {
     @apply bg-danger text-danger-foreground hover:bg-danger/90;
   }
 
   &-secondary-danger {
-    @apply bg-red-200 text-red-600 hover:bg-red-300/50;
+    @apply bg-red-200 text-red-600 hover:bg-red-300/50 dark:hover:bg-red-200/80;
   }
 
   &-outline {
@@ -66,7 +66,7 @@
 [type='reset'],
 [type='submit'] {
   &.btn-primary {
-    @apply bg-blue-600 hover:bg-blue-600/90;
+    @apply bg-primary hover:bg-primary/90;
     @apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
   }
   &.btn-secondary {

uikit/src/checkbox/styles.scss

@@ -1,5 +1,5 @@
 .checkbox {
-  @apply border-border h-5 w-5 flex-shrink-0 rounded-md border data-[state=checked]:bg-blue-600 data-[state=checked]:text-white;
+  @apply border-border data-[state=checked]:bg-primary h-5 w-5 flex-shrink-0 rounded-md border data-[state=checked]:text-white;
 
   &--icon {
     @apply h-4 w-4;

uikit/src/input/styles.scss

@@ -1,6 +1,6 @@
 .input {
   @apply border-border placeholder:text-muted-foreground flex h-9 w-full rounded-lg border bg-transparent px-3 py-1 transition-colors;
-  @apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100;
+  @apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600;
   @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
   @apply file:border-0 file:bg-transparent file:font-medium;
 }

uikit/src/main.scss

@@ -42,10 +42,69 @@
   --danger: 346.8 77.2% 49.8%;
   --danger-foreground: 355.7 100% 97.3%;
 
-  --secondary: 60 4.8% 95.9%;
-  --secondary-foreground: 24 9.8% 10%;
-
   --border: 20 5.9% 90%;
   --input: 20 5.9% 90%;
   --ring: 20 14.3% 4.1%;
+
+  .primary-blue {
+    --primary: 221 83% 53%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+  }
+
+  .primary-green {
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+  }
+
+  .primary-purple {
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 210 20% 98%;
+
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+  }
+}
+
+.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --danger: 346.8 77.2% 49.8%;
+  --danger-foreground: 355.7 100% 97.3%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+  --ring: 35.5 91.7% 32.9%;
+
+  .primary-blue {
+    --primary: 221 83% 53%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+  }
+
+  .primary-green {
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+  }
+
+  .primary-purple {
+    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 210 20% 98%;
+
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+  }
 }

uikit/src/progress/styles.scss

@@ -1,7 +1,7 @@
 .progress {
-  @apply relative h-4 w-full overflow-hidden rounded-full bg-gray-100;
+  @apply bg-secondary relative h-4 w-full overflow-hidden rounded-full;
 
   &-indicator {
-    @apply h-full w-full flex-1 bg-blue-600 transition-all;
+    @apply bg-primary h-full w-full flex-1 transition-all;
   }
 }

uikit/src/select/styles.scss

@@ -1,6 +1,6 @@
 .select {
   @apply placeholder:text-muted-foreground border-border flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm disabled:cursor-not-allowed [&>span]:line-clamp-1;
-  @apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100;
+  @apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600;
   @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
 
   &-caret {

uikit/src/slider/styles.scss

@@ -2,7 +2,7 @@
   @apply relative flex w-full touch-none select-none items-center;
 
   &-track {
-    @apply relative h-1.5 w-full grow overflow-hidden rounded-full bg-gray-200;
+    @apply relative h-1.5 w-full grow overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800;
     [data-disabled] {
       @apply cursor-not-allowed opacity-50;
     }
@@ -13,6 +13,6 @@
   }
 
   &-thumb {
-    @apply bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border border-blue-600/50 shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50;
+    @apply border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50;
   }
 }

uikit/src/switch/styles.scss

@@ -1,7 +1,7 @@
 .switch {
   @apply inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent;
   @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
-  @apply data-[state=unchecked]:bg-input data-[state=checked]:bg-blue-600;
+  @apply data-[state=checked]:bg-primary data-[state=unchecked]:bg-input;
   @apply disabled:cursor-not-allowed disabled:opacity-50;
 
   &-toggle {

uikit/src/tooltip/styles.scss

@@ -1,6 +1,6 @@
 .tooltip {
-  @apply z-50 overflow-hidden rounded-md bg-gray-950 px-2 py-1.5 text-xs font-medium text-gray-200 shadow-md;
+  @apply dark:bg-input dark:text-foreground z-50 overflow-hidden rounded-md bg-gray-950 px-2 py-1.5 text-xs font-medium text-gray-200 shadow-md;
   &-arrow {
-    @apply fill-gray-950;
+    @apply dark:fill-input fill-gray-950;
   }
 }

web/app/layout.tsx

@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="bg-white font-sans text-sm antialiased">
+      <body className="bg-white font-sans text-sm antialiased dark:bg-background">
         <div className="title-bar" />
         <Providers>{children}</Providers>
       </body>

web/containers/CardSidebar/index.tsx

@@ -45,7 +45,7 @@ export default function CardSidebar({
   return (
     <div
       className={twMerge(
-        'flex w-full flex-col border-t border-border bg-zinc-100',
+        'flex w-full flex-col border-t border-border bg-zinc-100 dark:bg-zinc-900',
         asChild ? 'rounded-lg border' : 'border-t'
       )}
     >
@@ -61,7 +61,7 @@ export default function CardSidebar({
               if (!children) return
               setShow(!show)
             }}
-            className="flex w-full flex-1 items-center space-x-2 rounded-lg bg-zinc-100 py-2 pr-2"
+            className="flex w-full flex-1 items-center space-x-2 rounded-lg bg-zinc-100 py-2 pr-2 dark:bg-zinc-900"
           >
             <ChevronDownIcon
               className={twMerge(
@@ -79,7 +79,7 @@ export default function CardSidebar({
               {!hideMoreVerticalAction && (
                 <div
                   ref={setToggle}
-                  className="cursor-pointer rounded-lg bg-zinc-100 p-2 px-3"
+                  className="cursor-pointer rounded-lg bg-zinc-100 p-2 px-3 dark:bg-zinc-900"
                   onClick={() => setMore(!more)}
                 >
                   <MoreVerticalIcon className="h-5 w-5" />
@@ -114,15 +114,15 @@ export default function CardSidebar({
               <>
                 {title === 'Model' ? (
                   <div className="flex flex-col">
-                    <span className="font-medium text-black">
+                    <span className="font-medium text-black dark:text-muted-foreground">
                       {openFileTitle()}
                     </span>
                     <span className="mt-1 text-muted-foreground">
                       Opens thread.json. Changes affect this thread only.
                     </span>
                   </div>
                 ) : (
-                  <span className="text-bold text-black">
+                  <span className="text-bold text-black dark:text-muted-foreground">
                     {openFileTitle()}
                   </span>
                 )}
@@ -141,7 +141,7 @@ export default function CardSidebar({
               />
               <>
                 <div className="flex flex-col">
-                  <span className="line-clamp-1 font-medium text-black">
+                  <span className="line-clamp-1 font-medium text-black dark:text-muted-foreground">
                     Edit Global Defaults for{' '}
                     <span
                       className="font-bold"
@@ -175,7 +175,7 @@ export default function CardSidebar({
       {show && (
         <div
           className={twMerge(
-            'flex flex-col gap-2 bg-white px-2',
+            'flex flex-col gap-2 bg-white px-2 dark:bg-background',
             asChild && 'rounded-b-lg'
           )}
         >

web/containers/Checkbox/index.tsx

@@ -34,10 +34,12 @@ const Checkbox: React.FC<Props> = ({
   return (
     <div className="flex justify-between">
       <div className="mb-1 flex items-center gap-x-2">
-        <p className="text-sm font-semibold text-zinc-500">{title}</p>
+        <p className="text-sm font-semibold text-zinc-500 dark:text-gray-300">
+          {title}
+        </p>
         <Tooltip>
           <TooltipTrigger asChild>
-            <InfoIcon size={16} className="flex-shrink-0" />
+            <InfoIcon size={16} className="flex-shrink-0 dark:text-gray-500" />
           </TooltipTrigger>
           <TooltipPortal>
             <TooltipContent side="top" className="max-w-[240px]">

web/containers/DropdownListSidebar/index.tsx

@@ -203,14 +203,15 @@ const DropdownListSidebar = ({
                 isTabActive === 1 && '[&_.select-scroll-down-button]:hidden'
               )}
             >
-              <div className="relative px-2 py-2">
-                <ul className="inline-flex w-full space-x-2 rounded-lg bg-zinc-100 px-1">
+              <div className="relative px-2 py-2 dark:bg-secondary/50">
+                <ul className="inline-flex w-full space-x-2 rounded-lg bg-zinc-100 px-1 dark:bg-secondary">
                   {engineOptions.map((name, i) => {
                     return (
                       <li
                         className={twMerge(
                           'relative my-1 flex w-full cursor-pointer items-center justify-center space-x-2 px-2 py-2',
-                          isTabActive === i && 'rounded-md bg-background'
+                          isTabActive === i &&
+                            'rounded-md bg-background dark:bg-white'
                         )}
                         key={i}
                         onClick={() => setIsTabActive(i)}
@@ -229,7 +230,8 @@ const DropdownListSidebar = ({
                         <span
                           className={twMerge(
                             'relative z-50 font-medium text-muted-foreground',
-                            isTabActive === i && 'font-bold text-foreground'
+                            isTabActive === i &&
+                              'font-bold text-foreground dark:text-black'
                           )}
                         >
                           {name}

web/containers/GPUDriverPromptModal/index.tsx

@@ -60,7 +60,7 @@ const GPUDriverPrompt: React.FC = () => {
               id="default-checkbox"
               type="checkbox"
               onChange={onDoNotShowAgainChange}
-              className="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500"
+              className="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
             />
             <span>Don&apos;t show again</span>
           </div>

web/containers/Layout/BottomBar/DownloadingState/index.tsx

@@ -47,7 +47,7 @@ export default function DownloadingState() {
                 </span>
               </Button>
               <span
-                className="absolute left-0 h-full rounded-md rounded-l-md bg-blue-500/20"
+                className="absolute left-0 h-full rounded-md rounded-l-md bg-primary/20"
                 style={{
                   width: `${totalPercentage}%`,
                 }}

web/containers/Layout/BottomBar/ImportingModelState/index.tsx

@@ -38,17 +38,17 @@ const ImportingModelState: React.FC = () => {
           className="flex cursor-pointer flex-row items-center space-x-2"
           onClick={onClick}
         >
-          <p className="text-xs font-semibold	text-[#09090B]">
+          <p className="text-xs font-semibold text-muted-foreground">
             Importing model ({finishedImportModelCount}/{importingModels.length}
             )
           </p>
 
-          <div className="flex flex-row items-center justify-center space-x-2 rounded-md bg-[#F4F4F5] px-2 py-[2px]">
+          <div className="flex flex-row items-center justify-center space-x-2 rounded-md bg-secondary px-2 py-[2px]">
             <Progress
               className="h-2 w-24"
               value={transferredSize / totalSize}
             />
-            <span className="text-xs font-bold text-blue-600">
+            <span className="text-xs font-bold text-muted-foreground">
               {progress.toFixed(2)}%
             </span>
           </div>

web/containers/Layout/Ribbon/index.tsx

@@ -45,7 +45,7 @@ export default function RibbonNav() {
           size={20}
           className={twMerge(
             'flex-shrink-0 text-muted-foreground',
-            serverEnabled && 'text-gray-300'
+            serverEnabled && 'text-gray-300 dark:text-gray-700'
           )}
         />
       ),
@@ -114,7 +114,7 @@ export default function RibbonNav() {
                         </div>
                         {isActive && (
                           <m.div
-                            className="absolute inset-0 left-0 h-full w-full rounded-md bg-gray-200"
+                            className="absolute inset-0 left-0 h-full w-full rounded-md bg-gray-200 dark:bg-secondary"
                             layoutId="active-state-primary"
                           />
                         )}
@@ -166,7 +166,7 @@ export default function RibbonNav() {
                         </div>
                         {isActive && (
                           <m.div
-                            className="absolute inset-0 left-0 h-full w-full rounded-md bg-gray-200"
+                            className="absolute inset-0 left-0 h-full w-full rounded-md bg-gray-200 dark:bg-secondary"
                             layoutId="active-state-secondary"
                           />
                         )}

web/containers/Layout/TopBar/index.tsx

@@ -159,7 +159,7 @@ const TopBar = () => {
                             size={16}
                             className="text-muted-foreground"
                           />
-                          <span className="font-medium text-black ">
+                          <span className="font-medium text-black dark:text-muted-foreground">
                             {openFileTitle()}
                           </span>
                         </div>
@@ -175,7 +175,7 @@ const TopBar = () => {
                             className="mt-0.5 flex-shrink-0 text-muted-foreground"
                           />
                           <div className="flex flex-col">
-                            <span className="font-medium text-black ">
+                            <span className="font-medium text-black dark:text-muted-foreground">
                               Edit Threads Settings
                             </span>
                             <span className="mt-1 text-muted-foreground">
@@ -204,7 +204,7 @@ const TopBar = () => {
                             className="text-muted-foreground"
                           />
                           <div className="flex flex-col">
-                            <span className="font-medium text-black ">
+                            <span className="font-medium text-black dark:text-muted-foreground">
                               {openFileTitle()}
                             </span>
                           </div>