Fix FakeTMP on light mode

SlopCrew · Nov 28, 2023 · 5ea696b · 5ea696b
1 parent f49c80e
commit 5ea696b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/components/FakeTMP.tsx b/src/components/FakeTMP.tsx
@@ -37,7 +37,7 @@ function parse(temp: string): React.ReactNode[] {
   function add(str: string) {
     if (currentColor == null) {
       spans.push(
-        <span style={{ color: "#ffffff" }} key={spans.length}>
+        <span className="tmp" key={spans.length}>
           {str}
         </span>
       );

diff --git a/src/index.css b/src/index.css
@@ -15,6 +15,18 @@
   --danger-inverse: #fff;
 }
 
+@media (prefers-color-scheme: dark) {
+  .tmp {
+    color: #ffffff;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .tmp {
+    color: #000000;
+  }
+}
+
 .currentAccount {
   align-items: center;
   gap: 0.5rem;