From 3e8ca532bd04a79b9957ceac1920f3bfb17871bf Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Sun, 9 Jan 2022 22:32:23 +0100
Subject: [PATCH] dark mode support

---
 assets/clock.css  | 15 ++++++++++-----
 src/Scrubbable.jl |  1 +
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/assets/clock.css b/assets/clock.css
index 01165bdd..d6e492ec 100644
--- a/assets/clock.css
+++ b/assets/clock.css
@@ -15,6 +15,11 @@ plutoui-analog {
     width: 20px;
     height: 20px;
 }
+@media (prefers-color-scheme: dark) {
+    plutoui-analog {
+        filter: invert(1) hue-rotate(180deg);
+    }
+}
 
 plutoui-analog > * {
     display: block;
@@ -48,7 +53,7 @@ plutoui-clock input {
 }
 
 plutoui-clock span {
-    font-family: "Roboto Mono", monospace;
+    font-family: 'Roboto Mono', monospace;
     font-size: 0.75rem;
     word-spacing: -0.2rem;
 }
@@ -59,11 +64,11 @@ plutoui-clock span#unit {
 }
 
 plutoui-clock span#unit::after {
-    content: "secs / tick";
+    content: 'secs / tick';
 }
 
 plutoui-clock.inverted span#unit::after {
-    content: "ticks / sec";
+    content: 'ticks / sec';
 }
 
 plutoui-clock button {
@@ -72,11 +77,11 @@ plutoui-clock button {
 }
 
 plutoui-clock button::after {
-    content: "Stop";
+    content: 'Stop';
 }
 
 plutoui-clock.stopped button::after {
-    content: "Start";
+    content: 'Start';
 }
 
 plutoui-clock.fixed span,
diff --git a/src/Scrubbable.jl b/src/Scrubbable.jl
index d3ccad34..49eb230b 100644
--- a/src/Scrubbable.jl
+++ b/src/Scrubbable.jl
@@ -284,6 +284,7 @@ begin
 			<span title="Click and drag this number left or right!" style="cursor: col-resize;
 			touch-action: none;
 			background: rgb(252, 209, 204);
+			color: black;
 			padding: 0em .2em;
 			border-radius: .3em;
 			font-weight: bold;">$(s.default)</span>