From 5f4ac233afb150ba9c19a8a9e3cad6b53a4862d9 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Tue, 21 May 2024 15:22:09 +0200
Subject: [PATCH] Fix colors in old fullpage mode (#139)

---
 CHANGELOG.md                                    | 6 ++++++
 conversejs/custom/shared/styles/_variables.scss | 8 +++++---
 server/lib/routers/webchat.ts                   | 3 ++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 81658622..17220813 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/conversejs/custom/shared/styles/_variables.scss b/conversejs/custom/shared/styles/_variables.scss
index 153746d5..0b052409 100644
--- a/conversejs/custom/shared/styles/_variables.scss
+++ b/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,
diff --git a/server/lib/routers/webchat.ts b/server/lib/routers/webchat.ts
index 97607eeb..f753b16b 100644
--- a/server/lib/routers/webchat.ts
+++ b/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};