dark mode style for view toggle

yyx990803 · yyx990803 · commit cceed9b8ecf5 · 2021-09-19T14:25:36.000-04:00
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
diff --git a/src/Repl.vue b/src/Repl.vue
@@ -45,7 +45,7 @@ provide('clear-console', toRef(props, 'clearConsole'))
   --bg: #fff;
   --bg-soft: #f8f8f8;
   --border: #ddd;
-  --text-light: #999;
+  --text-light: #888;
   --font-code: Menlo, Monaco, Consolas, 'Courier New', monospace;
   --color-branding: #42b883;
   --color-branding-dark: #416f9c;
@@ -54,7 +54,6 @@ provide('clear-console', toRef(props, 'clearConsole'))
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  color: var(--base);
   margin: 0;
   overflow: hidden;
   background-color: var(--bg-soft);
diff --git a/src/SplitPane.vue b/src/SplitPane.vue
@@ -96,15 +96,19 @@ function dragEnd() {
   display: none;
   z-index: 3;
   font-family: var(--font-code);
-  color: #444;
+  color: var(--text-light);
   position: absolute;
   left: 50%;
   bottom: 20px;
-  background-color: #fff;
+  background-color: var(--bg);
   padding: 8px 12px;
   border-radius: 8px;
   transform: translateX(-50%);
-  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+}
+
+.dark .toggler {
+  background-color: var(--bg);
 }
 @media (max-width: 720px) {
   .toggler {
