diff --git a/admin/src/components/Input/CKEditor/index.js b/admin/src/components/Input/CKEditor/index.js
index 2a0bc5c..13c2a70 100644
--- 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
index ccb9f62..e0317f9 100644
--- 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`