dark mode support

JuliaPluto · Jan 9, 2022 · 3e8ca53 · 3e8ca53
1 parent 8233b25
commit 3e8ca53
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git 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
@@ -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>