fix: wrong color mode, need to reload to apply color mode setting #146

nshenderov · Aug 5, 2024 · 3cae545 · 3cae545
1 parent 3db6403
commit 3cae545
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/admin/src/components/Input/CKEditor/index.js b/admin/src/components/Input/CKEditor/index.js
@@ -11,8 +11,6 @@ import MediaLib from "../MediaLib";
 import ckeditor5Dll from "ckeditor5/build/ckeditor5-dll.js";
 import ckeditor5EditorClassicDll from "@ckeditor/ckeditor5-editor-classic/build/editor-classic.js";
 
-const GlobalStyling = getGlobalStyling();
-
 const Wrapper = styled("div")`${({ editorStyles }) => editorStyles}`;
 
 const Editor = ({ onChange, name, value, disabled, preset, maxLength }) => {
@@ -32,6 +30,8 @@ const Editor = ({ onChange, name, value, disabled, preset, maxLength }) => {
   const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
 
   const handleCounter = (number) => number > maxLength ? setLengthMax(true) : setLengthMax(false);
+
+  const GlobalStyling = getGlobalStyling();
 
   useEffect(() => {
     (async () => {

diff --git a/admin/src/components/Input/CKEditor/styling.js b/admin/src/components/Input/CKEditor/styling.js
@@ -1,11 +1,19 @@
 import baseTheme from "./theme";
 import { createGlobalStyle } from "styled-components";
 
+const getSystemColorScheme= () =>
+  window.matchMedia &&
+  window.matchMedia("(prefers-color-scheme: dark)").matches ?
+  "dark" : "light";
+
 export const getGlobalStyling = () => {
-
-  const variant = localStorage.getItem("STRAPI_THEME") || "light";
+
   const { theme: userTheme, themeOverwrite: overwrite } = globalThis.CKEditorConfig || {};
 
+  const profileTheme = localStorage.getItem("STRAPI_THEME");
+
+  const variant = profileTheme && profileTheme !== "system" ? profileTheme : getSystemColorScheme();
+
   const theme = overwrite ? userTheme : { ...baseTheme, ...userTheme};
 
   return createGlobalStyle`