darkmode

Author: Vincent van der Wal

src/main.ts

@@ -15,6 +15,17 @@ import type { Variable, Domain, DomainGroups } from './types';
 let url = new URL(document.location.href);
 let params = new URLSearchParams(url.search);
 
+let darkMode = false;
+if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+	darkMode = true;
+}
+if (params.get('dark')) {
+	darkMode = params.get('dark') === 'true';
+}
+if (darkMode) {
+	document.body.classList.add('dark');
+}
+
 let domain: Domain;
 if (params.get('domain')) {
 	domain = domains.find((dm) => dm.value === params.get('domain')) ?? domains[0];
@@ -143,9 +154,11 @@ let showPopup = false;
 if (mapContainer) {
 	maplibregl.addProtocol('om', omProtocol);
 
+	console.log(darkMode);
+
 	map = new maplibregl.Map({
 		container: mapContainer,
-		style: `https://maptiler.servert.nl/styles/basic-world-maps/style.json`,
+		style: `https://maptiler.servert.nl/styles/basic-world-maps${darkMode ? '-dark' : ''}/style.json`,
 		center: typeof domain.grid.center == 'object' ? domain.grid.center : [0, 0],
 		zoom: domain?.grid.zoom,
 		attributionControl: false,
@@ -267,6 +280,7 @@ if (mapContainer) {
   				<br>
   				Selected time:
   				<div id="time_slider_container"></div>
+      				<div id="darkmode_toggle">${darkMode ? 'Light mode' : 'Dark mode'}</div>
    			</div>
   		`;
 
@@ -320,6 +334,16 @@ if (mapContainer) {
 					changeOMfileURL();
 				}
 			});
+
+			const darkmodeToggle = document.getElementById(
+				'darkmode_toggle'
+			) as HTMLElement;
+			darkmodeToggle?.addEventListener('click', (e) => {
+				darkMode = !darkMode;
+				url.searchParams.set('dark', darkMode);
+				history.pushState({}, '', url);
+				window.location.reload();
+			});
 		}
 	});
 }

src/style.css

@@ -63,6 +63,13 @@ body {
 }
 
 #info_box {
+<<<<<<< HEAD
+=======
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+>>>>>>> 3e343dd (darkmode)
 	background: rgba(255, 255, 255, 0.8);
 	border-radius: 15px;
 	padding: 15px 20px;
@@ -108,3 +115,37 @@ body {
 	margin-top: 0.5rem;
 	border-width: 1px;
 }
+
+#darkmode_toggle {
+	position: absolute;
+	right: 15px;
+	bottom: 15px;
+	padding: 6px 10px;
+	background-color: white;
+	color: black;
+	border-radius: 5px;
+	border: 1px solid black;
+	cursor: pointer;
+}
+
+.dark #info_box {
+	color: white;
+	background: rgba(50, 50, 50, 0.85);
+}
+
+.dark .domain-selection,
+.dark .variable-selection,
+.dark .date-time-selection {
+	background: rgba(100, 100, 100, 0.8);
+	color: white;
+}
+
+.dark #time_slider_container button {
+	background: rgba(100, 100, 100, 0.8);
+	color: white;
+}
+
+.dark #darkmode_toggle {
+	background: rgba(100, 100, 100, 0.8);
+	color: white;
+}

src/worker.ts

@@ -186,7 +186,7 @@ self.onmessage = async (message) => {
 		if (variable.value == 'cloud_cover') {
 			colors = colorScale({
 				colorScheme: '',
-				customColors: ['#999', '#444'],
+				customColors: ['#FFF', '#c3c2c2'],
 				min: 0,
 				max: 100
 			});