Prefers color scheme #282

src/app/(theme)/theme_layout.tsx

@@ -1,16 +1,15 @@
+"use client";
+import PageTracker from "@/components/page-tracker";
+import { Toaster } from "@/components/ui/sonner";
+import ThemeProvider from "@/context/theme-provider";
+import { cn } from "@/lib/utils";
 import { Analytics } from "@vercel/analytics/react";
+import { getCookie } from "cookies-next";
 import { Inter } from "next/font/google";
-import ThemeProvider from "@/context/theme-provider";
-import { cookies } from "next/headers";
-import { Toaster } from "@/components/ui/sonner";
-import { Fragment, PropsWithChildren } from "react";
 import Script from "next/script";
-import { cn } from "@/lib/utils";
-import PageTracker from "@/components/page-tracker";
-
+import { Fragment, PropsWithChildren } from "react";
 const inter = Inter({ subsets: ["latin"] });
-
-export default async function ThemeLayout({
+export default function ThemeLayout({
   children,
   overrideTheme,
   disableToggle,
@@ -20,10 +19,11 @@ export default async function ThemeLayout({
   disableToggle?: boolean;
   overrideThemeVariables?: Record<string, string>;
 }>) {
-  const cookieStore = await cookies();
-  const theme =
-    overrideTheme ??
-    (cookieStore.get("theme")?.value === "dark" ? "dark" : "light");
+  const cookieTheme = getCookie("theme");
+  const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+  const theme = overrideTheme ?? cookieTheme ?? systemTheme;
   const style = overrideThemeVariables ?? {};
 
   return (
@@ -32,7 +32,10 @@ export default async function ThemeLayout({
       style={style}
       suppressHydrationWarning
     >
-      <ThemeProvider defaultTheme={theme} disableToggle={disableToggle}>
+      <ThemeProvider
+        defaultTheme={theme as "dark" | "light"}
+        disableToggle={disableToggle}
+      >
         <Fragment>{children}</Fragment>
         <Toaster />
       </ThemeProvider>

src/components/gui/table-cell/generic-cell.tsx

@@ -1,18 +1,18 @@
-import { useEffect, useMemo, useState } from "react";
-import { isLinkString } from "@/lib/validation";
-import DisplayLinkCell from "./display-link-cell";
-import { cn } from "@/lib/utils";
-import { OptimizeTableHeaderWithIndexProps } from "../table-optimized";
-import { LucideArrowUpRight, LucideLoader } from "lucide-react";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { DatabaseResultSet, DatabaseValue } from "@/drivers/base-driver";
 import { useDatabaseDriver } from "@/context/driver-provider";
+import { DatabaseResultSet, DatabaseValue } from "@/drivers/base-driver";
 import { convertDatabaseValueToString } from "@/drivers/sqlite/sql-helper";
+import { cn } from "@/lib/utils";
+import { isLinkString } from "@/lib/validation";
 import { ColumnType } from "@outerbase/sdk-transform";
+import { LucideArrowUpRight, LucideLoader } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { OptimizeTableHeaderWithIndexProps } from "../table-optimized";
+import DisplayLinkCell from "./display-link-cell";
 
 interface TableCellProps<T = unknown> {
   align?: "left" | "right";
@@ -79,7 +79,7 @@ function SnippetRow({
             </div>
             <div
               className={cn(
-                "line-clamp-1 block w-[350px] overflow-hidden text-ellipsis whitespace-nowrap font-mono text-sm",
+                "line-clamp-1 block w-[350px] overflow-hidden font-mono text-sm text-ellipsis whitespace-nowrap",
                 colorClassName
               )}
             >
@@ -108,7 +108,7 @@ function ForeignKeyColumnSnippet(props: SneakpeakProps) {
           <div className="border-b px-4 py-2">
             <strong>{props.fkTableName}</strong>
           </div>
-          <div className="max-h-[300px] grow overflow-y-auto overflow-x-hidden">
+          <div className="max-h-[300px] grow overflow-x-hidden overflow-y-auto">
             {open && <SnippetRow {...props} />}
           </div>
         </div>
@@ -143,7 +143,7 @@ function BlobCellValue({
     return (
       <div className="flex">
         <div className="mr-2 flex-col items-center justify-center">
-          <span className="inline rounded bg-blue-500 p-1 pl-2 pr-2 text-white">
+          <span className="inline rounded bg-blue-500 p-1 pr-2 pl-2 text-white">
             vec({floatArray.length})
           </span>
         </div>
@@ -159,7 +159,7 @@ function BlobCellValue({
           {prettifyBytes(bytes.subarray(0, 64))}
         </span>
         <div className="ml-2 flex-col items-center justify-center">
-          <span className="inline rounded bg-blue-500 p-1 pl-2 pr-2 text-white">
+          <span className="inline rounded bg-blue-500 p-1 pr-2 pl-2 text-white">
             {bytes.length.toLocaleString(undefined, {
               maximumFractionDigits: 0,
             })}
@@ -225,7 +225,7 @@ export default function GenericCell({
         <span
           className={cn(
             "flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
-            "text-green-600 dark:text-green-500"
+            "text-green-600 dark:text-green-700"
           )}
         >
           {value}

src/components/gui/table-optimized/table-cell.tsx

@@ -1,8 +1,8 @@
-import OptimizeTableState from "./OptimizeTableState";
+import { cn } from "@/lib/utils";
+import { useMemo } from "react";
 import { OptimizeTableHeaderWithIndexProps } from ".";
 import tableResultCellRenderer from "../table-result/render-cell";
-import { useMemo } from "react";
-import { cn } from "@/lib/utils";
+import OptimizeTableState from "./OptimizeTableState";
 
 export default function OptimizeTableCell({
   state,
@@ -34,14 +34,14 @@ export default function OptimizeTableCell({
     if (isRemoved) {
       cellBackgroundColor = "bg-red-200 dark:bg-red-800";
     } else if (isChanged) {
-      cellBackgroundColor = "bg-yellow-200 dark:bg-orange-600";
+      cellBackgroundColor = "bg-yellow-200 dark:bg-orange-800";
     } else if (isNew) {
-      cellBackgroundColor = "bg-green-200 dark:bg-green-700";
+      cellBackgroundColor = "bg-green-200 dark:bg-green-800";
     } else {
-      cellBackgroundColor = "bg-blue-100 dark:bg-sky-900";
+      cellBackgroundColor = "bg-blue-50 dark:bg-neutral-900";
     }
   } else if (isChanged) {
-    cellBackgroundColor = "bg-yellow-100 dark:bg-orange-700";
+    cellBackgroundColor = "bg-yellow-100 dark:bg-orange-900";
   } else if (isNew) {
     cellBackgroundColor = "bg-green-100 dark:bg-green-900";
   } else if (isRemoved) {