diff --git a/src/AntiFlickerScript.jsx b/src/AntiFlickerScript.jsx
new file mode 100644
index 0000000..654738a
--- /dev/null
+++ b/src/AntiFlickerScript.jsx
@@ -0,0 +1,6 @@
+import React, { memo } from 'react';
+
+export default memo(function AntiFlickerScript({ theme, color }) {
+    const script = `(function(theme,root){root.classList.remove(\`'${Object.values(color).join("','")}'\`);root.classList.add(theme);root.style.colorScheme=theme;})('${theme}',document.firstElementChild)`;
+    return <script dangerouslySetInnerHTML={{ __html: script }} />
+}, () => true);
diff --git a/src/ThemeProvider.jsx b/src/ThemeProvider.jsx
index 942c091..9a98251 100644
--- a/src/ThemeProvider.jsx
+++ b/src/ThemeProvider.jsx
@@ -1,16 +1,12 @@
 'use client'
 
-import React, { useEffect, useState, useCallback, memo } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import ThemeContext from './ThemeContext';
 import { getPreference, setPreference, getColors } from './helper/theme.helper';
+import AntiFlickerScript from './AntiFlickerScript';
 
 const color = getColors();
 
-const AntiFlickerScript = memo(function Script({ theme, color }) {
-    const script = (() => `(function(theme,root){root.classList.remove(\`'${Object.values(color).join("','")}'\`);root.classList.add(theme);root.style.colorScheme=theme;})('${theme}',document.firstElementChild)`)();
-    return <script dangerouslySetInnerHTML={{ __html: script }} />
-}, () => true);
-
 export default function ThemeProvider({
     children,
     storageKey,