From 1a24bed775139765b9dc660d04af8c504df14d37 Mon Sep 17 00:00:00 2001
From: Elijah R <elijah@computernewb.com>
Date: Tue, 9 Apr 2024 01:42:37 -0400
Subject: [PATCH] add light mode toggle

---
 src/css/style.css      | 40 ++++++++++++++++++++++++++--------------
 src/html/index.html    |  3 +++
 src/ts/i18n.ts         |  3 +++
 src/ts/main.ts         | 34 +++++++++++++++++++++++++++++++++-
 static/lang/en-us.json |  2 ++
 5 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 755781d..3a437fd 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -95,12 +95,34 @@ tr.user-moderator > td, .chat-username-moderator, .username-moderator {
   color: #00FF00 !important;
 }
 
-tr.user-unregistered > td, .chat-username-unregistered, .username-unregistered {
-  color: #b1b1b1 !important;
+html[data-bs-theme="dark"] {
+  tr.user-unregistered > td, .chat-username-unregistered, .username-unregistered {
+    color: #b1b1b1 !important;
+  }
+  
+  tr.user-registered > td, .chat-username-registered, .username-registered {
+    color: #FFFFFF !important;
+  }
+
+  tr.user-registered.user-turn > td, tr.user-registered.user-waiting > td {
+    color: #000000 !important;
+    --bs-table-color: #000000 !important;
+  }
+  
+  tr.user-unregistered.user-turn > td, tr.user-unregistered.user-waiting > td {
+    color: #585858 !important;
+    --bs-table-color: #585858 !important;
+  }
 }
 
-tr.user-registered > td, .chat-username-registered, .username-registered {
-  color: #FFFFFF !important;
+html[data-bs-theme="light"] {
+  tr.user-unregistered > td, .chat-username-unregistered, .username-unregistered {
+    color: #6b6b6b !important;
+  }
+  
+  tr.user-registered > td, .chat-username-registered, .username-registered {
+    color: #000 !important;
+  }
 }
 
 tr.user-turn > td {
@@ -122,16 +144,6 @@ tr.user-waiting > td {
   --bs-table-color: #000000;
 }
 
-tr.user-registered.user-turn > td, tr.user-registered.user-waiting > td {
-  color: #000000 !important;
-  --bs-table-color: #000000 !important;
-}
-
-tr.user-unregistered.user-turn > td, tr.user-unregistered.user-waiting > td {
-  color: #585858 !important;
-  --bs-table-color: #585858 !important;
-}
-
 .tr.user-waiting:hover, tr.user-waiting > td:hover {
   background-color: #ece1be !important;
   --bs-table-bg-state: #ece1be !important;
diff --git a/src/html/index.html b/src/html/index.html
index 95fdff7..44ca50d 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -224,6 +224,9 @@
                         <li class="nav-item">
                             <a href="https://computernewb.com/collab-vm/user-vm" class="nav-link"><i class="fa-solid fa-user"></i> UserVM</a>
                         </li>
+                        <li class="nav-item">
+                            <a id="toggleThemeBtn" href="#" class="nav-link"><i id="toggleThemeIcon" class="fa-solid fa-sun"></i> <span id="toggleThemeBtnText"></span></a>
+                        </li>
                     </ul>
                     <div class="navbar-text dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="accountDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
diff --git a/src/ts/i18n.ts b/src/ts/i18n.ts
index e99cd5f..20bcba6 100644
--- a/src/ts/i18n.ts
+++ b/src/ts/i18n.ts
@@ -13,6 +13,8 @@ export enum I18nStringKey {
 	kSiteButtons_Home = 'kSiteButtons_Home',
 	kSiteButtons_FAQ = 'kSiteButtons_FAQ',
 	kSiteButtons_Rules = 'kSiteButtons_Rules',
+	kSiteButtons_DarkMode = 'kSiteButtons_DarkMode',
+	kSiteButtons_LightMode = 'kSiteButtons_LightMode',
 
 	kVM_UsersOnlineText = 'kVM_UsersOnlineText',
 
@@ -214,6 +216,7 @@ export class I18n {
 			homeBtnText: I18nStringKey.kSiteButtons_Home,
 			faqBtnText: I18nStringKey.kSiteButtons_FAQ,
 			rulesBtnText: I18nStringKey.kSiteButtons_Rules,
+			
 
 			usersOnlineText: I18nStringKey.kVM_UsersOnlineText,
 
diff --git a/src/ts/main.ts b/src/ts/main.ts
index bd54cce..fcff312 100644
--- a/src/ts/main.ts
+++ b/src/ts/main.ts
@@ -51,6 +51,9 @@ const elements = {
 	badPasswordAlert: document.getElementById('badPasswordAlert') as HTMLDivElement,
 	incorrectPasswordDismissBtn: document.getElementById('incorrectPasswordDismissBtn') as HTMLButtonElement,
 	ctrlAltDelBtn: document.getElementById('ctrlAltDelBtn') as HTMLButtonElement,
+	toggleThemeBtn: document.getElementById('toggleThemeBtn') as HTMLAnchorElement,
+	toggleThemeIcon: document.getElementById('toggleThemeIcon') as HTMLElement,
+	toggleThemeBtnText: document.getElementById('toggleThemeBtnText') as HTMLSpanElement,
 	// Admin
 	staffbtns: document.getElementById('staffbtns') as HTMLDivElement,
 	restoreBtn: document.getElementById('restoreBtn') as HTMLButtonElement,
@@ -345,7 +348,7 @@ async function multicollab(url: string) {
 		let div = document.createElement('div');
 		div.classList.add('col-sm-5', 'col-md-3');
 		let card = document.createElement('div');
-		card.classList.add('card', 'bg-dark', 'text-light');
+		card.classList.add('card');
 		card.setAttribute('data-cvm-node', vm.id);
 		card.addEventListener('click', async () => {
 			try {
@@ -1175,6 +1178,29 @@ elements.accountResetPasswordVerifyForm.addEventListener('submit', async e => {
 	return false;
 });
 
+let darkTheme = true;
+function loadColorTheme(dark : boolean) {
+	if (dark) {
+		darkTheme = true;
+		document.children[0].setAttribute("data-bs-theme", "dark");
+		elements.toggleThemeBtnText.innerHTML = TheI18n.GetString(I18nStringKey.kSiteButtons_LightMode);
+		elements.toggleThemeIcon.classList.remove("fa-moon");
+		elements.toggleThemeIcon.classList.add("fa-sun");
+	} else {
+		darkTheme = false;
+		document.children[0].setAttribute("data-bs-theme", "light");
+		elements.toggleThemeBtnText.innerHTML = TheI18n.GetString(I18nStringKey.kSiteButtons_DarkMode);
+		elements.toggleThemeIcon.classList.remove("fa-sun");
+		elements.toggleThemeIcon.classList.add("fa-moon");
+	}
+}
+elements.toggleThemeBtn.addEventListener('click', e => {
+	e.preventDefault();
+	loadColorTheme(!darkTheme);
+	localStorage.setItem("cvm-dark-theme", darkTheme ? "1" : "0");
+	return false;
+});
+
 // Public API
 w.collabvm = {
 	openVM: openVM,
@@ -1223,6 +1249,12 @@ w.VMName = null;
 document.addEventListener('DOMContentLoaded', async () => {
 	// Initalize the i18n system
 	await TheI18n.Init();
+	// Load theme
+	var _darktheme : boolean;
+	if (localStorage.getItem("cvm-dark-theme") === "0")
+		loadColorTheme(false);
+	else
+		loadColorTheme(true);
 
 	// Initialize authentication if enabled
 	if (Config.Auth.Enabled) {
diff --git a/static/lang/en-us.json b/static/lang/en-us.json
index 657542f..82d9fbb 100644
--- a/static/lang/en-us.json
+++ b/static/lang/en-us.json
@@ -14,6 +14,8 @@
 		"kSiteButtons_Home": "Home",
 		"kSiteButtons_FAQ": "FAQ",
 		"kSiteButtons_Rules": "Rules",
+		"kSiteButtons_DarkMode": "Dark Mode",
+		"kSiteButtons_LightMode": "Light Mode",
 
 		"kVM_UsersOnlineText": "Users Online:",