Add basic support for conditional dark mode themes in our editors (#4…

…2322)
joomla · Nov 18, 2023 · 84585cc · 84585cc
1 parent 9a2e18c
commit 84585cc
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 6 deletions.
diff --git a/administrator/language/en-GB/plg_editors_tinymce.ini b/administrator/language/en-GB/plg_editors_tinymce.ini
@@ -53,9 +53,11 @@ PLG_TINY_FIELD_RESIZE_HORIZONTAL_LABEL="Horizontal Resizing"
 PLG_TINY_FIELD_RESIZING_LABEL="Resizing"
 PLG_TINY_FIELD_SETACCESS_LABEL="Assign this Set to"
 PLG_TINY_FIELD_SKIN_ADMIN_LABEL="Administrator Skin"
+PLG_TINY_FIELD_SKIN_ADMIN_DARK_LABEL="Administrator Skin (Dark Mode)"
 PLG_TINY_FIELD_SKIN_INFO_DESC="Copy your new skins to: /media/vendor/tinymce/skins/ui."
 PLG_TINY_FIELD_SKIN_INFO_LABEL="For customised skins go to: <a href=\"https://skin.tiny.cloud/t5/\" target=\"_blank\" rel=\"noopener noreferrer\">Skin Creator</a>"
 PLG_TINY_FIELD_SKIN_LABEL="Site Skin"
+PLG_TINY_FIELD_SKIN_DARK_LABEL="Site Skin (Dark Mode)"
 PLG_TINY_FIELD_SOURCECODE_LABEL="Source Code Highlighting"
 PLG_TINY_FIELD_TEXTPATTERN_DESC="Use Markdown syntax to compose content with links, lists, and other styles." ; Do not translate the word Markdown
 PLG_TINY_FIELD_TEXTPATTERN_LABEL="Markdown"

diff --git a/administrator/templates/atum/index.php b/administrator/templates/atum/index.php
@@ -106,7 +106,7 @@
     <jdoc:include type="scripts" />
 </head>
 
-<body class="admin <?php echo $option . ' view-' . $view . ' layout-' . $layout . ($task ? ' task-' . $task : '') . ($monochrome || $a11y_mono ? ' monochrome' : '') . ($a11y_contrast ? ' a11y_contrast' : '') . ($a11y_highlight ? ' a11y_highlight' : ''); ?>">
+<body data-color-scheme-os class="admin <?php echo $option . ' view-' . $view . ' layout-' . $layout . ($task ? ' task-' . $task : '') . ($monochrome || $a11y_mono ? ' monochrome' : '') . ($a11y_contrast ? ' a11y_contrast' : '') . ($a11y_highlight ? ' a11y_highlight' : ''); ?>">
 <noscript>
     <div class="alert alert-danger" role="alert">
         <?php echo Text::_('JGLOBAL_WARNJAVASCRIPT'); ?>

diff --git a/build/media_source/plg_editors_codemirror/css/codemirror.css b/build/media_source/plg_editors_codemirror/css/codemirror.css
@@ -5,7 +5,6 @@
 
 joomla-editor-codemirror {
   display: block;
-  background-color: #fff;
 }
 .cm-editor {
   margin-bottom: 16px;

diff --git a/build/media_source/plg_editors_codemirror/js/codemirror.es6.js b/build/media_source/plg_editors_codemirror/js/codemirror.es6.js
@@ -22,6 +22,7 @@ import {
 } from '@codemirror/commands';
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
 import { closeBrackets } from '@codemirror/autocomplete';
+import { oneDark } from '@codemirror/theme-one-dark';
 
 const minimalSetup = (() => [
   highlightSpecialChars(),
@@ -60,7 +61,7 @@ const optionsToExtensions = async (options) => {
       extensions.push(modeMod[options.mode](modeOptions));
     }).catch((error) => {
       // eslint-disable-next-line no-console
-      console.error(`Cannot creat an extension for "${options.mode}" syntax mode.`, error);
+      console.error(`Cannot create an extension for "${options.mode}" syntax mode.`, error);
     }));
   }
 
@@ -104,6 +105,11 @@ const optionsToExtensions = async (options) => {
   readOnly.$j_name = 'readOnly';
   extensions.push(readOnly.of(EditorState.readOnly.of(!!options.readOnly)));
 
+  // TODO: Use compartments to update on change of dark mode like: https://discuss.codemirror.net/t/dynamic-light-mode-dark-mode-how/4709
+  if ('colorSchemeOs' in document.body.dataset && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    extensions.push(oneDark);
+  }
+
   // Check for custom extensions,
   // in format [['module1 name or URL', ['init method2']], ['module2 name or URL', ['init method2']], () => <return extension>]
   if (options.customExtensions && options.customExtensions.length) {

diff --git a/build/media_source/plg_editors_tinymce/js/tinymce.es6.js b/build/media_source/plg_editors_tinymce/js/tinymce.es6.js
@@ -155,6 +155,18 @@ Joomla.JoomlaTinyMCE = {
       options.target = element;
     }
 
+    const skinLight = options.skin_light;
+    const skinDark = options.skin_dark;
+
+    if ('colorSchemeOs' in document.body.dataset) {
+      options.skin = (window.matchMedia('(prefers-color-scheme: dark)').matches ? skinDark : skinLight);
+    } else {
+      options.skin = skinLight;
+    }
+
+    delete options.skin_light;
+    delete options.skin_dark;
+
     // Ensure tinymce is initialised in readonly mode if the textarea has readonly applied
     let readOnlyMode = false;
 

diff --git a/layouts/plugins/editors/tinymce/field/tinymcebuilder.php b/layouts/plugins/editors/tinymce/field/tinymcebuilder.php
@@ -62,6 +62,7 @@
 
 $wa->getRegistry()->addExtensionRegistryFile('plg_editors_tinymce');
 $wa->registerAndUseStyle('tinymce.skin', 'media/vendor/tinymce/skins/ui/oxide/skin.min.css')
+    ->registerAndUseStyle('tinymce.skin.dark', 'media/vendor/tinymce/skins/ui/oxide-dark/skin.min.css')
     ->registerAndUseStyle('plg_editors_tinymce.builder', 'plg_editors_tinymce/tinymce-builder.css', [], [], ['tinymce.skin', 'dragula'])
     ->registerScript('plg_editors_tinymce.builder', 'plg_editors_tinymce/tinymce-builder.js', [], ['type' => 'module'], ['dragula', 'plg_editors_tinymce'])
     ->useScript('plg_editors_tinymce.builder')

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "@codemirror/lint": "^6.4.1",
     "@codemirror/search": "^6.5.2",
     "@codemirror/state": "^6.2.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.17.1",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@joomla/joomla-a11y-checker": "^1.0.0",

diff --git a/plugins/editors/tinymce/forms/setoptions.xml b/plugins/editors/tinymce/forms/setoptions.xml
@@ -29,6 +29,16 @@
 			validate="options"
 		/>
 
+		<field
+			name="skin_dark"
+			type="folderlist"
+			label="PLG_TINY_FIELD_SKIN_DARK_LABEL"
+			directory="media/vendor/tinymce/skins/ui"
+			recursive="false"
+			hide_none="true"
+			validate="options"
+		/>
+
 		<field
 			name="skin_admin"
 			type="folderlist"
@@ -39,6 +49,16 @@
 			validate="options"
 		/>
 
+		<field
+			name="skin_admin_dark"
+			type="folderlist"
+			label="PLG_TINY_FIELD_SKIN_ADMIN_DARK_LABEL"
+			directory="media/vendor/tinymce/skins/ui"
+			recursive="false"
+			hide_none="true"
+			validate="options"
+		/>
+
 		<field
 			name="toolbar_mode"
 			type="list"

diff --git a/plugins/editors/tinymce/src/PluginTraits/DisplayTrait.php b/plugins/editors/tinymce/src/PluginTraits/DisplayTrait.php
@@ -174,10 +174,12 @@ public function display(string $name, string $content = '', array $attributes =
         $levelParams->loadObject($extraOptions);
 
         // Set the selected skin
-        $skin = $levelParams->get($app->isClient('administrator') ? 'skin_admin' : 'skin', 'oxide');
+        $skin     = $levelParams->get($app->isClient('administrator') ? 'skin_admin' : 'skin', 'oxide');
+        $skinDark = $levelParams->get($app->isClient('administrator') ? 'skin_admin_dark' : 'skin_dark', 'oxide-dark');
 
         // Check that selected skin exists.
-        $skin = Folder::exists(JPATH_ROOT . '/media/vendor/tinymce/skins/ui/' . $skin) ? $skin : 'oxide';
+        $skin     = Folder::exists(JPATH_ROOT . '/media/vendor/tinymce/skins/ui/' . $skin) ? $skin : 'oxide';
+        $skinDark = Folder::exists(JPATH_ROOT . '/media/vendor/tinymce/skins/ui/' . $skinDark) ? $skinDark : 'oxide-dark';
 
         if (!$levelParams->get('lang_mode', 1)) {
             // Admin selected language
@@ -390,7 +392,8 @@ public function display(string $name, string $content = '', array $attributes =
                 'directionality'              => $language->isRtl() ? 'rtl' : 'ltr',
                 'language'                    => $langPrefix,
                 'autosave_restore_when_empty' => false,
-                'skin'                        => $skin,
+                'skin_light'                  => $skin,
+                'skin_dark'                   => $skinDark,
                 'theme'                       => $theme,
                 'schema'                      => 'html5',