Add dark theme

felipeog · Mar 1, 2022 · b5e942f · b5e942f
1 parent 1b6c289
commit b5e942f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/src/components/EmptyCard/index.module.css b/src/components/EmptyCard/index.module.css
@@ -8,9 +8,9 @@
   font-family: monospace;
   font-weight: bold;
   font-size: 1.2rem;
-  color: #aaa;
   text-align: center;
-  border: 1px solid #e8e8e8;
+  color: var(--gray300);
+  border: 1px solid var(--gray200);
   border-top: none;
   border-left: none;
 }
diff --git a/src/css/base.css b/src/css/base.css
@@ -5,5 +5,5 @@
 }
 
 html {
-  background-color: #f8f8f8;
+  background-color: var(--gray100);
 }
diff --git a/src/css/variables.css b/src/css/variables.css
@@ -0,0 +1,13 @@
+:root {
+  --gray100: #f8f8f8;
+  --gray200: #e8e8e8;
+  --gray300: #aaa;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --gray100: #111;
+    --gray200: #222;
+    --gray300: #888;
+  }
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,7 @@
 import * as ReactDOM from 'react-dom'
 
 import './css/reset.css'
+import './css/variables.css'
 import './css/base.css'
 import { App } from './App'
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,5 +5,5 @@ @@
     }
     html {
-      background-color: #f8f8f8;
+      background-color: var(--gray100);
     }