@cruxext/theme 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Maysara Elshewehy (https://github.com/maysara-elshewehy)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,184 @@
+<!-- ╔══════════════════════════════ BEG ══════════════════════════════╗ -->
+
+<br>
+<div align="center">
+    <p>
+        <img src="./assets/img/logo.png" alt="logo" style="" height="60" />
+    </p>
+</div>
+
+<div align="center">
+    <img src="https://img.shields.io/badge/v-0.0.1-black"/>
+    <a href="https://github.com/cruxext-org"><img src="https://img.shields.io/badge/🔥-@cruxext-black"/></a>
+    <br>
+    <img src="https://img.shields.io/badge/coverage-0%25-brightgreen" alt="Test Coverage" />
+    <img src="https://img.shields.io/github/issues/cruxext-orgz/theme?style=flat" alt="Github Repo Issues" />
+    <img src="https://img.shields.io/github/stars/cruxext-orgz/theme?style=social" alt="GitHub Repo stars" />
+</div>
+<br>
+
+<!-- ╚═════════════════════════════════════════════════════════════════╝ -->
+
+
+
+<!-- ╔══════════════════════════════ DOC ══════════════════════════════╗ -->
+
+- ## Overview 👀
+
+    - #### Why ?
+        > A lightweight, reactive theme management solution for dark/light mode switching with persistent storage and system preference detection, built for the CruxJS ecosystem.
+
+    - #### When ?
+        > Use this extension when you need to:
+        > - Implement dark/light mode switching in your application
+        > - Respect user's system color scheme preferences
+        > - Persist theme preferences across sessions
+        > - Build reactive UI components that respond to theme changes
+        > - Integrate theme management into CruxJS-based applications
+
+        > When using [@cruxjs/app](https://github.com/cruxjs-org/app) and [@cruxjs/client](https://github.com/cruxjs-org/client).
+
+    <br>
+    <br>
+
+- ## Quick Start 🔥
+
+    > install [`hmm`](https://github.com/minejs-org/hmm) first.
+
+    ```bash
+    # in your terminal
+    hmm i @cruxext/theme
+    ```
+
+    ```ts
+    // in your ts files
+    import { ... } from `@cruxext/theme`;
+    ```
+
+    <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
+    <br>
+
+    - ### Example
+
+        ```typescript
+        import { type JSXElement }                  from '@minejs/jsx';
+        import { effect, signal }                   from '@minejs/signals';
+        import { Button }                           from '@cruxkit/core';
+        import { toggleTheme, getCurrentTheme }     from '@cruxext/theme';
+
+        export function MyComponent(): JSXElement {
+            const isDark = signal(getCurrentTheme() == 'dark');
+
+            effect(() => {
+                console.log('isDark:', isDark());
+                const btn = document.querySelector('#theme_button');
+                if(!btn) return;
+                toggleTheme();
+
+                btn.textContent = isDark() ? '☀️ Light Mode' : '🌙 Dark Mode';
+            });
+
+            return (
+                <Button
+                    id="theme_button"
+                    variant="solid"
+                    color="brand"
+                    onClick={() => isDark.set(!isDark())}
+                >
+                    {isDark() ? '☀️ Light Mode' : '🌙 Dark Mode'}
+                </Button>
+            );
+        }
+        ```
+
+    <br>
+    <br>
+
+- ## Documentation 📑
+
+
+    - ### API ⛓️
+
+        - #### `createThemeExtension(config?: ThemeManagerConfig): ClientExtension`
+            > Initializes the theme extension for your CruxJS application. Call this during your app bootstrap.
+
+            ```typescript
+            import { createThemeExtension } from '@cruxext/theme';
+
+            const themeExt = createThemeExtension({
+                default: 'light',
+                available: ['light', 'dark', 'auto']
+            });
+            ```
+
+        - #### `setTheme(themeName: string): void`
+
+            > Sets the active theme to the specified name. Must be one of the available themes defined in config.
+
+            ```typescript
+            import { setTheme } from '@cruxext/theme';
+
+            setTheme('dark');
+            ```
+
+        - #### `toggleTheme(): void`
+
+            > Toggles between available themes. Cycles through the first non-current available theme.
+
+            ```typescript
+            import { toggleTheme } from '@cruxext/theme';
+
+            toggleTheme();
+            ```
+
+        - #### `getCurrentTheme(): string`
+
+            > Returns the name of the currently active theme.
+
+            ```typescript
+            import { getCurrentTheme } from '@cruxext/theme';
+
+            const current = getCurrentTheme(); // 'light' | 'dark' | etc.
+            ```
+
+        - #### `getThemeManager(): ThemeManager`
+
+            > Returns the ThemeManager instance for advanced usage and direct signal access.
+
+            ```typescript
+            import { getThemeManager, signal } from '@cruxext/theme';
+
+            const manager = getThemeManager();
+            const themeSignal = manager.signal; // reactive signal
+            ```
+
+        <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
+        <br>
+
+    - ### Related 🔗
+
+        - ##### [@minejs/signals](https://github.com/minejs-org/signals)
+            > Reactive signals library used for theme state management
+
+        - ##### [@minejs/store](https://github.com/minejs-org/store)
+            > Persistent storage solution for maintaining theme preferences
+
+        - ##### [@cruxkit/core](https://github.com/cruxkit/core)
+            > Core UI component library that works seamlessly with theming
+
+<!-- ╚═════════════════════════════════════════════════════════════════╝ -->
+
+
+
+<!-- ╔══════════════════════════════ END ══════════════════════════════╗ -->
+
+<br>
+<br>
+
+---
+
+<div align="center">
+    <a href="https://github.com/maysara-elshewehy"><img src="https://img.shields.io/badge/by-Maysara-black"/></a>
+</div>
+
+<!-- ╚═════════════════════════════════════════════════════════════════╝ -->

package/dist/index.cjs

@@ -0,0 +1,2 @@
+'use strict';var store=require('@minejs/store'),signals=require('@minejs/signals'),client=require('@cruxjs/client');var i=class{constructor(e){this.config=e;let t=new store.Storage({type:"local"});this.store=store.createStore({state:{theme:e.default},persist:true,storage:t,storageKey:"app:theme"}),this.signal=this.store.state.theme;let s=t.get("app:theme:theme")||e.default;this.signal.set(s),this.applyTheme(s),signals.effect(()=>{let n=this.signal?.();n&&this.applyTheme(n),console.log(`[ThemeManager] Reactive effect applied theme: ${n}`);}),signals.effect(()=>{let n=window.matchMedia("(prefers-color-scheme: dark)"),h=l=>{t.get("app:theme:theme")||this.signal.set(l.matches?"dark":"light");};return n.addEventListener("change",h),()=>n.removeEventListener("change",h)});}getTheme(){return this.signal?.()??this.config.default??"light"}setTheme(e){if(!this.config.available.includes(e)){console.warn(`[ThemeManager] Unsupported theme: ${e}`);return}this.signal&&(this.signal.set(e),console.log(`[ThemeManager] Theme set to: ${e}`));}toggleTheme(){if(!this.signal)return;let e=this.signal(),t=this.config.available.find(r=>r!==e);t&&(this.signal.set(t),console.log(`[ThemeManager] Theme toggled to: ${t}`));}applyTheme(e){(document.documentElement||document.rootElement).setAttribute("data-theme",e),console.log(`[ThemeManager] Applied theme: ${e}`);}};var m,a=()=>m,C=o=>a().setTheme(o),y=()=>a().toggleTheme(),b=()=>a().getTheme();function w(o){return {name:"ThemeExtension",onBoot:e=>{o&&(e.cconfig.theme={...e.cconfig.theme,...o}),e.cconfig.theme||(e.cconfig.theme={default:"dark",available:["dark","light"]}),m=new i({default:e.cconfig.theme.default,available:e.cconfig.theme.available});}}}Object.defineProperty(exports,"ThemeManagerConfig",{enumerable:true,get:function(){return client.ThemeConfig}});exports.ThemeManager=i;exports.createThemeExtension=w;exports.getCurrentTheme=b;exports.getThemeManager=a;exports.setTheme=C;exports.toggleTheme=y;//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/mod/theme_manager.ts","../src/index.ts"],"names":["ThemeManager","config","storage","Storage","createStore","initialTheme","effect","currentTheme","mediaQuery","handleChange","e","themeName","nextTheme","t","themeManager","getThemeManager","setTheme","toggleTheme","getCurrentTheme","createThemeExtension","ctx"],"mappings":"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","file":"index.cjs","sourcesContent":["// src/mod/theme_manager.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n    import { ThemeManagerConfig                 } from \"../types\";\r\n    import { createStore, Storage               } from '@minejs/store';\r\n    import { signal, effect                     } from '@minejs/signals';\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n    export class ThemeManager {\r\n\r\n        // ┌──────────────────────────────── INIT ──────────────────────────────┐\r\n\r\n            public store: ReturnType<typeof createStore>;\r\n            public signal: ReturnType<typeof signal<string>>;\r\n\r\n            constructor(public config: ThemeManagerConfig) {\r\n\r\n                const storage = new Storage({ type: 'local' });\r\n\r\n                this.store = createStore({\r\n                    state: {\r\n                        theme: config.default\r\n                    },\r\n                    persist: true,\r\n                    storage,\r\n                    storageKey: 'app:theme'\r\n                });\r\n\r\n                this.signal = this.store.state.theme;\r\n\r\n                // Set initial theme on body\r\n                const storedTheme = storage.get('app:theme:theme') as string | null;\r\n                const initialTheme = storedTheme || config.default;\r\n                this.signal.set(initialTheme);\r\n                this.applyTheme(initialTheme);\r\n\r\n                // Setup reactive effect: apply theme whenever signal changes\r\n                effect(() => {\r\n                    const currentTheme = this.signal?.();\r\n                    if (currentTheme) {\r\n                        this.applyTheme(currentTheme);\r\n                    }\r\n\r\n                    console.log(`[ThemeManager] Reactive effect applied theme: ${currentTheme}`);\r\n                });\r\n\r\n                // Listen for system theme changes\r\n                effect(() => {\r\n                    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\r\n\r\n                    const handleChange = (e: MediaQueryListEvent) => {\r\n                        if (!storage.get('app:theme:theme')) this.signal.set(e.matches ? 'dark' : 'light');\r\n                    };\r\n\r\n                    mediaQuery.addEventListener('change', handleChange);\r\n                    return () => mediaQuery.removeEventListener('change', handleChange);\r\n                });\r\n            }\r\n\r\n        // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n        // ┌──────────────────────────────── MAIN ──────────────────────────────┐\r\n\r\n            getTheme(): string {\r\n                return this.signal?.() ?? this.config.default ?? 'light';\r\n            }\r\n\r\n            setTheme(themeName: string): void {\r\n                if (!this.config.available.includes(themeName)) {\r\n                    console.warn(`[ThemeManager] Unsupported theme: ${themeName}`);\r\n                    return;\r\n                }\r\n\r\n                // Update signal directly - effect will handle DOM updates\r\n                if (this.signal) {\r\n                    this.signal.set(themeName);\r\n                    console.log(`[ThemeManager] Theme set to: ${themeName}`);\r\n                }\r\n            }\r\n\r\n            toggleTheme(): void {\r\n                if (!this.signal) return;\r\n                const currentTheme = this.signal();\r\n                const nextTheme = this.config.available.find(t => t !== currentTheme);\r\n                if (nextTheme) {\r\n                    this.signal.set(nextTheme);\r\n                    console.log(`[ThemeManager] Theme toggled to: ${nextTheme}`);\r\n                }\r\n            }\r\n\r\n        // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n        // ┌──────────────────────────────── HELP ──────────────────────────────┐\r\n\r\n            private applyTheme(themeName: string): void {\r\n                const htmlEl = document.documentElement || document.rootElement;\r\n                htmlEl.setAttribute('data-theme', themeName);\r\n                console.log(`[ThemeManager] Applied theme: ${themeName}`);\r\n            }\r\n\r\n        // └────────────────────────────────────────────────────────────────────┘\r\n\r\n    };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n","// src/index.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n    import { ClientExtension, ExtensionContext  } from \"@cruxjs/client\";\r\n    import { ThemeManagerConfig                 } from \"./types\";\r\n    import { ThemeManager                       } from \"./mod/theme_manager\";\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ MAIN ════════════════════════════════════════╗\r\n\r\n    // Theme manager instance\r\n    let themeManager : ThemeManager;\r\n\r\n    // Exported theme functions\r\n    export const getThemeManager    = () => themeManager;\r\n    export const setTheme           = (themeName: string) => getThemeManager().setTheme(themeName);\r\n    export const toggleTheme        = () => getThemeManager().toggleTheme();\r\n    export const getCurrentTheme    = () => getThemeManager().getTheme();\r\n\r\n    // Theme extension\r\n    export function createThemeExtension(config?: ThemeManagerConfig) : ClientExtension {\r\n        return {\r\n            name : 'ThemeExtension',\r\n\r\n            onBoot: (ctx: ExtensionContext) => {\r\n                // if config provided, merge into client config\r\n                if (config) {\r\n                    ctx.cconfig.theme = {\r\n                        ...ctx.cconfig.theme,\r\n                        ...config\r\n                    };\r\n                }\r\n\r\n                // if no theme config provided, set default\r\n                if (!ctx.cconfig.theme) {\r\n                    ctx.cconfig.theme = {\r\n                        default         : 'dark',\r\n                        available       : ['dark', 'light']\r\n                    };\r\n                }\r\n\r\n                // create theme manager instance\r\n                themeManager    = new ThemeManager({\r\n                    default     : ctx.cconfig.theme!.default,\r\n                    available   : ctx.cconfig.theme!.available\r\n                });\r\n            }\r\n        };\r\n    };\r\n\r\n    // export\r\n    export * from \"./types\";\r\n    export { ThemeManager };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝"]}

package/dist/index.d.cts

@@ -0,0 +1,23 @@
+import { ThemeConfig, ClientExtension } from '@cruxjs/client';
+export { ThemeConfig as ThemeManagerConfig } from '@cruxjs/client';
+import { createStore } from '@minejs/store';
+import { signal } from '@minejs/signals';
+
+declare class ThemeManager {
+    config: ThemeConfig;
+    store: ReturnType<typeof createStore>;
+    signal: ReturnType<typeof signal<string>>;
+    constructor(config: ThemeConfig);
+    getTheme(): string;
+    setTheme(themeName: string): void;
+    toggleTheme(): void;
+    private applyTheme;
+}
+
+declare const getThemeManager: () => ThemeManager;
+declare const setTheme: (themeName: string) => void;
+declare const toggleTheme: () => void;
+declare const getCurrentTheme: () => string;
+declare function createThemeExtension(config?: ThemeConfig): ClientExtension;
+
+export { ThemeManager, createThemeExtension, getCurrentTheme, getThemeManager, setTheme, toggleTheme };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import { ThemeConfig, ClientExtension } from '@cruxjs/client';
+export { ThemeConfig as ThemeManagerConfig } from '@cruxjs/client';
+import { createStore } from '@minejs/store';
+import { signal } from '@minejs/signals';
+
+declare class ThemeManager {
+    config: ThemeConfig;
+    store: ReturnType<typeof createStore>;
+    signal: ReturnType<typeof signal<string>>;
+    constructor(config: ThemeConfig);
+    getTheme(): string;
+    setTheme(themeName: string): void;
+    toggleTheme(): void;
+    private applyTheme;
+}
+
+declare const getThemeManager: () => ThemeManager;
+declare const setTheme: (themeName: string) => void;
+declare const toggleTheme: () => void;
+declare const getCurrentTheme: () => string;
+declare function createThemeExtension(config?: ThemeConfig): ClientExtension;
+
+export { ThemeManager, createThemeExtension, getCurrentTheme, getThemeManager, setTheme, toggleTheme };

package/dist/index.js

@@ -0,0 +1,2 @@
+import {Storage,createStore}from'@minejs/store';import {effect}from'@minejs/signals';export{ThemeConfig as ThemeManagerConfig}from'@cruxjs/client';var i=class{constructor(e){this.config=e;let t=new Storage({type:"local"});this.store=createStore({state:{theme:e.default},persist:true,storage:t,storageKey:"app:theme"}),this.signal=this.store.state.theme;let s=t.get("app:theme:theme")||e.default;this.signal.set(s),this.applyTheme(s),effect(()=>{let n=this.signal?.();n&&this.applyTheme(n),console.log(`[ThemeManager] Reactive effect applied theme: ${n}`);}),effect(()=>{let n=window.matchMedia("(prefers-color-scheme: dark)"),h=l=>{t.get("app:theme:theme")||this.signal.set(l.matches?"dark":"light");};return n.addEventListener("change",h),()=>n.removeEventListener("change",h)});}getTheme(){return this.signal?.()??this.config.default??"light"}setTheme(e){if(!this.config.available.includes(e)){console.warn(`[ThemeManager] Unsupported theme: ${e}`);return}this.signal&&(this.signal.set(e),console.log(`[ThemeManager] Theme set to: ${e}`));}toggleTheme(){if(!this.signal)return;let e=this.signal(),t=this.config.available.find(r=>r!==e);t&&(this.signal.set(t),console.log(`[ThemeManager] Theme toggled to: ${t}`));}applyTheme(e){(document.documentElement||document.rootElement).setAttribute("data-theme",e),console.log(`[ThemeManager] Applied theme: ${e}`);}};var m,a=()=>m,C=o=>a().setTheme(o),y=()=>a().toggleTheme(),b=()=>a().getTheme();function w(o){return {name:"ThemeExtension",onBoot:e=>{o&&(e.cconfig.theme={...e.cconfig.theme,...o}),e.cconfig.theme||(e.cconfig.theme={default:"dark",available:["dark","light"]}),m=new i({default:e.cconfig.theme.default,available:e.cconfig.theme.available});}}}export{i as ThemeManager,w as createThemeExtension,b as getCurrentTheme,a as getThemeManager,C as setTheme,y as toggleTheme};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/mod/theme_manager.ts","../src/index.ts"],"names":["ThemeManager","config","storage","Storage","createStore","initialTheme","effect","currentTheme","mediaQuery","handleChange","e","themeName","nextTheme","t","themeManager","getThemeManager","setTheme","toggleTheme","getCurrentTheme","createThemeExtension","ctx"],"mappings":"uJAkBiBA,CAAAA,CAAN,KAAmB,CAOlB,WAAA,CAAmBC,EAA4B,CAA5B,IAAA,CAAA,MAAA,CAAAA,CAAAA,CAEf,IAAMC,EAAU,IAAIC,OAAAA,CAAQ,CAAE,IAAA,CAAM,OAAQ,CAAC,CAAA,CAE7C,IAAA,CAAK,KAAA,CAAQC,YAAY,CACrB,KAAA,CAAO,CACH,KAAA,CAAOH,EAAO,OAClB,CAAA,CACA,OAAA,CAAS,IAAA,CACT,OAAA,CAAAC,CAAAA,CACA,UAAA,CAAY,WAChB,CAAC,CAAA,CAED,IAAA,CAAK,MAAA,CAAS,IAAA,CAAK,MAAM,KAAA,CAAM,KAAA,CAI/B,IAAMG,CAAAA,CADcH,EAAQ,GAAA,CAAI,iBAAiB,CAAA,EACbD,CAAAA,CAAO,QAC3C,IAAA,CAAK,MAAA,CAAO,GAAA,CAAII,CAAY,EAC5B,IAAA,CAAK,UAAA,CAAWA,CAAY,CAAA,CAG5BC,OAAO,IAAM,CACT,IAAMC,CAAAA,CAAe,KAAK,MAAA,IAAS,CAC/BA,CAAAA,EACA,IAAA,CAAK,UAAA,CAAWA,CAAY,CAAA,CAGhC,OAAA,CAAQ,IAAI,CAAA,8CAAA,EAAiDA,CAAY,CAAA,CAAE,EAC/E,CAAC,CAAA,CAGDD,MAAAA,CAAO,IAAM,CACT,IAAME,CAAAA,CAAa,MAAA,CAAO,UAAA,CAAW,8BAA8B,EAE7DC,CAAAA,CAAgBC,CAAAA,EAA2B,CACxCR,CAAAA,CAAQ,IAAI,iBAAiB,CAAA,EAAG,IAAA,CAAK,MAAA,CAAO,IAAIQ,CAAAA,CAAE,OAAA,CAAU,MAAA,CAAS,OAAO,EACrF,CAAA,CAEA,OAAAF,CAAAA,CAAW,gBAAA,CAAiB,SAAUC,CAAY,CAAA,CAC3C,IAAMD,CAAAA,CAAW,oBAAoB,QAAA,CAAUC,CAAY,CACtE,CAAC,EACL,CAOA,QAAA,EAAmB,CACf,OAAO,KAAK,MAAA,IAAS,EAAK,IAAA,CAAK,MAAA,CAAO,SAAW,OACrD,CAEA,QAAA,CAASE,CAAAA,CAAyB,CAC9B,GAAI,CAAC,IAAA,CAAK,MAAA,CAAO,UAAU,QAAA,CAASA,CAAS,CAAA,CAAG,CAC5C,QAAQ,IAAA,CAAK,CAAA,kCAAA,EAAqCA,CAAS,CAAA,CAAE,CAAA,CAC7D,MACJ,CAGI,IAAA,CAAK,SACL,IAAA,CAAK,MAAA,CAAO,GAAA,CAAIA,CAAS,EACzB,OAAA,CAAQ,GAAA,CAAI,CAAA,6BAAA,EAAgCA,CAAS,EAAE,CAAA,EAE/D,CAEA,WAAA,EAAoB,CAChB,GAAI,CAAC,IAAA,CAAK,MAAA,CAAQ,OAClB,IAAMJ,CAAAA,CAAe,IAAA,CAAK,MAAA,EAAO,CAC3BK,EAAY,IAAA,CAAK,MAAA,CAAO,SAAA,CAAU,IAAA,CAAKC,GAAKA,CAAAA,GAAMN,CAAY,CAAA,CAChEK,CAAAA,GACA,IAAA,CAAK,MAAA,CAAO,GAAA,CAAIA,CAAS,EACzB,OAAA,CAAQ,GAAA,CAAI,CAAA,iCAAA,EAAoCA,CAAS,EAAE,CAAA,EAEnE,CAOQ,UAAA,CAAWD,CAAAA,CAAyB,EACzB,QAAA,CAAS,eAAA,EAAmB,QAAA,CAAS,WAAA,EAC7C,aAAa,YAAA,CAAcA,CAAS,CAAA,CAC3C,OAAA,CAAQ,IAAI,CAAA,8BAAA,EAAiCA,CAAS,CAAA,CAAE,EAC5D,CAIR,EC/FA,IAAIG,CAAAA,CAGSC,CAAAA,CAAqB,IAAMD,CAAAA,CAC3BE,CAAAA,CAAsBL,CAAAA,EAAsBI,CAAAA,GAAkB,QAAA,CAASJ,CAAS,CAAA,CAChFM,CAAAA,CAAqB,IAAMF,CAAAA,EAAgB,CAAE,WAAA,EAAY,CACzDG,EAAqB,IAAMH,CAAAA,EAAgB,CAAE,QAAA,GAGnD,SAASI,CAAAA,CAAqBlB,CAAAA,CAA+C,CAChF,OAAO,CACH,IAAA,CAAO,gBAAA,CAEP,MAAA,CAASmB,GAA0B,CAE3BnB,CAAAA,GACAmB,CAAAA,CAAI,OAAA,CAAQ,MAAQ,CAChB,GAAGA,CAAAA,CAAI,OAAA,CAAQ,MACf,GAAGnB,CACP,CAAA,CAAA,CAICmB,CAAAA,CAAI,QAAQ,KAAA,GACbA,CAAAA,CAAI,OAAA,CAAQ,KAAA,CAAQ,CAChB,OAAA,CAAkB,MAAA,CAClB,SAAA,CAAkB,CAAC,OAAQ,OAAO,CACtC,CAAA,CAAA,CAIJN,CAAAA,CAAkB,IAAId,CAAAA,CAAa,CAC/B,OAAA,CAAcoB,CAAAA,CAAI,QAAQ,KAAA,CAAO,OAAA,CACjC,SAAA,CAAcA,CAAAA,CAAI,QAAQ,KAAA,CAAO,SACrC,CAAC,EACL,CACJ,CACJ","file":"index.js","sourcesContent":["// src/mod/theme_manager.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n    import { ThemeManagerConfig                 } from \"../types\";\r\n    import { createStore, Storage               } from '@minejs/store';\r\n    import { signal, effect                     } from '@minejs/signals';\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n    export class ThemeManager {\r\n\r\n        // ┌──────────────────────────────── INIT ──────────────────────────────┐\r\n\r\n            public store: ReturnType<typeof createStore>;\r\n            public signal: ReturnType<typeof signal<string>>;\r\n\r\n            constructor(public config: ThemeManagerConfig) {\r\n\r\n                const storage = new Storage({ type: 'local' });\r\n\r\n                this.store = createStore({\r\n                    state: {\r\n                        theme: config.default\r\n                    },\r\n                    persist: true,\r\n                    storage,\r\n                    storageKey: 'app:theme'\r\n                });\r\n\r\n                this.signal = this.store.state.theme;\r\n\r\n                // Set initial theme on body\r\n                const storedTheme = storage.get('app:theme:theme') as string | null;\r\n                const initialTheme = storedTheme || config.default;\r\n                this.signal.set(initialTheme);\r\n                this.applyTheme(initialTheme);\r\n\r\n                // Setup reactive effect: apply theme whenever signal changes\r\n                effect(() => {\r\n                    const currentTheme = this.signal?.();\r\n                    if (currentTheme) {\r\n                        this.applyTheme(currentTheme);\r\n                    }\r\n\r\n                    console.log(`[ThemeManager] Reactive effect applied theme: ${currentTheme}`);\r\n                });\r\n\r\n                // Listen for system theme changes\r\n                effect(() => {\r\n                    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\r\n\r\n                    const handleChange = (e: MediaQueryListEvent) => {\r\n                        if (!storage.get('app:theme:theme')) this.signal.set(e.matches ? 'dark' : 'light');\r\n                    };\r\n\r\n                    mediaQuery.addEventListener('change', handleChange);\r\n                    return () => mediaQuery.removeEventListener('change', handleChange);\r\n                });\r\n            }\r\n\r\n        // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n        // ┌──────────────────────────────── MAIN ──────────────────────────────┐\r\n\r\n            getTheme(): string {\r\n                return this.signal?.() ?? this.config.default ?? 'light';\r\n            }\r\n\r\n            setTheme(themeName: string): void {\r\n                if (!this.config.available.includes(themeName)) {\r\n                    console.warn(`[ThemeManager] Unsupported theme: ${themeName}`);\r\n                    return;\r\n                }\r\n\r\n                // Update signal directly - effect will handle DOM updates\r\n                if (this.signal) {\r\n                    this.signal.set(themeName);\r\n                    console.log(`[ThemeManager] Theme set to: ${themeName}`);\r\n                }\r\n            }\r\n\r\n            toggleTheme(): void {\r\n                if (!this.signal) return;\r\n                const currentTheme = this.signal();\r\n                const nextTheme = this.config.available.find(t => t !== currentTheme);\r\n                if (nextTheme) {\r\n                    this.signal.set(nextTheme);\r\n                    console.log(`[ThemeManager] Theme toggled to: ${nextTheme}`);\r\n                }\r\n            }\r\n\r\n        // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n        // ┌──────────────────────────────── HELP ──────────────────────────────┐\r\n\r\n            private applyTheme(themeName: string): void {\r\n                const htmlEl = document.documentElement || document.rootElement;\r\n                htmlEl.setAttribute('data-theme', themeName);\r\n                console.log(`[ThemeManager] Applied theme: ${themeName}`);\r\n            }\r\n\r\n        // └────────────────────────────────────────────────────────────────────┘\r\n\r\n    };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n","// src/index.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n    import { ClientExtension, ExtensionContext  } from \"@cruxjs/client\";\r\n    import { ThemeManagerConfig                 } from \"./types\";\r\n    import { ThemeManager                       } from \"./mod/theme_manager\";\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ MAIN ════════════════════════════════════════╗\r\n\r\n    // Theme manager instance\r\n    let themeManager : ThemeManager;\r\n\r\n    // Exported theme functions\r\n    export const getThemeManager    = () => themeManager;\r\n    export const setTheme           = (themeName: string) => getThemeManager().setTheme(themeName);\r\n    export const toggleTheme        = () => getThemeManager().toggleTheme();\r\n    export const getCurrentTheme    = () => getThemeManager().getTheme();\r\n\r\n    // Theme extension\r\n    export function createThemeExtension(config?: ThemeManagerConfig) : ClientExtension {\r\n        return {\r\n            name : 'ThemeExtension',\r\n\r\n            onBoot: (ctx: ExtensionContext) => {\r\n                // if config provided, merge into client config\r\n                if (config) {\r\n                    ctx.cconfig.theme = {\r\n                        ...ctx.cconfig.theme,\r\n                        ...config\r\n                    };\r\n                }\r\n\r\n                // if no theme config provided, set default\r\n                if (!ctx.cconfig.theme) {\r\n                    ctx.cconfig.theme = {\r\n                        default         : 'dark',\r\n                        available       : ['dark', 'light']\r\n                    };\r\n                }\r\n\r\n                // create theme manager instance\r\n                themeManager    = new ThemeManager({\r\n                    default     : ctx.cconfig.theme!.default,\r\n                    available   : ctx.cconfig.theme!.available\r\n                });\r\n            }\r\n        };\r\n    };\r\n\r\n    // export\r\n    export * from \"./types\";\r\n    export { ThemeManager };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+	"name": "@cruxext/theme",
+	"version": "0.0.1",
+	"description": "Lightweight reactive theme manager for CruxJS with dark/light mode support and persistent storage.",
+	"keywords": ["cruxjs", "extension", "theme"],
+	"license": "MIT",
+	"homepage": "https://github.com/cruxext-org/theme#readme",
+	"bugs": {
+		"url": "https://github.com/cruxext-org/theme/issues"
+	},
+	"author": {
+		"name": "Maysara",
+		"email": "maysara.elshewehy@gmail.com",
+		"url": "https://github.com/maysara-elshewehy"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/cruxext-org/theme.git"
+	},
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"files": ["dist"],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.js"
+		}
+	},
+	"scripts": {
+		"build": "tsup",
+		"lint": "eslint src --ext .ts",
+		"test": "bun test"
+	},
+	"engines": {
+		"bun": ">=1.3.3"
+	},
+	"peerDependencies": {
+		"bun": "^1.3.3"
+	},
+	"dependencies": {
+		"@cruxjs/client": "0.1.3",
+		"@minejs/signals": "^0.0.6",
+		"@minejs/store": "^0.0.3"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.39.2",
+		"@stylistic/eslint-plugin": "^5.6.1",
+		"@types/bun": "^1.3.5",
+		"@types/node": "^20.19.27",
+		"bun-plugin-dts": "^0.3.0",
+		"bun-types": "^1.3.5",
+		"ts-node": "^10.9.2",
+		"tsup": "^8.5.1",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.51.0"
+	}
+}