Change theme using hidden checkbox instead

1 year ago · f9ab7fd515
parent fc089deaef
commit f9ab7fd515
3 changed files with 146 additions and 153 deletions
--- a/output/index.css
+++ b/output/index.css
@ -36,51 +36,60 @@
 }

 html {
+	font-size: clamp(10px, 2vw, var(--max-font-size-unitless) * 1px);
+}
+
+body {
+	margin: 0;
+}
+
+#toggle-theme-switch {
+	display: none;
+}
+
+#theming-root {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	background-color: var(--secondary-color);
+	color: var(--primary-color);
+}
+
+#toggle-theme-switch:not(:checked) ~ #theming-root {
 	--primary-color:					hsl(0, 0%, 100%);
 	--secondary-color:					hsl(0, 0%, 0%);
 	--secondary-color-heading:			hsl(0, 0%, 17%);
 	--secondary-color-shaded:			hsl(0, 0%, 9%);
+	--anchor-color:						hsl(210, 100%, 60%);
+	--color-http:						hsl(0, 0%, 17%);
+	--color-https:						hsl(195, 53%, 21%);
 }

-html.light-theme {
+
+#toggle-theme-switch:checked ~ #theming-root {
 	--primary-color:					hsl(0, 0%, 0%);
 	--secondary-color:					hsl(0, 0%, 100%);
 	--secondary-color-heading:			hsl(0, 0%, 83%);
 	--secondary-color-shaded:			hsl(0, 0%, 91%);
+	--anchor-color:						hsl(210, 100%, 40%);
+	--color-http:						hsl(0, 0%, 83%);
+	--color-https:						hsl(195, 53%, 79%)
 }

 a, .anchorstyle {
-	color: hsl(210, 100%, 60%);
-	text-decoration: underline;
-}
-
-html.light-theme :is(a, .anchorstyle) {
-	color: hsl(210, 100%, 40%);
+	color: var(--anchor-color);
 	text-decoration: underline;
+	cursor: pointer;
 }

 *, *::after, *::before {
 	transition: color 3s, background-color 2s;
 }

-html {
-	font-size: clamp(10px, 2vw, var(--max-font-size-unitless) * 1px);
-	color: var(--primary-color);
-	background-color: var(--secondary-color);
-}
-
-body {
-	margin: 0;
-}
-
 html.js .noscript, .hidden {
 	display: none;
 }

-.clickable {
-	cursor: pointer;
-}
-
 html:not(.js) .js-only {
 	display: none;
 }
@ -263,19 +272,11 @@ header {
 }

 a[href^="http:"] .protocol-indicator {
-	background-color: hsl(0, 0%, 17%);
-}
-
-html.light-theme a[href^="http:"] .protocol-indicator { 
-	background-color: hsl(0, 0%, 83%);
+	background-color: var(--color-http);
 }

 a[href^="https:"] .protocol-indicator {
-	background-color: hsl(195, 53%, 21%);
-}
-
-html.light-theme a[href^="https:"] .protocol-indicator {
-	background-color: hsl(195, 53%, 79%)
+	background-color: var(--color-https);
 }

 a[href^="http:"] .protocol-indicator::after {
--- a/output/main.js
+++ b/output/main.js
@ -69,7 +69,6 @@ function onLoad() {
 	markSortableColumns();
 	addQRModalHandlers();
 	addServerIconInteractions();
-	addThemeHandlers();
 }

 function displayQRModal(communityID) {
@ -98,15 +97,6 @@ function addQRModalHandlers() {
 	}
 }

-function addThemeHandlers() {
-	document.getElementById("theme-switch").addEventListener(
-		'click',
-		() => {
-			document.documentElement.classList.toggle('light-theme');
-		}
-	);
-}
-
 function createJoinLinkButtons() {
 	const join_URLs = dom.join_urls();
 	Array.from(join_URLs).forEach((td_url) => {
--- a/sites/index.php
+++ b/sites/index.php
@ -51,17 +51,18 @@
 		<meta name="timestamp" content="<?=$timestamp?>">
 	</head>
 	<body>
+		<input type="checkbox" id="toggle-theme-switch">
+		<div id="theming-root">
 			<header>
 				<div id="header-start"></div>
 				<div id="header-end">
-				<a
-					id="theme-switch"
-					class="js-only"
-					href="#"
+					<label 
+						for="toggle-theme-switch"
+						class="anchorstyle"
 						title="Switch color theme"
 					>
 						Switch theme
-				</a>
+					</label>
 					<a
 						id="link-instructions"
 						target="_blank"
@ -122,7 +123,7 @@
 				<p>
 					<label
 						for="toggle-show-room-ids"
-					class="clickable anchorstyle"
+						class="anchorstyle"
 						tabindex="0"
 						title="Shows a column with community identifiers
 						for developers or language data contributors.">
@ -172,5 +173,6 @@
 			<div id="copy-snackbar">
 				Copied URL to clipboard. Paste into Session app to join
 			</div>
+		</div>
 	</body>
 </html>