From 25d859181670596507329f140306325499634a66 Mon Sep 17 00:00:00 2001
From: moris <moris@noreply.moris.day>
Date: Fri, 28 Feb 2025 21:09:35 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=80=E3=83=BC=E3=82=AF=E3=83=A2=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E3=82=92light-dark=E9=96=A2=E6=95=B0=E3=81=A7?=
 =?UTF-8?q?=E7=BD=AE=E3=81=8D=E6=8F=9B=E3=81=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.css                    | 70 +++++++++-------------------------
 src/routes/code/[slug]/app.css | 24 +++++-------
 2 files changed, 26 insertions(+), 68 deletions(-)

diff --git a/src/app.css b/src/app.css
index 310448f..c5c4b44 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,60 +1,24 @@
-@property --theme-color {
-    syntax: "<color>";
-    inherits: true;
-}
-@property --back-color {
-    syntax: "<color>";
-    inherits: true;
-}
-@property --grid-color {
-    syntax: "<color>";
-    inherits: true;
-}
-
 /* theme color */
-body, body.light {
-    --color-scheme: light;
-    --white-black: white;
-    --black-white: black;
-    --theme-color: hsl(85, 50%, 60%);
-    --back-color: hsl(60, 100%, 98%);
-    --font-color: #222;
-    --font-gray: #666;
-    --grid-color: #fff;
-    --code-color: #ddd;
-    --code-block: #30303a;
-    --frame-shadow: #999;
+body {
+    --white-black: light-dark(white, black);
+    --black-white: light-dark(black, white);
+    --theme-color: light-dark(hsl(85, 50%, 60%), teal);
+    --back-color: light-dark(hsl(60, 100%, 98%), hsl(210, 7%, 18%));
+    --font-color: light-dark(#222, #f5f5f5);
+    --font-gray:  light-dark(#666, #999);
+    --grid-color: light-dark(#fff, #333);
+    --code-color: light-dark(#ddd, #445);
+    --code-block: light-dark(#30303a, #23232a);
+    --frame-shadow: light-dark(#999, #111);
+
+    color-scheme: light dark;
+    &.light {color-scheme: light;}
+    &.dark  {color-scheme: dark;}
 }
 
-body.dark {
-    --color-scheme: dark;
-    --white-black: black;
-    --black-white: white;
-    --theme-color: teal;
-    --back-color: hsl(210, 7%, 18%);
-    --font-color: #f5f5f5;
-    --font-gray: #999;
-    --grid-color: #333;
-    --code-color: #445;
-    --code-block: #23232a;
-    --frame-shadow: #111;
-}
 
-@media(prefers-color-scheme: dark){
-    body {
-        --color-scheme: dark;
-        --white-black: black;
-        --black-white: white;
-        --theme-color: teal;
-        --back-color: hsl(210, 7%, 18%);
-        --font-color: #fafafa;
-        --font-gray: #999;
-        --grid-color: #333;
-        --code-color: #445;
-        --code-block: #23232a;
-        --frame-shadow: #111;
-    }
-}
+
+
 
 /* general */
 body {
diff --git a/src/routes/code/[slug]/app.css b/src/routes/code/[slug]/app.css
index abee866..ea98a9c 100644
--- a/src/routes/code/[slug]/app.css
+++ b/src/routes/code/[slug]/app.css
@@ -2,23 +2,17 @@
     height: 100%;
     background-color: var(--white-black);
 
-    --back-color: white;  /*rgb(240 238 245)*/
-    --head-color: rgb(245, 245, 245);  /*rgb(244 243 250)*/
+    --back-color: light-dark(white, rgb(43 48 55));
+    --head-color: light-dark(#f5f5f5, rgb(58 60 66));
     --divider-color: rgb(220 220 220);
-    --border-color: #bbb;
-    --shadow-color: #0009;
-    --white-black: #fff;
-    --font-color: #222;
+    --border-color: light-dark(#bbb, #222);
+    --shadow-color: light-dark(#0009, #000);
+    --white-black: light-dark(#fff, #000);
+    --font-color: light-dark(#222, #f5f5f5);
     
-    @media(prefers-color-scheme: dark){
-        --back-color: rgb(43 48 55);
-        --head-color: rgb(58 60 66);
-        --divider-color: #222;
-        --border-color: #555;
-        --shadow-color: #000;
-        --white-black: #000;
-        --font-color: #f5f5f5;
-    }
+    color-scheme: light dark;
+    &.light {color-scheme: light;}
+    &.dark  {color-scheme: dark;}
 }
 
 body {