Let the themes to conform more to the bootstrap color modes

src/plugins/rootview/background.js

@@ -9,15 +9,24 @@ import './styles/background.scss';
 class ConverseBackground extends CustomElement {
 
     initialize() {
-        this.setClasses();
+        this.setThemeAttributes();
+
+        const settings = api.settings.get();
+        this.listenTo(settings, 'change:view_mode', () => this.setThemeAttributes())
+        this.listenTo(settings, 'change:singleton', () => this.setThemeAttributes())
+        window.matchMedia('(prefers-color-scheme: dark)').addListener(() => this.setThemeAttributes());
+        window.matchMedia('(prefers-color-scheme: light)').addListener(() => this.setThemeAttributes());
     }
 
     render() {
         return tplBackground();
     }
 
-    setClasses () {
-        this.classList.add(`theme-${getTheme()}`);
+    setThemeAttributes () {
+        const theme = getTheme();
+        this.classList.add(`theme-${theme}`);
+        this.setAttribute('data-converse-theme', theme);
+        this.setAttribute('data-bs-theme', theme);
         this.requestUpdate();
     }
 }

src/plugins/rootview/root.js

@@ -21,21 +21,24 @@ export default class ConverseRoot extends CustomElement {
 
     initialize () {
         this.setAttribute('id', 'conversejs');
-        this.setClasses();
+        this.setThemeAttributes();
         const settings = api.settings.get();
-        this.listenTo(settings, 'change:view_mode', () => this.setClasses())
-        this.listenTo(settings, 'change:singleton', () => this.setClasses())
-        window.matchMedia('(prefers-color-scheme: dark)').addListener(() => this.setClasses());
-        window.matchMedia('(prefers-color-scheme: light)').addListener(() => this.setClasses());
+        this.listenTo(settings, 'change:view_mode', () => this.setThemeAttributes())
+        this.listenTo(settings, 'change:singleton', () => this.setThemeAttributes())
+        window.matchMedia('(prefers-color-scheme: dark)').addListener(() => this.setThemeAttributes());
+        window.matchMedia('(prefers-color-scheme: light)').addListener(() => this.setThemeAttributes());
     }
 
-    setClasses () {
+    setThemeAttributes() {
+        const theme = getTheme();
         this.className = "";
         this.classList.add('container-fluid');
         this.classList.add('g-0');
         this.classList.add('conversejs');
         this.classList.add(`converse-${api.settings.get('view_mode')}`);
-        this.classList.add(`theme-${getTheme()}`);
+        this.classList.add(`theme-${theme}`);
+        this.setAttribute('data-bs-theme', theme);
+        this.setAttribute('data-converse-theme', theme);
         this.requestUpdate();
     }
 }

src/shared/styles/index.scss

@@ -9,6 +9,7 @@
 // Set custom bootstrap prefix (default is bs-) to avoid clashes
 $prefix: 'converse-';
 
+
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/variables-dark";
@@ -17,7 +18,7 @@ $prefix: 'converse-';
 @import "bootstrap/scss/utilities";
 @import "bootstrap/scss/root";
 
-.conversejs {
+.conversejs, converse-bg {
     @import "bootstrap/scss/reboot";
     @import "bootstrap/scss/type";
     @import "bootstrap/scss/images";
@@ -50,14 +51,17 @@ $prefix: 'converse-';
     @import "bootstrap/scss/placeholders";
     @import "bootstrap/scss/helpers";
     @import "bootstrap/scss/utilities/api";
+
 }
 
 @import "variables";
 @import "mixins";
 
-@import "themes/classic";
-@import "themes/dracula";
-@import "themes/cyberpunk";
+.conversejs, converse-bg {
+    @import "themes/classic";
+    @import "themes/dracula";
+    @import "themes/cyberpunk";
+}
 
 @import "core";
 @import "alerts";

src/shared/styles/themes/classic.scss

@@ -1,6 +1,5 @@
-body.converse-fullscreen,
-converse-bg.theme-classic,
-converse-root.theme-classic {
+&[data-converse-theme="classic"],
+&[data-bs-theme="classic"] {
 	$theme: 'classic' !default;
 
 	// Theme-defined variables:

src/shared/styles/themes/cyberpunk.scss

@@ -1,6 +1,7 @@
 // https://bootswatch.com/vapor
-converse-bg.theme-cyberpunk,
-converse-root.theme-cyberpunk {
+
+&[data-converse-theme="cyberpunk"],
+&[data-bs-theme="cyberpunk"] {
 	$theme: 'vapor' !default;
 
 	// Hex color values
@@ -141,8 +142,8 @@ converse-root.theme-cyberpunk {
 	--primary-color: var(--primary);
 	--raised-el-shadow: 1px 1px 10px black;
 	--redder-orange: var(--muc-color);
-	--secondary-color-dark: var(--cyan);
-	--secondary-color: var(--cyan);
+	--secondary-color-dark: var(--secondary);
+	--secondary-color: var(--secondary);
 	--separator-text-color: var(--message-text-color);
 	--subdued-color: var(--comment);
 	--text-color-invert: var(--background);

src/shared/styles/themes/dracula.scss

@@ -1,7 +1,6 @@
-// https://draculatheme.com
-converse-bg.theme-dracula,
-converse-root.theme-dracula {
-	$theme: 'dracula' !default;
+&[data-converse-theme="dracula"],
+&[data-bs-theme="dracula"] {
+    $theme: 'dracula' !default;
 
     // Hex color values
     --background: #282a36;