- commit
- af8eda9
- parent
- b5d590d
- author
- CheddarCrisp
- date
- 2020-03-04 04:02:09 +0100 CET
Add support for dark mode
7 files changed,
+87,
-18
+3,
-1
1@@ -17,7 +17,9 @@ const dispatch = createEventDispatcher();
2 </script>
3 <style>
4 .about {
5- background-color: white;
6+ background-color: var(--background-primary);
7+ color: var(--text-primary);
8+
9 position: fixed;
10 top: 0;
11 right: 0;
+7,
-5
1@@ -83,7 +83,7 @@ function add(){
2 overflow: auto;
3 flex: 1 0 0;
4
5- background-color: #8baec6;
6+ background-color: var(--background-color);
7 }
8
9 .tool-bar {
10@@ -91,16 +91,18 @@ function add(){
11
12 display: flex;
13
14- border-top: 2px solid #3A86B7;
15+ border-top: 2px solid var(--button-color);
16+ background-color: var(--background-primary);
17+ color: var(--text-primary);
18 }
19
20 .tool-bar > button {
21- background-color: #3A86B7;
22- color: white;
23+ background-color: var(--button-color);
24+ color: var(--text-inverse);
25 }
26
27 .tool-bar > button:focus, .tool-bar > button:hover {
28- border: 2px solid #303030;
29+ border: 2px solid var(--highlight-color);
30 }
31
32 .about {
+2,
-1
1@@ -123,7 +123,8 @@ function remove(){
2 .counter{
3 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
4
5- background-color: #FCFCFC;
6+ background-color: var(--background-primary);
7+ color: var(--text-primary);
8
9 margin-bottom: 4px;
10
+38,
-4
1@@ -52,6 +52,7 @@ $: dataset = counter.history.reduce((acc, x) => {
2 labels: [...acc.labels, x.time],
3 datasets: [
4 {
5+ ...acc.datasets[0],
6 data: [...acc.datasets[0].data, x.value]
7 }
8 ]
9@@ -60,6 +61,9 @@ $: dataset = counter.history.reduce((acc, x) => {
10 labels: [],
11 datasets: [
12 {
13+ borderColor: darkMode ? 'rgba(255, 255, 255, 0.25)' : undefined,
14+ backgroundColor: darkMode ? 'rgba(255, 255, 255, 0.25)' : undefined,
15+ lineTension: 0.1,
16 data: []
17 }
18 ]
19@@ -69,8 +73,26 @@ export let counterId;
20
21 let chartEl;
22
23+const themeMatch = window.matchMedia('(prefers-color-scheme: dark)');
24+let darkMode = themeMatch.matches;
25+themeMatch.addListener((e) => {
26+ darkMode = e.matches;
27+});
28+
29 $: {
30 if(chartEl){
31+ const theme = darkMode ?
32+ {
33+ gridLines: {
34+ color: 'rgba(255, 255, 255, 0.1)',
35+ zeroLineColor: 'rgba(255, 255, 255, 0.25)'
36+ },
37+ ticks: {
38+ fontColor: '#FFFFFF'
39+ }
40+ } :
41+ {} //Use defaults for light mode;
42+
43 new Chart(chartEl, {
44 type: 'line',
45 data: dataset,
46@@ -78,8 +100,14 @@ $: {
47 scales: {
48 xAxes: [
49 {
50+ ...theme,
51 type: 'time'
52 }
53+ ],
54+ yAxes: [
55+ {
56+ ...theme
57+ }
58 ]
59 },
60 legend: {
61@@ -96,7 +124,9 @@ function close(){
62 </script>
63 <style>
64 .history-container{
65- background-color: white;
66+ background-color: var(--background-primary);
67+ color: var(--text-primary);
68+
69 position: fixed;
70 top: 0;
71 right: 0;
72@@ -137,13 +167,17 @@ function close(){
73 .history th {
74 font-weight: 600;
75 position: sticky;
76- background-color: #CDCDCD;
77+ background-color: var(--background-alternate);
78 top: 0;
79 text-align: left;
80 }
81
82- .history tr:nth-child(even){
83- background-color: #F0F0F0;
84+ .history tbody tr:nth-child(odd){
85+ background-color: rgba(255, 255, 255, 0.1);
86+ }
87+
88+ .history tbody tr:nth-child(even){
89+ background-color: rgba(0, 0, 0, 0.1);
90 }
91
92 .history td, .history th {
+2,
-1
1@@ -34,7 +34,8 @@ pre {
2 margin: 5px;
3 padding: 5px;
4 white-space: pre-wrap;
5- background-color: #F0F0F0;
6+ background-color: var(--background-alternate);
7+ color: var(--text-primary);
8 overflow-wrap: break-word;
9 }
10 </style>
+5,
-3
1@@ -14,8 +14,10 @@ $: style = `width: ${(Math.min(1, value / max) * 100)}%`;
2
3 margin: 3px 0;
4
5- background-color: #F0F0F0;
6- border: 1px solid black;
7+ background-color: var(--background-primary);
8+ color: var(--text-primary);
9+
10+ border: 1px solid var(--text-primary);
11 height: 20px;
12
13 position: relative;
14@@ -23,7 +25,7 @@ $: style = `width: ${(Math.min(1, value / max) * 100)}%`;
15
16 .progress-bar > .progress {
17 display: block;
18- background-color: #C0CFC0;
19+ background-color: var(--background-color);
20 height: 100%;
21 }
22
+30,
-3
1@@ -22,10 +22,36 @@ body {
2 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
3 }
4
5+:root {
6+ --background-color: #8baec6;
7+ --button-color: #3A86B7;
8+ --highlight-color: #303030;
9+
10+ --background-primary: #FCFCFC;
11+ --background-alternate: #CDCDCD;
12+ --text-primary: rgba(0, 0, 0, 0.87);
13+ --text-inverse: #FFFFFF;
14+}
15+
16+@media (prefers-color-scheme: dark) {
17+ :root {
18+ --background-color: #1A577F;
19+ --button-color: #609EC7;
20+ --highlight-color: #CFCFCF;
21+
22+ --background-primary: #0C0C0C;
23+ --background-alternate: #404040;
24+ --text-primary: #FFFFFF;
25+ --text-inverse: rgba(0, 0, 0, 0.87);
26+ }
27+}
28+
29 button {
30 background: 0;
31 border: 0;
32
33+ color: var(--text-primary);
34+
35 width: 36px;
36 height: 36px;
37
38@@ -39,7 +65,7 @@ button {
39 }
40
41 button:focus, button:hover {
42- border: 2px solid #3A86B7;
43+ border: 2px solid var(--button-color);
44 }
45
46 .dialog {
47@@ -61,7 +87,8 @@ button:focus, button:hover {
48 }
49
50 .dialog-content {
51- background-color: #FCFCFC;
52+ background-color: var(--background-primary);
53+ color: var(--text-primary);
54 pointer-events: all;
55
56 width: 315px;
57@@ -100,7 +127,7 @@ button:focus, button:hover {
58
59 .dialog-content button:focus, .dialog-content button:hover {
60 border: 0;
61- outline: 2px solid #3A86B7;
62+ outline: 2px solid var(--button-color);
63 }
64
65 .dialog-content h1 {