Merge pull request #25 from ruslan-sh/darkScheme

Add Dark Scheme #20
grimalschi · Aug 28, 2022 · 313c43c · 313c43c
2 parents e3c2e4e + 2168dcd
commit 313c43c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
 <body>
     <div class="interface">
         <div class="output" id="output"></div>
-        <textarea class="input" id="input"># Calque - reactive calculator
+        <textarea class="input" id="input" spellcheck="false"># Calque - reactive calculator
 
 # Expressions
 2 + 2 * 2

diff --git a/style.css b/style.css
@@ -20,7 +20,7 @@ body {
     width: 100%;
     border: none;
     margin: 0;
-    font-family: 'Menlo', 'Monaco', courier, monospace;
+    font-family: 'Menlo', 'Monaco', 'Consolas', courier, monospace;
     font-size: 16px;
     line-height: 1.5;
     box-sizing: border-box;
@@ -80,4 +80,31 @@ body {
 
 .interface .output .error {
     color: red;
-}
+}
+
+@media (prefers-color-scheme: dark) {
+    body, textarea {
+        background-color: #212121;
+        color: #EEEEEE;
+    }
+
+    .interface .output div.highlight {
+        background-color: #424242;
+    }
+
+    .interface .output .code {
+        color: #616161;
+    }
+
+    .interface .output .hint:before {
+        color: #616161;
+    }
+
+    .interface .output .help {
+        color: #757575;
+    }
+
+    .interface .output .result {
+        color: #757575;
+    }
+}