feat: temporary remove dark mode :( (#2168)

* remove darkmode * fix progress component background color
janhq · henryh0x1 · Feb 28, 2024 · Feb 22, 2024 · Feb 22, 2024 · Feb 22, 2024
commit 222b4ad897c275dab0eaec3c8a8472bf3df7afc4
diff --git a/uikit/src/button/styles.scss b/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-primary hover:bg-primary/90 text-white;
  @apply bg-blue-600 text-white hover:bg-blue-600/90;
  }
 
  &-secondary-blue {
- @apply bg-blue-200 text-blue-600 hover:bg-blue-300/50 dark:hover:bg-blue-200/80;
  @apply bg-blue-200 text-blue-600 hover:bg-blue-300/50;
  }
 
  &-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 dark:hover:bg-red-200/80;
  @apply bg-red-200 text-red-600 hover:bg-red-300/50;
  }
 
  &-outline {
@@ -66,7 66,7 @@
 [type='reset'],
 [type='submit'] {
  &.btn-primary {
- @apply bg-primary hover:bg-primary/90;
  @apply bg-blue-600 hover:bg-blue-600/90;
  @apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
  }
  &.btn-secondary {

diff --git a/uikit/src/checkbox/styles.scss b/uikit/src/checkbox/styles.scss
@@ -1,5 1,5 @@
 .checkbox {
- @apply border-border data-[state=checked]:bg-primary h-5 w-5 flex-shrink-0 rounded-md border data-[state=checked]:text-white;
  @apply border-border h-5 w-5 flex-shrink-0 rounded-md border data-[state=checked]:bg-blue-600 data-[state=checked]:text-white;
 
  &--icon {
  @apply h-4 w-4;

diff --git a/uikit/src/input/styles.scss b/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 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600;
  @apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100;
  @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;
 }
diff --git a/uikit/src/progress/styles.scss b/uikit/src/progress/styles.scss
@@ -1,7 1,7 @@
 .progress {
- @apply bg-secondary relative h-4 w-full overflow-hidden rounded-full;
  @apply relative h-4 w-full overflow-hidden rounded-full bg-gray-100;
 
  &-indicator {
- @apply bg-primary h-full w-full flex-1 transition-all;
  @apply h-full w-full flex-1 bg-blue-600 transition-all;
  }
 }
diff --git a/uikit/src/select/styles.scss b/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 disabled:dark:bg-zinc-800 disabled:dark:text-zinc-600;
  @apply disabled:text-muted-foreground disabled:cursor-not-allowed disabled:bg-zinc-100;
  @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
 
  &-caret {

diff --git a/uikit/src/slider/styles.scss b/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 dark:bg-gray-800;
  @apply relative h-1.5 w-full grow overflow-hidden rounded-full bg-gray-200;
  [data-disabled] {
  @apply cursor-not-allowed opacity-50;
  }
@@ -13,6 13,6 @@
  }
 
  &-thumb {
- @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;
  @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;
  }
 }
diff --git a/uikit/src/switch/styles.scss b/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=checked]:bg-primary data-[state=unchecked]:bg-input;
  @apply data-[state=unchecked]:bg-input data-[state=checked]:bg-blue-600;
  @apply disabled:cursor-not-allowed disabled:opacity-50;
 
  &-toggle {

diff --git a/uikit/src/tooltip/styles.scss b/uikit/src/tooltip/styles.scss
@@ -1,6 1,6 @@
 .tooltip {
- @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;
  @apply 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 dark:fill-input fill-gray-950;
  @apply fill-gray-950;
  }
 }
diff --git a/web/app/layout.tsx b/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 dark:bg-background">
  <body className="bg-white font-sans text-sm antialiased">
  <div className="title-bar" />
  <Providers>{children}</Providers>
  </body>

diff --git a/web/containers/CardSidebar/index.tsx b/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 dark:bg-zinc-900',
  'flex w-full flex-col border-t border-border bg-zinc-100',
  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 dark:bg-zinc-900"
  className="flex w-full flex-1 items-center space-x-2 rounded-lg bg-zinc-100 py-2 pr-2"
  >
  <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 dark:bg-zinc-900"
  className="cursor-pointer rounded-lg bg-zinc-100 p-2 px-3"
  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 dark:text-muted-foreground">
  <span className="font-medium text-black">
  {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 dark:text-muted-foreground">
  <span className="text-bold text-black">
  {openFileTitle()}
  </span>
  )}
@@ -141,7 141,7 @@ export default function CardSidebar({
  />
  <>
  <div className="flex flex-col">
- <span className="line-clamp-1 font-medium text-black dark:text-muted-foreground">
  <span className="line-clamp-1 font-medium text-black">
  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 dark:bg-background',
  'flex flex-col gap-2 bg-white px-2',
  asChild && 'rounded-b-lg'
  )}
  >

diff --git a/web/containers/Checkbox/index.tsx b/web/containers/Checkbox/index.tsx
@@ -34,12 34,10 @@ 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 dark:text-gray-300">
- {title}
- </p>
  <p className="text-sm font-semibold text-zinc-500">{title}</p>
  <Tooltip>
  <TooltipTrigger asChild>
- <InfoIcon size={16} className="flex-shrink-0 dark:text-gray-500" />
  <InfoIcon size={16} className="flex-shrink-0" />
  </TooltipTrigger>
  <TooltipPortal>
  <TooltipContent side="top" className="max-w-[240px]">

diff --git a/web/containers/DropdownListSidebar/index.tsx b/web/containers/DropdownListSidebar/index.tsx
@@ -203,15 203,14 @@ const DropdownListSidebar = ({
  isTabActive === 1 && '[&_.select-scroll-down-button]:hidden'
  )}
  >
- <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">
  <div className="relative px-2 py-2">
  <ul className="inline-flex w-full space-x-2 rounded-lg bg-zinc-100 px-1">
  {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 dark:bg-white'
  isTabActive === i && 'rounded-md bg-background'
  )}
  key={i}
  onClick={() => setIsTabActive(i)}
@@ -230,8 229,7 @@ const DropdownListSidebar = ({
  <span
  className={twMerge(
  'relative z-50 font-medium text-muted-foreground',
- isTabActive === i &&
- 'font-bold text-foreground dark:text-black'
  isTabActive === i && 'font-bold text-foreground'
  )}
  >
  {name}

diff --git a/web/containers/GPUDriverPromptModal/index.tsx b/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 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
  className="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500"
  />
  <span>Don&apos;t show again</span>
  </div>

diff --git a/web/containers/Layout/BottomBar/DownloadingState/index.tsx b/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-primary/20"
  className="absolute left-0 h-full rounded-md rounded-l-md bg-blue-500/20"
  style={{
  width: `${totalPercentage}%`,
  }}

diff --git a/web/containers/Layout/BottomBar/ImportingModelState/index.tsx b/web/containers/Layout/BottomBar/ImportingModelState/index.tsx
@@ -48,7 48,7 @@ const ImportingModelState: React.FC = () => {
  className="h-2 w-24"
  value={transferredSize / totalSize}
  />
- <span className="text-xs font-bold text-primary">
  <span className="text-xs font-bold text-blue-600">
  {progress.toFixed(2)}%
  </span>
  </div>

diff --git a/web/containers/Layout/Ribbon/index.tsx b/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 dark:text-gray-700'
  serverEnabled && 'text-gray-300'
  )}
  />
  ),
@@ -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 dark:bg-secondary"
  className="absolute inset-0 left-0 h-full w-full rounded-md bg-gray-200"
  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 dark:bg-secondary"
  className="absolute inset-0 left-0 h-full w-full rounded-md bg-gray-200"
  layoutId="active-state-secondary"
  />
  )}

diff --git a/web/containers/Layout/TopBar/index.tsx b/web/containers/Layout/TopBar/index.tsx
@@ -159,7 159,7 @@ const TopBar = () => {
  size={16}
  className="text-muted-foreground"
  />
- <span className="font-medium text-black dark:text-muted-foreground">
  <span className="font-medium text-black ">
  {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 dark:text-muted-foreground">
  <span className="font-medium text-black ">
  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 dark:text-muted-foreground">
  <span className="font-medium text-black ">
  {openFileTitle()}
  </span>
  </div>

diff --git a/web/containers/Loader/index.tsx b/web/containers/Loader/index.tsx
@@ -7,12 7,12 @@ export default function Loader({ description }: Props) {
  <div className="space-y-16">
  <div className="loader">
  <div className="loader-inner">
- <label className="h-2 w-2 rounded-full bg-primary" />
- <label className="h-2 w-2 rounded-full bg-primary" />
- <label className="h-2 w-2 rounded-full bg-primary" />
- <label className="h-2 w-2 rounded-full bg-primary" />
- <label className="h-2 w-2 rounded-full bg-primary" />
- <label className="h-2 w-2 rounded-full bg-primary" />
  <label className="h-2 w-2 rounded-full bg-blue-500" />
  <label className="h-2 w-2 rounded-full bg-blue-500" />
  <label className="h-2 w-2 rounded-full bg-blue-500" />
  <label className="h-2 w-2 rounded-full bg-blue-500" />
  <label className="h-2 w-2 rounded-full bg-blue-500" />
  <label className="h-2 w-2 rounded-full bg-blue-500" />
  </div>
  </div>
  <p className="font-medium text-muted-foreground">{description}</p>

diff --git a/web/containers/ModalTroubleShoot/AppLogs.tsx b/web/containers/ModalTroubleShoot/AppLogs.tsx
@@ -28,7 28,7 @@ const AppLogs = () => {
  <div className="absolute -top-11 right-2">
  <Button
  themes="outline"
- className="bg-white dark:bg-secondary/50"
  className="bg-white"
  onClick={() => {
  clipboard.copy(logs.slice(-50) ?? '')
  }}

diff --git a/web/containers/ModalTroubleShoot/DeviceSpecs.tsx b/web/containers/ModalTroubleShoot/DeviceSpecs.tsx
@@ -16,7 16,7 @@ const DeviceSpecs = () => {
  <div className="absolute -top-11 right-2">
  <Button
  themes="outline"
- className="bg-white dark:bg-secondary/50"
  className="bg-white"
  onClick={() => {
  clipboard.copy(userAgent ?? '')
  }}

diff --git a/web/containers/ModalTroubleShoot/index.tsx b/web/containers/ModalTroubleShoot/index.tsx
@@ -38,7 38,7 @@ const ModalTroubleShooting: React.FC = () => {
  <a
  href="https://jan.ai/guides/troubleshooting"
  target="_blank"
- className="text-blue-600 hover:underline dark:text-blue-300"
  className="text-blue-600 hover:underline"
  >
  troubleshooting guide
  </a>
@@ -65,7 65,7 @@ const ModalTroubleShooting: React.FC = () => {
  <a
  href="https://discord.gg/AsJ8krTT3N"
  target="_blank"
- className="text-blue-600 hover:underline dark:text-blue-300"
  className="text-blue-600 hover:underline"
  >
  Discord
  </a>
@@ -77,8 77,8 @@ const ModalTroubleShooting: React.FC = () => {
 
  <div className="flex flex-col pt-4">
  {/* TODO @faisal replace this once we have better tabs component UI */}
- <div className="relative bg-zinc-100 px-4 py-2 dark:bg-secondary/50">
- <ul className="inline-flex space-x-2 rounded-lg bg-zinc-200 px-1 dark:bg-secondary">
  <div className="relative bg-zinc-100 px-4 py-2">
  <ul className="inline-flex space-x-2 rounded-lg bg-zinc-200 px-1">
  {logOption.map((name, i) => {
  return (
  <li
@@ -89,15 89,14 @@ const ModalTroubleShooting: React.FC = () => {
  <span
  className={twMerge(
  'relative z-50 font-medium text-muted-foreground',
- isTabActive === i &&
- 'font-bold text-foreground dark:text-black'
  isTabActive === i && 'font-bold text-foreground'
  )}
  >
  {name}
  </span>
  {isTabActive === i && (
  <m.div
- className="absolute left-0 top-1 h-[calc(100%-8px)] w-full rounded-md bg-background dark:bg-white"
  className="absolute left-0 top-1 h-[calc(100%-8px)] w-full rounded-md bg-background"
  layoutId="log-state-active"
  />
  )}

diff --git a/web/containers/ModelConfigInput/index.tsx b/web/containers/ModelConfigInput/index.tsx
@@ -30,12 30,10 @@ const ModelConfigInput: React.FC<Props> = ({
  return (
  <div className="flex flex-col">
  <div className="mb-2 flex items-center gap-x-2">
- <p className="text-sm font-semibold text-zinc-500 dark:text-gray-300">
- {title}
- </p>
  <p className="text-sm font-semibold text-zinc-500">{title}</p>
  <Tooltip>
  <TooltipTrigger asChild>
- <InfoIcon size={16} className="flex-shrink-0 dark:text-gray-500" />
  <InfoIcon size={16} className="flex-shrink-0" />
  </TooltipTrigger>
  <TooltipPortal>
  <TooltipContent side="top" className="max-w-[240px]">