add theming

Author: barelyhuman

index.html

@@ -15,9 +15,18 @@
         rel="stylesheet"
         href="https://unpkg.com/[email protected]/styles/ascetic.css"
     /></noscript>
-    
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#ffffff" />
+    <meta
+      name="theme-color"
+      content="#e9eaeb"
+      media="(prefers-color-scheme: light)"
+    />
+    <meta
+      name="theme-color"
+      content="#232b32"
+      media="(prefers-color-scheme: dark)"
+    />
     <title>Mark</title>
 
     <!-- Primary Meta Tags -->

src/components/button.vue

@@ -16,14 +16,15 @@ button {
   justify-content: center;
   align-items: center;
   padding: 8px;
-  background: #f3f3f3;
+  background: var(--overlay);
+  color: var(--text);
   outline: black;
   border: 0px;
   border-radius: 6px;
 }
 
 button:hover {
-  background: #ddd;
+  background: var(--surface);
 }
 
 button.ghost {

src/components/menu-item.vue

@@ -24,11 +24,11 @@ defineProps({
   padding-bottom: 8px;
   font-size: 12px;
   text-transform: uppercase;
-  color: #333;
+  color:var(--subtle);
 }
 
 .item-wrapper:hover {
-  background: #f3f3f3;
+  background: var(--surface);
 }
 
 .item-content {
@@ -38,7 +38,7 @@ defineProps({
 
 .menu-modifier {
   font-size: 10px;
-  background: #f3f3f3;
+  background: var(--surface);
   border-radius: 6px;
   padding: 4px;
 }

src/components/menu.vue

@@ -50,7 +50,8 @@ const state = reactive({ dropdownOpen: false });
   padding-top: 8px;
   padding-bottom: 8px;
   width: 30em;
-  background: white;
+  background: var(--overlay);
+  color:var(--subtle);
   border-radius: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
   z-index: 20;

src/styles/index.css

@@ -3,6 +3,21 @@
 
 :root {
   --base-spacing: 4px;
+  --base: #e9eaeb;
+  --overlay: #d3d5d6;
+  --surface: #bdbfc2;
+  --text: #030405;
+  --subtle: #07090a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --base: #232b32;
+    --overlay: #20272d;
+    --surface: #1c2228;
+    --text: white;
+    --subtle: #e9eaeb;
+  }
 }
 
 * {
@@ -11,6 +26,8 @@
 
 body {
   font-family: "IBM Plex Sans", sans-serif;
+  background: var(--base);
+  color: var(--text);
 }
 
 a {
@@ -22,8 +39,6 @@ a {
   line-height: 2;
 }
 
-
-
 .preview-dot {
   height: 12px;
   width: 12px;