Consider device dark mode setting

Author: Gared

src/static/js/pad.ts

@@ -52,6 +52,7 @@ import {randomString} from "./pad_utils";
 const socketio = require('./socketio');
 
 const hooks = require('./pluginfw/hooks');
+const skinVariants = require('./skin_variants');
 
 // This array represents all GET-parameters which can be used to change a setting.
 //   name:     the parameter-name, eg  `?noColors=true`  =>  `noColors`
@@ -480,6 +481,10 @@ const pad = {
 
       $('#editorcontainer').addClass('initialized');
 
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        skinVariants.updateSkinVariantsClasses(['dark-editor', 'dark-background', '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;