Starting to work on dark theme

Author: gvbvdxxalt2

src/chat/elementjson/chat-styles.css

@@ -187,6 +187,7 @@
   --soundboard-stop-button-bgcolor: hsl(0, 100%, 43%);
   --soundboard-stop-button-border-color: hsl(0, 100%, 23%);
   --soundboard-stop-button-hover-bgcolor: hsl(0, 100%, 50%);
+	--soundboard-stop-button-text-color:  hsl(0, 100%, 0%);
 
   --menu-bar-hover-color: hsl(
     var(--accent-default-hue),
@@ -289,6 +290,70 @@
   --popup-dialog-message-size: 16px;
 }
 
+body[data-theme="dark"] {
+	--bg-color: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    30%
+  );	
+	--header-color: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    30%
+  );	
+	--main-text-color: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    80%
+  );
+	--input-border-color: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    80%
+  );
+
+	--button-bg-color: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    35%
+  );
+  --button-text-color: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    86%
+  );
+  --button-hover-bg-color: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    40%
+  );
+  --button-disabled-color: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    20%
+  );
+	--popup-dialog-background: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    25%
+  );
+  --popup-dialog-text-color: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    90%
+  );
+	--popup-box-bg-color: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    25%
+  );
+	--popup-box-text-color: hsl(
+    var(--accent-default-hue),
+    var(--accent-default-saturation),
+    80%
+  );
+}
+
 ::-webkit-scrollbar {
   width: 24px;
 }
@@ -461,11 +526,8 @@ body {
   height: fit-content;
 }
 .whiteBox {
-  background: hsl(
-    var(--accent-default-hue),
-    var(--accent-default-saturation),
-    100%
-  );
+  background: var(--popup-box-bg-color);
+  color: var(--popup-box-text-color);
   padding: 10px;
   box-shadow: 0 0px 30px black;
   border-radius: 5px;
@@ -652,6 +714,7 @@ body {
     var(--button-sat),
     75%
   );
+	--soundboard-button-text-color:  hsl(0, 100%, 0%);
 
   min-width: 150px;
   width: fit-content;
@@ -670,6 +733,7 @@ body {
   height: 90px;
   border-radius: 10px;
   overflow: hidden;
+	color: var(--soundboard-button-text-color);
 }
 .soundboardButton:hover {
   background: var(--soundboard-button-hover-bgcolor);
@@ -710,6 +774,7 @@ body {
   height: 90px;
   border-radius: 10px;
   overflow: hidden;
+	color: var(--soundboard-stop-button-text-color);
 }
 .soundboardButtonStop:hover {
   background: var(--soundboard-stop-button-hover-bgcolor);

src/chat/interface/chatinterface.js

@@ -129,6 +129,8 @@ var emojiReactions = require("./emojireactions.js");
 var clientSettings = require("./clientsettings.js");
 var KnownUserList = require("./userlist-menu.js");
 
+require("./darktheme.js");
+
 (async function () {
   try {
     updateManager.addUpdateListener("interface", () => {

src/chat/interface/clientsettings.js

@@ -10,8 +10,10 @@ class ClientSettingsMenu {
       JOKE_COMMANDS: true,
       BRACKET_CODE_SOUNDS: true,
       BELL_NOTIFICATIONS: true,
+		DARK_THEME: false,
     };
     this.settings = {};
+	  this.settingFuncs = {};
     this.settingsList = [
       {
         name: "Chat notifcations",
@@ -37,16 +39,32 @@ class ClientSettingsMenu {
         name: "Message bracket sounds",
         id: "BRACKET_CODE_SOUNDS",
         type: "on-off",
+      },
+		{
+        name: "Dark theme (Experimental): ",
+        id: "DARK_THEME",
+        type: "on-off",
       },
     ];
     this.init();
   }
 
+	addSettingChangeFunction(id, func) {
+		this.settingFuncs[id] = func;
+	}
+
+	removeSettingChangeFunction(id) {
+		delete this.settingFuncs[id];
+	}
+
   getSetting(id) {
     return this.settings[id];
   }
   setSetting(id, value) {
     this.settings[id] = value;
+	  if (this.settingFuncs[id]) {
+		  this.settingFuncs[id](value);
+	  }
   }
 
   addClientSettingSwitchButton(id) {

src/chat/interface/darktheme.js

@@ -0,0 +1,10 @@
+var ClientSettings = require("./clientsettings.js");
+
+var themeMain = document.body;
+var darkThemeID = "DARK_THEME";
+
+themeMain.setAttribute("data-theme", ClientSettings.getSetting(darkThemeID) ? "dark" : "none");
+
+ClientSettings.addSettingChangeFunction(darkThemeID, (value) => {
+	themeMain.setAttribute("data-theme", value ? "dark" : "none");
+});

src/chat/interface/roomsettings.js

@@ -55,6 +55,7 @@ async function updateThemeSetting(index) {
   }
 }
 
+
 async function updateAllowGuests(allow) {
   try {
     var response = await fetch(
@@ -596,9 +597,23 @@ var dom = elements.createElementsFromJSON([
               },
             ],
           },
-          {
-            element: "br",
-          },
+			{
+				element: "br"
+			},
+			{
+				element: "span",
+				style: {
+					color: "#cc0606",
+					fontWeight: "bold"
+				},
+				gid: "guestUsersWarning",
+				children: [
+					"Guest users have the ability to bypass the allow list no matter what, turn guest users off if you don't want them in here.",
+					{
+			            element: "br",
+			        },
+				]
+			},
           {
             element: "div",
             style: {
@@ -794,9 +809,11 @@ rs.updatePermission = function (name, value) {
 };
 
 var roomSettingAllowGuests = elements.getGPId("roomSettingAllowGuests");
+var guestUsersWarning = elements.getGPId("guestUsersWarning");
 
 rs.updateAllowGuests = function (value) {
   roomSettingAllowGuests.checked = value;
+	guestUsersWarning.hidden = !value;
 };
 
 var roomSettingTheme = elements.getGPId("roomSettings_theme");

wpstatic/version.json

@@ -1 +1 @@
-{"timestamp":"1769087267005"}
+{"timestamp":"1769089951008"}