feat: dark mode for prefers-color-scheme

xihale · Apr 5, 2024 · e74fcf7 · e74fcf7
1 parent 44cf555
commit e74fcf7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/src/app/[id]/page.module.scss b/src/app/[id]/page.module.scss
@@ -10,8 +10,8 @@
   z-index: 10;
   top: 0;
   width: 50%;
-  min-width: 340px;
-  background: #ffffed;
+  min-width: 45rem;
+  background: var(--card-bg-color);
   margin: auto;
   padding: 1rem;
   border-radius: 0.5rem;
@@ -28,6 +28,7 @@
     min-width: 100vw;
     box-sizing: border-box;
     padding-right: 0.5rem;
+    border-radius: 0;
   }
 
   .meta{
@@ -54,7 +55,7 @@
 
 .back{
   z-index: 1;
-  background: #00000045;
+  background: var(--back-color);
   position: fixed;
   width: 100vw;
   height: 100vh;

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -7,4 +7,19 @@ a{
   color: inherit;
   text-decoration: inherit;
   cursor: default;
+}
+
+:root{
+  --card-bg-color: #ffffed;
+  --back-color: #00000045;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  :root{
+    --card-bg-color: #000;
+    --back-color: #ffffff45;
+  }
 }
diff --git a/src/ui/PoemList.module.scss b/src/ui/PoemList.module.scss
@@ -15,7 +15,7 @@
   padding: 1.25rem;
   border-radius: 0.25rem;
   box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
-  background-color: #ffffed;
+  background-color: var(--card-bg-color);
 
   display: flex;
   flex-direction: column;