💄 [#1924] tinymce with dark skin

open-formulieren · Oct 17, 2022 · 1b96394 · 1b96394
1 parent 581ddc0
commit 1b96394
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/openforms/js/components/admin/form_design/Editor.js b/src/openforms/js/components/admin/form_design/Editor.js
@@ -9,14 +9,20 @@ const TinyMCEEditor = ({content, onEditorChange}) => {
   const editorRef = useRef(null);
   const tinyMceUrl = useContext(TinyMceContext);
   const intl = useIntl();
+  const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
   return (
     <>
       <Editor
         tinymceScriptSrc={tinyMceUrl}
         onInit={(evt, editor) => (editorRef.current = editor)}
         value={content}
-        init={{...tinyMceConfig, language: intl.locale}}
+        init={{
+          ...tinyMceConfig,
+          language: intl.locale,
+          skin: useDarkMode ? 'oxide-dark' : 'oxide',
+          content_css: useDarkMode ? 'dark' : 'default',
+        }}
         onEditorChange={onEditorChange}
       />
     </>