Merge pull request #24 from crow-fox/features/darkmode

Features/darkmode
crow-fox · Apr 28, 2024 · 4cd25e1 · 4cd25e1
2 parents 7c6180e + 92a0b6f
commit 4cd25e1
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 22 deletions.
diff --git a/app/_features/color/ColorController.tsx b/app/_features/color/ColorController.tsx
@@ -19,7 +19,7 @@ export function ColorController({ tailwindColors }: Props) {
         <p>
           <button
             onClick={resetCurrentColor}
-            className=" rounded-lg bg-black px-4 py-2  text-slate-100"
+            className=" rounded-lg bg-gray-900 px-4 py-2  text-white dark:bg-gray-200 dark:text-gray-950 "
           >
             選択を解除
           </button>

diff --git a/app/_features/color/ColorGridItem.tsx b/app/_features/color/ColorGridItem.tsx
@@ -48,12 +48,14 @@ export function ColorGridItem({ color, tailwindColors }: Props) {
       href={createColorHref(color)}
       scroll={false}
       className={[
-        "grid gap-y-3 p-2 hover:shadow-[inset_0_0_0_2px_black] focus-visible:shadow-[inset_0_0_0_2px_black] focus-visible:outline-none",
-        isCurrent ? "shadow-[inset_0_0_0_2px_black]" : "shadow-none",
+        "grid gap-y-3 p-2 hover:shadow-[inset_0_0_0_2px_theme(colors.gray[900])] focus-visible:shadow-[inset_0_0_0_2px_theme(colors.gray[900])] focus-visible:outline-none  dark:hover:shadow-[inset_0_0_0_2px_theme(colors.gray[200])] dark:focus-visible:shadow-[inset_0_0_0_2px_theme(colors.gray[200])]",
+        isCurrent
+          ? "shadow-[inset_0_0_0_2px_theme(colors.gray[900])] dark:shadow-[inset_0_0_0_2px_theme(colors.gray[200])]"
+          : "shadow-none",
       ].join(" ")}
     >
       <div
-        className="grid h-10 w-20 place-content-center rounded-md border border-slate-100 text-xs/none  "
+        className="grid h-10 w-20 place-content-center rounded-md border border-gray-100 text-xs/none dark:border-gray-800  "
         style={{
           backgroundColor: color.value,
           color:

diff --git a/app/_features/color/ColorGridTable.tsx b/app/_features/color/ColorGridTable.tsx
@@ -19,14 +19,14 @@ export function ColorGridTable() {
       <table className=" relative w-full border-collapse">
         <thead>
           <tr>
-            <th className="border border-black bg-[linear-gradient(to_top_right,transparent_calc(50%-0.5px),theme(colors.black)_50%,transparent_calc(50%+0.5px))]  ">
+            <th className="border border-gray-900 bg-[linear-gradient(to_top_right,transparent_calc(50%-0.5px),theme(colors.gray[900])_50%,transparent_calc(50%+0.5px))] dark:border-gray-200 dark:bg-[linear-gradient(to_top_right,transparent_calc(50%-0.5px),theme(colors.gray[200])_50%,transparent_calc(50%+0.5px))]  ">
               <p className="text-end text-xs">Grade</p>
               <p className="text-start text-xs">Color</p>
             </th>
             {tailwindColorGrades.map((grade) => (
               <th
                 key={grade}
-                className=" border border-black px-2 py-2 text-sm"
+                className=" border border-gray-900 px-2 py-2 text-sm dark:border-gray-200"
               >
                 {grade}
               </th>
@@ -36,11 +36,14 @@ export function ColorGridTable() {
         <tbody>
           {getObjectKeys(tailwindColors.graded).map((name) => (
             <tr key={name}>
-              <th className=" border border-black px-2 py-2 text-sm">
+              <th className=" border border-gray-900 px-2 py-2 text-sm dark:border-gray-200">
                 {capitalizeFirstLetter(name)}
               </th>
               {getObjectKeys(tailwindColors.graded[name]).map((grade) => (
-                <td key={grade} className="border border-slate-200">
+                <td
+                  key={grade}
+                  className="border border-gray-200 dark:border-gray-700"
+                >
                   <Suspense
                     fallback={
                       <FallbackColorGridItem
@@ -67,12 +70,12 @@ export function ColorGridTable() {
           ))}
           {getObjectKeys(tailwindColors.single).map((name) => (
             <tr key={name}>
-              <th className=" border border-black px-2 py-2 align-top text-sm">
+              <th className=" border border-gray-900 px-2 py-2 align-top text-sm dark:border-gray-200">
                 {capitalizeFirstLetter(name)}
               </th>
               <td
                 colSpan={tailwindColorGrades.length}
-                className="border border-slate-200"
+                className="border border-gray-200 dark:border-gray-700"
               >
                 <Suspense
                   fallback={

diff --git a/app/_features/color/FallbackColorGridItem.tsx b/app/_features/color/FallbackColorGridItem.tsx
@@ -21,7 +21,7 @@ export function FallbackColorGridItem({ color }: Props) {
   return (
     <div className="grid gap-y-3 p-2 hover:shadow-[inset_0_0_0_2px_black]">
       <div
-        className="grid h-10 w-20 place-content-center rounded-md border border-slate-100 text-xs/none  "
+        className="grid h-10 w-20 place-content-center rounded-md border border-gray-100 text-xs/none dark:border-gray-800 "
         style={{
           backgroundColor: color.value,
         }}

diff --git a/app/_features/darkmode/ThemeSelect.tsx b/app/_features/darkmode/ThemeSelect.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useId } from "react";
+
+export function ThemeSelect() {
+  const { theme, setTheme } = useTheme();
+  const uid = useId();
+
+  return (
+    <p>
+      <label htmlFor={uid} className="sr-only">
+        カラーテーマを選択
+      </label>
+      <span className="grid items-center ">
+        <select
+          id={uid}
+          value={theme}
+          onChange={(e) => setTheme(e.target.value)}
+          className="inline-grid appearance-none rounded-lg border border-gray-900 py-2 pl-2 pr-6 text-base/none [grid-area:1/1] dark:border-gray-200 "
+        >
+          <option value="system">System</option>
+          <option value="dark">Dark</option>
+          <option value="light">Light</option>
+        </select>
+        <svg
+          aria-hidden="true"
+          height="24"
+          viewBox="0 -960 960 960"
+          width="24"
+          className=" pointer-events-none mr-1 size-5 justify-self-end fill-current [grid-area:1/1]"
+        >
+          <path d="M480-360 280-560h400L480-360Z" />
+        </svg>
+      </span>
+    </p>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
@@ -7,6 +7,6 @@
     @apply outline-none;
   }
   :focus-visible {
-    @apply outline outline-black;
+    @apply outline-2 outline-gray-900 dark:outline-gray-200 outline-offset-2;
   }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { ThemeProvider } from "next-themes";
+import { ThemeSelect } from "@/app/_features/darkmode/ThemeSelect";
 
 export const metadata: Metadata = {
   title: "Tailwind Color Contrast Grid",
@@ -11,16 +13,23 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="ja">
-      <body className="grid min-h-svh grid-rows-[1fr_auto] bg-white font-mono text-black">
-        <main className="px-4 py-8">{children}</main>
-        <footer className="p-4">
-          <p className="grid justify-center">
-            <a href="https://github.com/crow-fox">
-              <small className="text-sm">&copy; crow-fox</small>
-            </a>
-          </p>
-        </footer>
+    <html lang="ja" suppressHydrationWarning>
+      <body>
+        <ThemeProvider>
+          <div className="grid min-h-svh grid-rows-[auto_1fr_auto] bg-white font-mono text-gray-900 dark:bg-gray-950 dark:text-gray-200">
+            <header className=" grid justify-end px-4 pt-4">
+              <ThemeSelect />
+            </header>
+            <main className="px-4 py-8">{children}</main>
+            <footer className="p-4">
+              <p className="grid justify-center">
+                <a href="https://github.com/crow-fox">
+                  <small className="text-sm">&copy; crow-fox</small>
+                </a>
+              </p>
+            </footer>
+          </div>
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "colorjs.io": "^0.5.0",
     "next": "14.2.2",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "serve": "^14.2.2",

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -4,5 +4,6 @@ const config: Config = {
   content: ["./app/**/*.{ts,tsx}"],
   theme: {},
   plugins: [],
+  darkMode: ["selector", '[data-theme="dark"]'],
 };
 export default config;