Add ability to switch between dark and light modes

CHANGES.md

@@ -3,6 +3,7 @@
 ## 9.0.1 (2021-??-??)
 
 - Updated translations: lt
+- Add a new dark theme based on the [Dracula](https://draculatheme.com/) theme
 - #2751: Media not rendered when Converse runs in a browser extension
 - #2789: Implement new hook parseMessageForCommands for plugins to add custom
 

dev.html

@@ -36,7 +36,6 @@
         muc_respect_autojoin: true,
         muc_show_logs_before_join: true,
         notify_all_room_messages: ['discuss@conference.conversejs.org'],
-        theme: 'dracula',
         view_mode: 'fullscreen',
         websocket_url: 'wss://conversejs.org/xmpp-websocket',
         // websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',

docs/source/configuration.rst

@@ -767,6 +767,12 @@ loglevel
 
 You can also set this value by changing a URL fragment `#converse?loglevel=debug`
 
+dark_theme
+----------
+
+* Default:  ``'dracula'``
+
+The theme being used in dark mode.
 
 default_domain
 --------------

src/plugins/chatboxviews/index.js

@@ -22,10 +22,7 @@ converse.plugins.add('converse-chatboxviews', {
         // ====================================
         // Refer to docs/source/configuration.rst for explanations of these
         // configuration settings.
-        api.settings.extend({
-            'animate': true,
-            'theme': 'default'
-        });
+        api.settings.extend({ 'animate': true });
 
         _converse.chatboxviews = new ChatBoxViews();
 

src/plugins/rootview/index.js

@@ -6,7 +6,16 @@ import { ensureElement } from './utils.js';
 converse.plugins.add('converse-rootview', {
 
     initialize () {
-        api.settings.extend({ 'auto_insert': true });
+        // Configuration values for this plugin
+        // ====================================
+        // Refer to docs/source/configuration.rst for explanations of these
+        // configuration settings.
+        api.settings.extend({
+            'auto_insert': true,
+            'theme': 'classic',
+            'dark_theme': 'dracula',
+        });
+
         api.listen.on('chatBoxesInitialized', ensureElement);
 
         // Only define the element now, otherwise it it's already in the DOM

src/plugins/rootview/root.js

@@ -2,6 +2,7 @@ import tpl_root from "./templates/root.js";
 import { api } from '@converse/headless/core';
 import { CustomElement } from 'shared/components/element.js';
 import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
+import { getTheme } from './utils.js';
 
 import './styles/root.scss';
 
@@ -25,13 +26,15 @@ export default class ConverseRoot extends CustomElement {
         const settings = getAppSettings();
         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());
     }
 
     setClasses () {
         this.className = "";
         this.classList.add('conversejs');
         this.classList.add(`converse-${api.settings.get('view_mode')}`);
-        this.classList.add(`theme-${api.settings.get('theme')}`);
+        this.classList.add(`theme-${getTheme()}`);
         this.requestUpdate();
     }
 }

src/plugins/rootview/utils.js

@@ -1,5 +1,12 @@
 import { api } from '@converse/headless/core';
 
+export function getTheme() {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return api.settings.get('dark_theme');
+    } else {
+        return api.settings.get('theme');
+    }
+}
 
 export function ensureElement () {
     if (!api.settings.get('auto_insert')) {