modo oscuro

fixes #14

src/app.css

@@ -8,6 +8,12 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
+
+  --background: white;
+  --foreground: black;
+  --transparentish: rgba(0, 0, 0, 0.2);
+  --accent-bg: #cbd5e1;
+  --accent-fg: #1e293b;
 }
 
 *,
@@ -21,4 +27,20 @@ body,
 main {
   margin: 0;
   min-height: 100vh;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+a {
+  color: var(--accent-fg);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #18181b;
+    --foreground: #d4d4d8;
+    --transparentish: rgba(255, 255, 255, 0.2);
+    --accent-bg: #334155;
+    --accent-fg: #94a3b8;
+  }
 }

src/components/Modal.svelte

@@ -106,8 +106,8 @@
   .backdrop {
     position: fixed;
     inset: 0;
-    background: #6b7280;
-    opacity: 0.75;
+    background: var(--background);
+    opacity: 0.9;
   }
 
   .content-alignment {
@@ -123,11 +123,16 @@
 
   .content {
     overflow-y: none;
-    background: white;
+    background: var(--background);
     padding: 16px 20px;
     border-radius: 16px;
     min-width: 50%;
     min-height: 50%;
+
+    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+      0 8px 10px -6px rgb(0 0 0 / 0.1);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
   h3 {

src/editor/BubbleMenu.svelte

@@ -181,8 +181,8 @@ transform: scale(${1 / viewport.scale});
     /* https://wicg.github.io/visual-viewport/examples/fixed-to-keyboard.html */
     transform-origin: left bottom;
 
-    background: white;
-    border-top: 1px solid #ccc;
+    background: var(--background);
+    border-top: 1px solid var(--accent-bg);
     width: 100%;
 
     visibility: visible;

src/editor/bubblemenu/Button.svelte

@@ -32,10 +32,10 @@
   /* https://stackoverflow.com/a/64553121 */
   @media (hover: hover) and (pointer: fine) {
     button:hover {
-      background: #eee;
+      background: var(--transparentish);
     }
   }
   button.active {
-    background: #ddd;
+    background: var(--accent-bg);
   }
 </style>

src/editor/editor.css

@@ -13,8 +13,8 @@
   position: sticky;
   top: 0px;
   z-index: 69;
-  background: white;
-  border-bottom: 1px solid #bbb;
+  background: var(--background, white);
+  border-bottom: 1px solid var(--accent-bg);
 }
 
 .editor .menubar button {
@@ -26,14 +26,15 @@
   padding: 0.4em 0.6em;
   margin: 0.2em;
   transition: all 0.2s;
-}
-
-.editor .menubar button.active {
-  background: #ddd;
+  color: var(--foreground);
 }
 
 .editor .menubar button:hover {
-  background: #eee;
+  background: var(--transparentish);
+}
+
+.editor .menubar button.active {
+  background: var(--accent-bg);
 }
 
 .editor .menubar button svg {
@@ -67,8 +68,8 @@
 }
 
 .ProseMirror blockquote {
-  background-color: #f5f5f5;
-  border-left: 5px solid #dbdbdb;
+  background-color: var(--transparentish);
+  border-left: 5px solid var(--foreground);
   padding: 1.25em 1.5em;
   margin: 0.5em;
 }