テーマ周りを調整

tasuren · Jan 12, 2025 · db9da07 · db9da07
1 parent 2c1c15e
commit db9da07
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 0 deletions.
diff --git a/src/components/Paper.tsx b/src/components/Paper.tsx
@@ -94,6 +94,8 @@ function Paper() {
                 "p-2",
                 "outline",
                 "outline-1",
+                "focus:outline-black",
+                "dark:focus:outline-white",
                 "min-h-40",
                 "my-2",
                 "mx-3",

diff --git a/src/lib/theme.ts b/src/lib/theme.ts
@@ -23,4 +23,7 @@ export function applyThemeToDOM(theme: Theme) {
 
     // カラースキーマを変更
     document.documentElement.style.colorScheme = absTheme;
+
+    // Tailwind CSSのためのテーマ情報を設定
+    document.documentElement.setAttribute("data-theme", absTheme);
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 const CONFIG = {
     content: ["./src/**/*.{js,jsx,ts,tsx}", "index.html"],
+    darkMode: ["selector", '[data-theme="dark"]'],
     theme: {
         extend: {},
     },