add light mode toggle

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;

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">

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',
 
@@ -215,6 +217,7 @@ export class I18n {
 			faqBtnText: I18nStringKey.kSiteButtons_FAQ,
 			rulesBtnText: I18nStringKey.kSiteButtons_Rules,
 			
+
 			usersOnlineText: I18nStringKey.kVM_UsersOnlineText,
 
 			voteResetHeaderText: I18nStringKey.kVM_VoteForResetTitle,

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) {

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:",