From db9da070ff3a494a5c975b3d4ade101e1f93b9d6 Mon Sep 17 00:00:00 2001
From: Takagi Tasuku <tasuren@outlook.jp>
Date: Sun, 12 Jan 2025 21:32:02 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=86=E3=83=BC=E3=83=9E=E5=91=A8=E3=82=8A?=
 =?UTF-8?q?=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Paper.tsx | 2 ++
 src/lib/theme.ts         | 3 +++
 tailwind.config.js       | 1 +
 3 files changed, 6 insertions(+)

diff --git a/src/components/Paper.tsx b/src/components/Paper.tsx
index be8b735..9a02c15 100644
--- 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
index 6a3ca34..28785c3 100644
--- 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
index f84ce4c..59850bf 100644
--- 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: {},
     },