feat: dark mode

admin/src/components/editorjs/darkMode.styles.js

@@ -0,0 +1,40 @@
+export const darkModeStyles = `
+  [id^="editor-js"] .ce-toolbox {
+    background: #fff;
+    border-radius: 3px;
+  }
+  [id^="editor-js"],
+  [id^="editor-js"] .ce-toolbar__plus,
+  [id^="editor-js"] .ce-toolbar__settings-btn,
+  [id^="editor-js"] .cdx-input,
+  [id^="editor-js"] .cdx-input.image-tool__caption,
+  [id^="editor-js"] .tc-toolbox__toggler {
+    color: #fff;
+  }
+  [id^="editor-js"] .ce-toolbar__settings-btn--active, [id^="editor-js"] .ce-toolbar__settings-btn:hover,
+  [id^="editor-js"] .ce-toolbar__plus--active, [id^="editor-js"] .ce-toolbar__plus:hover {
+    background-color: #181826;
+  }
+  [id^="editor-js"] .ce-code__textarea,
+  [id^="editor-js"] .ce-rawtool__textarea,
+  [id^="editor-js"] .tc-add-column:hover,
+  [id^="editor-js"] .tc-toolbox__toggler:hover,
+  [id^="editor-js"] .tc-popover, 
+  [id^="editor-js"] .tc-wrap:hover,
+  [id^="editor-js"] .tc-add-row:hover:before,
+  [id^="editor-js"] .cdx-button,
+  [id^="editor-js"] .tc-add-row:hover {
+    color: #fff;
+    background-color: #181826;
+  }
+  [id^="editor-js"] .tc-wrap:hover svg rect {
+    fill: #181826;
+  }
+  [id^="editor-js"] .cdx-warning::before {
+    filter: brightness(10);
+  }
+  [id^="editor-js"] .cdx-checklist__item-checkbox {
+    border-color: #fff;
+    background-color: #181826;
+  }
+`;

admin/src/components/editorjs/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import EditorJs from 'react-editor-js';
 import requiredTools from './requiredTools';
@@ -7,12 +7,14 @@ import customTools from '../../config/customTools';
 import MediaLibAdapter from '../medialib/adapter'
 import MediaLibComponent from '../medialib/component';
 import {changeFunc, getToggleFunc} from '../medialib/utils';
+import { darkModeStyles } from './darkMode.styles'
 
 const Editor = ({ onChange, name, value }) => {
-
+  const isUsingDarkMode = window.localStorage?.STRAPI_THEME === "dark";
   const [editorInstance, setEditorInstance] = useState();
   const [mediaLibBlockIndex, setMediaLibBlockIndex] = useState(-1);
   const [isMediaLibOpen, setIsMediaLibOpen] = useState(false);
+  const stylesheetRef = useRef(null)
 
   const mediaLibToggleFunc = useCallback(getToggleFunc({
     openStateSetter: setIsMediaLibOpen,
@@ -29,6 +31,24 @@ const Editor = ({ onChange, name, value }) => {
     mediaLibToggleFunc();
   }, [mediaLibBlockIndex, editorInstance]);
 
+  useEffect(() => {
+    if (isUsingDarkMode) {
+      const stylesheet = document.createElement("style");
+
+      stylesheetRef.current = stylesheet;
+
+      stylesheet.innerHTML = darkModeStyles;
+
+      document.head.appendChild(stylesheet);
+    }
+
+    return () => {
+      if (stylesheetRef.current) {
+        stylesheetRef.current.parentNode.removeChild(stylesheetRef.current);
+      }
+    }
+  }, [stylesheetRef, isUsingDarkMode]);
+
   const customImageTool = {
     mediaLib: {
       class: MediaLibAdapter,