Add light theme to damo.io

dam5s · Feb 15, 2024 · 7844154 · 7844154
1 parent f805110
commit 7844154
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/Damo.Io.Server/www/styles/app.css b/Damo.Io.Server/www/styles/app.css
@@ -25,6 +25,23 @@
     --emphasis-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
 }
 
+@media (prefers-color-scheme: light) {
+    :root {
+        --bg-color: #eee;
+        --fg-color: #444;
+        --card-color: rgba(0, 0, 0, 0.05);
+
+        --menu-item-bg-not-selected: color-mix(in srgb, var(--primary-color), transparent 90%);
+        --menu-item-bg-selected: color-mix(in srgb, var(--primary-color), transparent 80%);
+        --menu-item-bg-hover: color-mix(in srgb, var(--primary-color), transparent 70%);
+
+        --article-date-text-color: rgba(0, 0, 0, 0.5);
+
+        --card-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
+        --emphasis-shadow: 1px 0 1px rgba(0, 0, 0, 0.3);
+    }
+}
+
 html {
     font-size: 62.5%;
     background-color: var(--bg-color);
@@ -158,6 +175,11 @@ a:link, a:hover, a:visited, a:active {
     color: var(--link-color);
 }
 
+a:active {
+    position: relative;
+    top: 1px;
+}
+
 p {
     margin: 0 0 2.4rem;
 }