Fix light theme when system is in dark mode

breadthe · Oct 4, 2022 · 80379b3 · 80379b3
1 parent c32df49
commit 80379b3
Showing 1 changed file with 17 additions and 29 deletions.
diff --git a/src/app.css b/src/app.css
@@ -47,13 +47,16 @@ button {
     font-size: 1em;
     font-weight: 500;
     font-family: inherit;
+    color: theme("colors.white");
     background-color: theme("colors.blue.500");
     cursor: pointer;
     transition: border-color 0.25s;
 }
 
 button:hover {
     border-color: theme("colors.blue.600");
+    background-color: theme("colors.blue.600");
+    color: theme("colors.white");
 }
 
 button:focus,
@@ -94,37 +97,11 @@ button.transparent:hover {
     border-color: theme("colors.transparent");
 }
 
-html.dark body {
-    color: rgba(255, 255, 255, 0.87);
-    background-color: theme("colors.neutral.800");
-}
-
-html.dark button.transparent:hover {
-    color: rgba(255, 255, 255, 0.87);
-}
-
-@media (prefers-color-scheme: light) {
-    :root {
-        color: theme("colors.black");
-        background-color: theme("colors.white");
-    }
-
-    a:not(.hello-*):hover {
-        color: #747bff;
-    }
-
-    button {
-        background-color: theme("colors.blue.500");
-        color: theme("colors.white");
-    }
-
-    button:hover {
-        background-color: theme("colors.blue.600");
-        color: theme("colors.white");
-    }
+html body {
+    color: theme("colors.black");
+    background-color: theme("colors.white");
 }
 
-
 /* Forms */
 
 input,
@@ -145,3 +122,14 @@ select {
     height: theme("height.4");
     width: theme("width.4");
 }
+
+/* Dark mode */
+
+html.dark body {
+    color: rgba(255, 255, 255, 0.87);
+    background-color: theme("colors.neutral.800");
+}
+
+html.dark button.transparent:hover {
+    color: rgba(255, 255, 255, 0.87);
+}