diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 8147ac8..c418e47 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -3,10 +3,10 @@
 
 <!-- Or you can load custom head-tag JavaScript: -->
 
-<!-- <script
+ <script
   src="dist/src/utils/syncTheme.js"
   type="application/javascript"
-></script> -->
+></script>
 
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/rollup.config.js b/rollup.config.js
index c30dd73..49ee23e 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -6,7 +6,7 @@ import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import preserveDirectives from "rollup-plugin-preserve-directives";
 import { terser } from "rollup-plugin-terser";
 
-export default {
+export default [{
   onwarn(warning, warn) {
     if (
       warning.code === "MODULE_LEVEL_DIRECTIVE" &&
@@ -39,4 +39,24 @@ export default {
     terser({ compress: { directives: false } }),
     preserveDirectives(),
   ],
-};
+
+}, {
+  input: "src/utils/syncTheme.ts",
+  output: [
+    {
+      dir: "dist/src/utils/",
+      format: "iife",
+      name: "syncTheme",
+    },
+  ],
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({
+      tsconfig: "./tsconfig.json",
+      outDir: "dist/src/utils/",
+      declaration: false,
+    }),
+    terser(),
+  ],
+}];
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 181a220..dd5c14e 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,7 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 export * from "./darkMode";
-// export * from "./syncTheme";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
diff --git a/src/utils/syncTheme.ts b/src/utils/syncTheme.ts
index 2640652..df87b68 100644
--- a/src/utils/syncTheme.ts
+++ b/src/utils/syncTheme.ts
@@ -1,5 +1,6 @@
-// import { theme } from "./darkMode";
+import { theme } from "./darkMode"
+
 // This script sets up event listeners to set the appropriate css class in the DOM for the current theme. It's intended to be executed in the head of the document hence it is immediately invoked (IIFE).
-// (() => {
-//   theme.syncTheme();
-// })();
+(() =>  {
+    theme.syncTheme()
+})()