3 files changed, 42 insertions, 0 deletions
diff --git a/share/css/dark.css b/share/css/dark.css
new file mode 100644
index 0000000..64ea7c2
--- /dev/null
+++ b/share/css/dark.css
@@ -0,0 +1,14 @@
+body, html {
+	color: #eeeeee;
+	background-color: #333333;
+}
+
+a {
+	color: #9999ff;
+}
+
+.glightbox-clean
+.gslide-description {
+	color: #eeeeee!important;
+	background-color: #333333!important;
+}
diff --git a/share/css/light.css b/share/css/light.css
new file mode 100644
index 0000000..0fb96c9
--- /dev/null
+++ b/share/css/light.css
@@ -0,0 +1,3 @@
+a {
+	color: #000099;
+}
diff --git a/share/html_start b/share/html_start
index 0e21831..68be715 100644
--- a/share/html_start
+++ b/share/html_start
@@ -5,8 +5,33 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" type="text/css" href=".data/css/main.css"/>
+	<link rel="stylesheet" type="text/css" href=".data/css/light.css" id="theme"/>
 	<!-- glightbox (C) biati digital, MIT licensed. <https://biati-digital.github.io/glightbox/> -->
 	<link rel="stylesheet" href=".data/css/glightbox.min.css" />
+	<script>
+		function addStyleSheet(name, id) {
+			var path = '.data/css/' + name + '.css';
+			var old = document.getElementById(id);
+			if (old && (old.href != path)) {
+				old.href = path;
+			}
+		}
+		var otherTheme = {
+			'dark': 'light',
+			'light': 'dark',
+		};
+		var currentTheme = localStorage.getItem('theme');
+		if (!otherTheme.hasOwnProperty(currentTheme)) {
+			currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		}
+		addStyleSheet(currentTheme, 'theme');
+
+		function toggleTheme() {
+			currentTheme = otherTheme[currentTheme] || 'light';
+			localStorage.setItem('theme', currentTheme);
+			addStyleSheet(currentTheme, 'theme');
+		}
+	</script>
 	<script src=".data/js/glightbox.min.js"></script>
 </head>
 <body><div>