From 141a575a3a93734e134c3406c1598edd24f2000d Mon Sep 17 00:00:00 2001
From: harehare <harehare1110@gmail.com>
Date: Sun, 12 Apr 2026 19:38:17 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(playground):=20fix=20theme?=
 =?UTF-8?q?=20switching=20not=20working=20in=20production=20build?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lightningcss transforms light-dark() into a @media (prefers-color-scheme)
polyfill using --lightningcss-light/dark variables. Setting colorScheme
via JS had no effect on these variables in the production build.

- Update --lightningcss-light/dark CSS variables when switching themes
- Remove duplicate :root block with hardcoded hex values to prevent
  CSS variable override conflicts during minification
- Replace hardcoded hex colors with CSS variables using light-dark()
- Fix h1 inline style using hardcoded #67b8e3 instead of CSS variable
---
 packages/mq-playground/src/Playground.tsx | 24 ++++++++++++++++----
 packages/mq-playground/src/index.css      | 27 +++++++++--------------
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/packages/mq-playground/src/Playground.tsx b/packages/mq-playground/src/Playground.tsx
index 462b10e4c..836359374 100644
--- a/packages/mq-playground/src/Playground.tsx
+++ b/packages/mq-playground/src/Playground.tsx
@@ -371,8 +371,16 @@ export const Playground = () => {
 
     const themeParam = urlParams.get("theme");
     if (themeParam) {
-      document.documentElement.style.colorScheme =
-        themeParam === "dark" ? "dark" : "light";
+      const isDark = themeParam === "dark";
+      document.documentElement.style.colorScheme = isDark ? "dark" : "light";
+      document.documentElement.style.setProperty(
+        "--lightningcss-light",
+        isDark ? " " : "initial"
+      );
+      document.documentElement.style.setProperty(
+        "--lightningcss-dark",
+        isDark ? "initial" : " "
+      );
     }
 
     // Update sidebar visibility from URL parameter if present
@@ -1004,8 +1012,16 @@ export const Playground = () => {
 
     if (theme === "system") {
       document.documentElement.style.colorScheme = "";
+      document.documentElement.style.removeProperty("--lightningcss-light");
+      document.documentElement.style.removeProperty("--lightningcss-dark");
+    } else if (theme === "dark") {
+      document.documentElement.style.colorScheme = "dark";
+      document.documentElement.style.setProperty("--lightningcss-light", " ");
+      document.documentElement.style.setProperty("--lightningcss-dark", "initial");
     } else {
-      document.documentElement.style.colorScheme = theme;
+      document.documentElement.style.colorScheme = "light";
+      document.documentElement.style.setProperty("--lightningcss-light", "initial");
+      document.documentElement.style.setProperty("--lightningcss-dark", " ");
     }
   }, [
     vimModeEnabled,
@@ -1519,7 +1535,7 @@ export const Playground = () => {
             >
               <img src="./logo.svg" className="logo-icon" />
             </a>
-            <h1 style={{ color: "#67b8e3" }}>mq</h1>
+            <h1 style={{ color: "var(--header-title-color)" }}>mq</h1>
           </div>
           <div
             style={{
diff --git a/packages/mq-playground/src/index.css b/packages/mq-playground/src/index.css
index 5e9863b65..dba152d2e 100644
--- a/packages/mq-playground/src/index.css
+++ b/packages/mq-playground/src/index.css
@@ -1,14 +1,3 @@
-:root {
-  --primary-color: #20638f;
-  --secondary-color: #1E1E1E;
-  --dark-color: #123850;
-  --light-color: #e8f4fc;
-  --lighter-blue: #f0f8ff;
-  --accent-blue: #5dade2;
-  --text-color: #2c3e50;
-  --code-bg: #eef7fd;
-}
-
 body {
   margin: 0;
 }
@@ -17,7 +6,7 @@ body {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background-color: #f0f4f8;
+  background-color: var(--playground-bg);
   font-family: "Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   overflow: hidden;
 }
@@ -165,7 +154,7 @@ body {
 
 .execution-time {
   background-color: light-dark(rgba(103, 184, 227, 0.15), rgba(103, 184, 227, 0.2));
-  color: light-dark(#67b8e3, #67b8e3);
+  color: var(--header-title-color);
   padding: 2px 8px;
   border-radius: 4px;
   font-size: 11px;
@@ -252,7 +241,7 @@ body {
 
 .button {
   background-color: transparent;
-  color: var(--primary-color);
+  color: var(--button-color);
   border: none;
   padding: 4px 8px;
   font-size: 0.875rem;
@@ -270,7 +259,7 @@ body {
 }
 
 .button:hover {
-  color: #88acd2;
+  color: var(--button-hover-color);
   font-weight: 600;
 }
 
@@ -291,7 +280,7 @@ body {
 
 .format-button:disabled,
 .run-button:disabled {
-  background-color: #a0aec0;
+  background-color: var(--disabled-bg);
   cursor: not-allowed;
 }
 
@@ -302,7 +291,6 @@ body {
 .loading-message,
 .empty-message {
   padding: 16px;
-  color: #718096;
   background-color: var(--secondary-color);
   height: 100%;
 }
@@ -329,6 +317,11 @@ body {
   --info-color: light-dark(#4299e1, #63b3ed);
   --warning-color: light-dark(#ed8936, #f6ad55);
   --hover-bg: light-dark(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
+  --playground-bg: light-dark(#f0f4f8, #1e1e1e);
+  --button-color: light-dark(#3182ce, #63b3ed);
+  --button-hover-color: light-dark(#2c5282, #88acd2);
+  --disabled-bg: light-dark(#a0aec0, #4a5568);
+  --header-title-color: light-dark(#67b8e3, #5dade2);
 
   /* File tree colors */
   --tree-bg: light-dark(#f7fafc, #252526);