Fix colors in old fullpage mode (#139)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## ??? (Not Released Yet)
+
+### Minor changes and fixes
+
+* #139: Fix colors in old fullpage mode (used for OBS integration for example).
+
 ## 10.0.0
 
 ### New features

conversejs/custom/shared/styles/_variables.scss

@@ -1,3 +1,8 @@
+:root {
+  // we add --livechat-transparent variable, so that users can customize transparent background in OBS (for example).
+  --livechat-transparent: rgba(0 0 0 / 0%);
+}
+
 body.converse-fullscreen,
 body.converse-embedded {
   --peertube-main-foreground: #000;
@@ -12,9 +17,6 @@ body.converse-embedded {
   --peertube-button-background: #f2690d;
   --peertube-link: #000;
   --peertube-link-hover: #000;
-
-  // we add --livechat-transparent variable, so that users can customize transparent background in OBS (for example).
-  --livechat-transparent: rgba(0 0 0 / 0%);
 }
 
 .conversejs.theme-peertube,

server/lib/routers/webchat.ts

@@ -103,9 +103,10 @@ async function initWebchatRouter (options: RegisterServerOptionsV5): Promise<Rou
           } else {
             const autoColorsTest = areAutoColorsValid(autocolors)
             if (autoColorsTest === true) {
+              // Note: we use body.converse-fullscreen.theme-peertube to be more specific than code in _variable.scss.
               autocolorsStyles = `
               <style>
-                :root {
+                body.converse-fullscreen.theme-peertube {
                   --peertube-main-foreground: ${autocolors.mainForeground};
                   --peertube-main-background: ${autocolors.mainBackground};
                   --peertube-grey-foreground: ${autocolors.greyForeground};