From 675ed6abf92beaea0dc718898afcc5c2433d8d0a Mon Sep 17 00:00:00 2001
From: recanman <noreply@example.invalid>
Date: Wed, 10 Jan 2024 17:08:58 -0800
Subject: [PATCH] fix theme switcher position on mobile

---
 js/main.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/js/main.js b/js/main.js
index 62b5864..e26b971 100644
--- a/js/main.js
+++ b/js/main.js
@@ -15,4 +15,64 @@ if (document.addEventListener) {
 	themeSwitcher.attachEvent('onclick', setTheme);
 }
 
-checkTheme()
\ No newline at end of file
+checkTheme()
+
+// Make the theme switcher in the hamburger menu on mobile devices work.
+if (document.body.clientWidth < 940) {
+	const themeSwitcherLabel = document.getElementById('main-theme-switcher');
+	const navActionsContainer = document.getElementById('nav-actions-container');
+
+	// Move the theme switcher to inside the hamburger menu.
+	navActionsContainer.appendChild(themeSwitcher);
+	navActionsContainer.appendChild(themeSwitcherLabel);
+
+	themeSwitcherLabel.style.top = '';
+	themeSwitcherLabel.style.left = '42vw';
+
+	const themeVariables = [
+		// Light theme
+		[
+			{ name: 'primary-color', value: '#666666' },
+			{ name: 'secondary-color', value: '#555555' },
+			{ name: 'font-color', value: '#555555' },
+			{ name: 'link-color', value: '#444444' },
+			{ name: 'bg-color', value: '#f0f0f0' },
+			{ name: 'heading-color', value: '#666666' },
+			{ name: 'block-bg-color', value: '#d7d7d7' },
+			{ name: 'block-bg-color-secondary', value: '#c0c0c0' },
+			{ name: 'block-bg-color-heading', value: '#a5a5a5' },
+			{ name: 'table-color', value: '#000000' },
+			{ name: 'head-nav-bg-color', value: 'transparent' },
+			{ name: 'head-nav-text-color', value: '#d56f2a' },
+			{ name: 'menu-color', value: '#202225' },
+			{ name: 'license-color', value: '#666666' },
+		],
+
+		// Dark theme
+		[
+			{ name: 'primary-color', value: '#888888' },
+			{ name: 'secondary-color', value: '#666666' },
+			{ name: 'font-color', value: '#cecece' },
+			{ name: 'link-color', value: '#e6e6e6' },
+			{ name: 'bg-color', value: '#0f0f0f' },
+			{ name: 'heading-color', value: '#454545' },
+			{ name: 'block-bg-color', value: '#2f3234' },
+			{ name: 'block-bg-color-secondary', value: '#444444' },
+			{ name: 'block-bg-color-heading', value: '#333333' },
+			{ name: 'table-color', value: '#cecece' },
+			{ name: 'head-nav-bg-color', value: 'transparent' },
+			{ name: 'head-nav-text-color', value: '#d56f2a' },
+			{ name: 'menu-color', value: '#e1e1e1' },
+			{ name: 'license-color', value: '#666666' },
+		]
+	]
+
+	// Switch the theme when the theme switcher is clicked.
+	themeSwitcher.addEventListener('change', () => {
+		const theme = themeVariables[themeSwitcher.checked ? 1 : 0];
+
+		theme.forEach(variable => {
+			document.documentElement.style.setProperty(`--${variable.name}`, variable.value);
+		});
+	});
+}
\ No newline at end of file