chore: enabled dark mode (#7057)

settings.json.docker

@@ -194,6 +194,12 @@
    */
   "authenticationMethod": "${AUTHENTICATION_METHOD:sso}",
 
+  /**
+  * Allow setting dark mode for the enduser. This is so if the user has preferred dark mode in their browser, Etherpad will respect that.
+  * Of course this overrides all the skin variants and the skinName set by the administrator.
+  **/
+  "enableDarkMode": "${ENABLE_DARK_MODE:true}",
+
   /*
    * Node native SSL support
    *

settings.json.template

@@ -617,6 +617,12 @@
    */
   "authenticationMethod": "${AUTHENTICATION_METHOD:sso}",
 
+    /**
+    * Allow setting dark mode for the enduser. This is so if the user has preferred dark mode in their browser, Etherpad will respect that.
+    * Of course this overrides all the skin variants and the skinName set by the administrator.
+    **/
+    "enableDarkMode": "${ENABLE_DARK_MODE:true}",
+
   /*
    * From Etherpad 1.8.5 onwards, when Etherpad is in production mode commits from individual users are rate limited
    *

src/node/handler/PadMessageHandler.ts

@@ -990,6 +990,7 @@ const handleClientReady = async (socket:any, message: ClientReadyMessage) => {
       accountPrivs: {
         maxRevisions: 100,
       },
+      enableDarkMode: settings.enableDarkMode,
       automaticReconnectionTimeout: settings.automaticReconnectionTimeout,
       initialRevisionList: [],
       initialOptions: {},

src/node/utils/Settings.ts

@@ -109,6 +109,7 @@ exports.ttl = {
 
 exports.updateServer = "https://static.etherpad.org"
 
+exports.enableDarkMode = true;
 
 /*
  * Skin name.

src/static/js/pad.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck
 'use strict';
+const skinVariants = require('./skin_variants');
 
 /**
  * This code is mostly from the old Etherpad. Please help us to comment this code.
@@ -479,6 +480,9 @@ const pad = {
       setTimeout(() => { checkChatAndUsersVisibility(mobileMatch); }, 0); // check now after load
 
       $('#editorcontainer').addClass('initialized');
+      if (window.location.hash.toLowerCase() !== '#skinvariantsbuilder' && window.clientVars.enableDarkMode && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        skinVariants.updateSkinVariantsClasses(['super-dark-editor', 'dark-background', 'super-dark-toolbar']);
+      }
 
       hooks.aCallAll('postAceInit', {ace: padeditor.ace, clientVars, pad});
     };

src/static/js/skin_variants.ts

@@ -1,38 +1,43 @@
 // @ts-nocheck
 'use strict';
 
+const containers = ['editor', 'background', 'toolbar'];
+const colors = ['super-light', 'light', 'dark', 'super-dark'];
+
+// add corresponding classes when config change
+const updateSkinVariantsClasses = (newClasses) => {
+  const domsToUpdate = [
+    $('html'),
+    $('iframe[name=ace_outer]').contents().find('html'),
+    $('iframe[name=ace_outer]').contents().find('iframe[name=ace_inner]').contents().find('html'),
+  ];
+
+  colors.forEach((color) => {
+    containers.forEach((container) => {
+      domsToUpdate.forEach((el) => { el.removeClass(`${color}-${container}`); });
+    });
+  });
+
+  domsToUpdate.forEach((el) => { el.removeClass('full-width-editor'); });
+
+  domsToUpdate.forEach((el) => { el.addClass(newClasses.join(' ')); });
+};
+
 // Specific hash to display the skin variants builder popup
 if (window.location.hash.toLowerCase() === '#skinvariantsbuilder') {
   $('#skin-variants').addClass('popup-show');
 
-  const containers = ['editor', 'background', 'toolbar'];
-  const colors = ['super-light', 'light', 'dark', 'super-dark'];
-
-  // add corresponding classes when config change
-  const updateSkinVariantsClasses = () => {
-    const domsToUpdate = [
-      $('html'),
-      $('iframe[name=ace_outer]').contents().find('html'),
-      $('iframe[name=ace_outer]').contents().find('iframe[name=ace_inner]').contents().find('html'),
-    ];
-    colors.forEach((color) => {
-      containers.forEach((container) => {
-        domsToUpdate.forEach((el) => { el.removeClass(`${color}-${container}`); });
-      });
-    });
-
-    domsToUpdate.forEach((el) => { el.removeClass('full-width-editor'); });
-
+  const getNewClasses = () => {
     const newClasses = [];
     $('select.skin-variant-color').each(function () {
       newClasses.push(`${$(this).val()}-${$(this).data('container')}`);
     });
     if ($('#skin-variant-full-width').is(':checked')) newClasses.push('full-width-editor');
 
-    domsToUpdate.forEach((el) => { el.addClass(newClasses.join(' ')); });
-
     $('#skin-variants-result').val(`"skinVariants": "${newClasses.join(' ')}",`);
-  };
+
+    return newClasses;
+  }
 
   // run on init
   const updateCheckboxFromSkinClasses = () => {
@@ -48,9 +53,11 @@ if (window.location.hash.toLowerCase() === '#skinvariantsbuilder') {
   };
 
   $('.skin-variant').on('change', () => {
-    updateSkinVariantsClasses();
+    updateSkinVariantsClasses(getNewClasses());
   });
 
   updateCheckboxFromSkinClasses();
-  updateSkinVariantsClasses();
+  updateSkinVariantsClasses(getNewClasses());
 }
+
+exports.updateSkinVariantsClasses = updateSkinVariantsClasses;