Add support for dark mode

src/ncounter/About.svelte

@@ -17,7 +17,9 @@ const dispatch = createEventDispatcher();
 </script>
 <style>
 .about {
-    background-color: white;
+    background-color: var(--background-primary);
+    color: var(--text-primary);
+    
     position: fixed;
     top: 0;
     right: 0;

src/ncounter/App.svelte

@@ -83,7 +83,7 @@ function add(){
         overflow: auto;
         flex: 1 0 0;
 
-        background-color: #8baec6;
+        background-color: var(--background-color);
     }
 
     .tool-bar {
@@ -91,16 +91,18 @@ function add(){
 
         display: flex;
 
-        border-top: 2px solid #3A86B7;
+        border-top: 2px solid var(--button-color);
+        background-color: var(--background-primary);
+        color: var(--text-primary);
     }
 
     .tool-bar > button {
-        background-color: #3A86B7;
+        background-color: var(--button-color);
-        color: white;
+        color: var(--text-inverse);
     }
 
     .tool-bar > button:focus, .tool-bar > button:hover {
-        border: 2px solid #303030;
+        border: 2px solid var(--highlight-color);
     }
 
     .about {

src/ncounter/Counter.svelte

@@ -123,7 +123,8 @@ function remove(){
 .counter{
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 
-    background-color: #FCFCFC;
+    background-color: var(--background-primary);
+    color: var(--text-primary);
 
     margin-bottom: 4px;
 

src/ncounter/History.svelte

@@ -52,6 +52,7 @@ $: dataset = counter.history.reduce((acc, x) => {
         labels: [...acc.labels, x.time],
         datasets: [
             {
+                ...acc.datasets[0],
                 data: [...acc.datasets[0].data, x.value]
             }
         ]
@@ -60,6 +61,9 @@ $: dataset = counter.history.reduce((acc, x) => {
     labels: [],
     datasets: [
         {
+            borderColor: darkMode ? 'rgba(255, 255, 255, 0.25)' : undefined,
+            backgroundColor: darkMode ? 'rgba(255, 255, 255, 0.25)' : undefined,
+            lineTension: 0.1,
             data: []
         }
     ]
@@ -69,8 +73,26 @@ export let counterId;
 
 let chartEl;
 
+const themeMatch = window.matchMedia('(prefers-color-scheme: dark)');
+let darkMode = themeMatch.matches;
+themeMatch.addListener((e) => {
+    darkMode = e.matches;
+});
+
 $: {
     if(chartEl){
+        const theme = darkMode ?
+            {
+                gridLines: {
+                    color: 'rgba(255, 255, 255, 0.1)',
+                    zeroLineColor: 'rgba(255, 255, 255, 0.25)'
+                },
+                ticks: {
+                    fontColor: '#FFFFFF'
+                }
+            } :
+            {} //Use defaults for light mode;
+
         new Chart(chartEl, {
             type: 'line',
             data: dataset,
@@ -78,8 +100,14 @@ $: {
                 scales: {
                     xAxes: [
                         {
+                            ...theme,
                             type: 'time'
                         }
+                    ],
+                    yAxes: [
+                        {
+                            ...theme
+                        }
                     ]
                 },
                 legend: {
@@ -96,7 +124,9 @@ function close(){
 </script>
 <style>
     .history-container{
-        background-color: white;
+        background-color: var(--background-primary);
+        color: var(--text-primary);
+
         position: fixed;
         top: 0;
         right: 0;
@@ -137,13 +167,17 @@ function close(){
     .history th {
         font-weight: 600;
         position: sticky;
-        background-color: #CDCDCD;
+        background-color: var(--background-alternate);
         top: 0;
         text-align: left;
     }
 
-    .history tr:nth-child(even){
+    .history tbody tr:nth-child(odd){
-        background-color: #F0F0F0;
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .history tbody tr:nth-child(even){
+        background-color: rgba(0, 0, 0, 0.1);
     }
 
     .history td, .history th {

src/ncounter/Licenses.svelte

@@ -34,7 +34,8 @@ pre {
     margin: 5px;
     padding: 5px;
     white-space: pre-wrap;
-    background-color: #F0F0F0;
+    background-color: var(--background-alternate);
+    color: var(--text-primary);
     overflow-wrap: break-word;
 }
 </style>

src/ncounter/MyProgress.svelte

@@ -14,8 +14,10 @@ $: style = `width: ${(Math.min(1, value / max) * 100)}%`;
 
 		margin: 3px 0;
 
-		background-color: #F0F0F0;
+		background-color: var(--background-primary);
-		border: 1px solid black;
+		color: var(--text-primary);
+
+		border: 1px solid var(--text-primary);
 		height: 20px;
 
 		position: relative;
@@ -23,7 +25,7 @@ $: style = `width: ${(Math.min(1, value / max) * 100)}%`;
 
 	.progress-bar > .progress {
 		display: block;
-		background-color: #C0CFC0;
+		background-color: var(--background-color);
 		height: 100%;
 	}
 

src/ncounter/site.css

@@ -22,10 +22,36 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
+:root {
+    --background-color: #8baec6;
+    --button-color: #3A86B7;
+    --highlight-color: #303030;
+
+    --background-primary: #FCFCFC;
+    --background-alternate: #CDCDCD;
+    --text-primary: rgba(0, 0, 0, 0.87);
+    --text-inverse: #FFFFFF;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #1A577F;
+        --button-color: #609EC7;
+        --highlight-color: #CFCFCF;
+    
+        --background-primary: #0C0C0C;
+        --background-alternate: #404040;
+        --text-primary: #FFFFFF;
+        --text-inverse: rgba(0, 0, 0, 0.87);
+    }
+}
+
 button {
     background: 0;
     border: 0;
     
+    color: var(--text-primary);
+
     width: 36px;
     height: 36px;
 
@@ -39,7 +65,7 @@ button {
 }
 
 button:focus, button:hover {
-    border: 2px solid #3A86B7;
+    border: 2px solid var(--button-color);
 }
 
 .dialog {
@@ -61,7 +87,8 @@ button:focus, button:hover {
 }
 
 .dialog-content {
-    background-color: #FCFCFC;
+    background-color: var(--background-primary);
+    color: var(--text-primary);
     pointer-events: all;
 
     width: 315px;
@@ -100,7 +127,7 @@ button:focus, button:hover {
 
 .dialog-content button:focus, .dialog-content button:hover {
     border: 0;
-    outline: 2px solid #3A86B7;
+    outline: 2px solid var(--button-color);
 }
 
 .dialog-content h1 {