Add dark theme & toggle

output/css/instructions.css

@@ -1,7 +1,21 @@
+body {
+  background-color: black;
+  color: white;
+}
+
 header {
   text-align: center;
 }
 
+a, .anchorstyle {
+	color: hsl(210, 100%, 60%);
+	text-decoration: underline;
+}
+
+#language-selection-title, label[for^=language-selection] {
+  font-size: 1.2em;
+}
+
 #instructions {
   padding: 1em;
 }
@@ -14,7 +28,7 @@ header {
   font-size: 1.25em;
   line-height: 1.5;
   padding: 2em;
-  background-color: silver;
+  background-color: hsl(0, 0%, 9%);
   border: 2px solid black;
   border-radius: 1em;
 }

output/index.css

@@ -1,5 +1,4 @@
 :root {
-	--alternate-row-color:             #e8e8e8;
 	--body-margin: 8px; /* Default value in browsers */
 	--max-font-size-unitless: 18;
 
@@ -36,8 +35,38 @@
 	--dynamic-columns-width: var(--expanded-dynamic-columns-width);
 }
 
+html {
+	--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%);
+}
+
+html.light-theme {
+	--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%);
+}
+
+a, .anchorstyle {
+	color: hsl(210, 100%, 60%);
+	text-decoration: underline;
+}
+
+html.light-theme :is(a, .anchorstyle) {
+	color: hsl(210, 100%, 40%);
+	text-decoration: underline;
+}
+
+*, *::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 {
@@ -52,11 +81,6 @@ html.js .noscript, .hidden {
 	cursor: pointer;
 }
 
-.anchorstyle {
-	color: rgb(0, 102, 204);
-	text-decoration: underline;
-}
-
 html:not(.js) .js-only {
 	display: none;
 }
@@ -70,6 +94,11 @@ header {
 	padding-inline: var(--body-margin);
 }
 
+#header-start, #header-end {
+	display: flex;
+	gap: 0.5em;
+}
+
 #headline {
 	text-align: center;
 	flex-grow: 1;
@@ -133,16 +162,21 @@ header {
 }
 
 #tbl_communities th {
-	background-color: lightgray;
+	background-color: var(--secondary-color-heading);
+}
+
+#tbl_communities tr {
+	background-color: var(--row-color);
 }
 
 #tbl_communities tr:nth-child(even) {
-	--row-color: white;
+	background-color: var(--secondary-color);
+	--row-color: var(--secondary-color);
 }
 
 #tbl_communities tr:nth-child(odd)  {
-	--row-color: var(--alternate-row-color);
-	background-color: var(--alternate-row-color);
+	background-color: var(--secondary-color-shaded);
+	--row-color: var(--secondary-color-shaded);
 }
 
 /* Particular columns */
@@ -228,9 +262,21 @@ header {
 	text-shadow: 0 0 0.5em #0003;
 }
 
-a[href^="http:"] .protocol-indicator { background-color:lightgray }
+a[href^="http:"] .protocol-indicator {
+	background-color: hsl(0, 0%, 17%);
+}
 
-a[href^="https:"] .protocol-indicator { background-color:lightblue }
+html.light-theme a[href^="http:"] .protocol-indicator { 
+	background-color: hsl(0, 0%, 83%);
+}
+
+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%)
+}
 
 a[href^="http:"] .protocol-indicator::after {
 	content: "HTTP";
@@ -317,7 +363,10 @@ a[href^="https:"] .protocol-indicator::after {
 
 .copy_button {
 	font-size: 1.1em;
+	background-color: var(--secondary-color);
+	color: var(--primary-color);
 	padding: var(--cell-padding);
+	border-radius: 10%;
 }
 
 /* --- Footer --- */
@@ -361,9 +410,11 @@ label[for=toggle-show-room-ids]::after {
 	margin-right: auto;
 	width: 50%;
 }
+
 .qr-code-icon {
 	cursor: pointer;
 }
+
 .qr-code-modal {
 	display: none;   /* Hidden by default */
 	position: fixed; /* Stay in place */

output/main.js

@@ -43,6 +43,7 @@ const transformJoinURL = (join_link) => {
 	return element.button({
 		textContent: "Copy",
 		className: "copy_button",
+		title: "Click here to copy the join URL",
 		onclick: () => copyToClipboard(join_link)
 	});
 }
@@ -68,6 +69,7 @@ function onLoad() {
 	markSortableColumns();
 	addQRModalHandlers();
 	addServerIconInteractions();
+	addThemeHandlers();
 }
 
 function displayQRModal(communityID) {
@@ -96,6 +98,15 @@ 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) => {

output/qrcode-solid.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M48 32C21.5 32 0 53.5 0 80v96c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm80 64v64H64V96h64zM48 288c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48V336c0-26.5-21.5-48-48-48H48zm80 64v64H64V352h64zM256 80v96c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H304c-26.5 0-48 21.5-48 48zm64 16h64v64H320V96zm32 352v32h32V448H352zm96 0H416v32h32V448zM416 288v32H352V288H256v96 96h64V384h32v32h96V352 320 288H416z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path style="fill: grey;" d="M48 32C21.5 32 0 53.5 0 80v96c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm80 64v64H64V96h64zM48 288c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48V336c0-26.5-21.5-48-48-48H48zm80 64v64H64V352h64zM256 80v96c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H304c-26.5 0-48 21.5-48 48zm64 16h64v64H320V96zm32 352v32h32V448H352zm96 0H416v32h32V448zM416 288v32H352V288H256v96 96h64V384h32v32h96V352 320 288H416z"/></svg>

sites/+components/tbl_communities.php

@@ -118,8 +118,8 @@
 		</td>
 		<td class="td_join_url">
 			<div class="join_url_container" data-url="<?=$join_link?>">
-				<a class="join_url show-from-w5" title="<?=$join_link?>"
-					><?=truncate($join_link, 32)?></a>
+				<span class="join_url show-from-w5" title="<?=$join_link?>"
+					><?=truncate($join_link, 32)?></span>
 				<a
 					class="noscript"
 					title="Copy this link to join '<?=$name?>'."

sites/index.php

@@ -31,7 +31,7 @@
 		<?php include "+components/page-head.php" ?>
 
 		<link rel="canonical" href="https://sessioncommunities.online/">
-		<link rel="stylesheet" href="styles2.css">
+		<link rel="stylesheet" href="./index.css">
 		<script type="module" src="./main.js"></script>
 		<title>Self-updating list of active Session communities</title>
 		<meta name="description" content="
@@ -54,6 +54,14 @@
 		<header>
 			<div id="header-start"></div>
 			<div id="header-end">
+				<a
+					id="theme-switch"
+					class="js-only"
+					href="#"
+					title="Switch color theme"
+				>
+					Switch theme
+				</a>
 				<a
 					id="link-instructions"
 					target="_blank"

sites/instructions.php

@@ -41,9 +41,11 @@
 					Go back to Community list
 				</a>
 			</p>
-			Choose your language:
-			<?php foreach ($instruction_files as $i => $file): ?>
+			<span id="language-selection-title">
+				Choose your language:
+			</span>
 			<br>
+			<?php foreach ($instruction_files as $i => $file): ?>
 			<input
 				id="language-selection-<?=$i?>"
 				class="language-selection"