@feraxjs/thselector 1.0.0

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2025 feraxhp
+
+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,64 @@
+# thselector
+[![pages-build-deployment](https://github.com/feraxjs/thselector/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/feraxjs/thselector/actions/workflows/pages/pages-build-deployment)
+
+The simplest way to add theme management to your HTML. Easy to configure and set up.
+
+I think that the purpose of the web is to be simple. I am tired of complicated things to achieve simple use cases, and for that reason I developed this simple theme selector. With no more than 1 line of code, you will be able to add simple (light, dark, system) control theme for your web, and 3 more to add custom themes and a component to manage user input.
+
+Are you migrating? see: [migration](#migration).
+
+## Documentation
+_thselector_ uses the `prefers-color-scheme` and _css trics_ to be as simple as posible.
+
+### Core
+~~~html
+<script src="https://cdn.jsdelivr.net/gh/feraxjs/thselector@v0.1.0/src/core.js"></script> <!-- 1' -->
+~~~
+
+The _core_ is the most important part. wich manages the system-theme, and user prefered theme. The _core_ also provides some functionality through the `window.th` object and a custom _event_ named _`th-changed`_, wich dispatches every time the theme changes.
+
+#### th-change envent
+this event provides 2 variables through `event.detail`:
+1. `theme`: the current theme ("dark", "light")
+2. `isSistem`: If the theme is manage by the system or is fixed by the user.
+
+### window.th objetc
+- verbose: controls when to show logs or not [default to false]
+- themes: list of the posible values for the theme
+- setTheme: function to change the theme
+- init: to instanciate the listeners
+- remove: to remove the listeners
+
+## Components
+The library also provides some simple components to manage the theme selection by the user, and changes between: system, ligth and dark.
+
+### dropdown
+~~~html
+<script src="https://cdn.jsdelivr.net/gh/feraxjs/thselector@v0.1.0/src/components/dropdown.js" defer></script> 
+~~~
+
+## Wroking with CSS
+In css you have to declare 2 color schemes, one for light and one for dark.
+the library will declare in the root the current selected text by adding the 
+attribute _`theme`_.
+
+Aditionally, the meta tag colorscheme also is declared to automaticly change the 
+default css of the document.
+
+for a better example see: [feraxjs/themes](https://github.com/feraxjs/themes).
+
+## Migration
+the internal state is compleate the same as feraxhp/theselector, but con file names chage.
+There fore, the migration will be as easy as changing the file name in the html
+
+- `load-theme.js` >> `src/core.js`
+- `select-theme.js` >> `src/components/dropdown.js`
+
+### CSS
+now instead of 1 css file with latte-{other}.css file to import the css. you have to
+import 2 css. One for the ligth theme and One for the dark theme.
+
+> [!note]
+> The themes can be found in [feraxjs/themes](https://github.com/feraxjs/themes).
+
+

package/dist/dropdown.min.js

@@ -0,0 +1,2 @@
+!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";const e=document.getElementById("fth-select");if(e){const t={light:{id:"fth-olight",text:"Light",value:"light"},dark:{id:"fth-odark",text:"Dark",value:"dark"},system:{id:"fth-osystem",text:"System",value:"system"}};function n(t,n){let d=document.getElementById(n.id);return d||(d=document.createElement("option"),d.id=n.id,d.value=n.value,d.textContent=n.text,e.appendChild(d)),d}const d=Object.values(t).map(e=>n(e.value,e));function i(e){const t=d.find(t=>t.value===e);t&&(t.selected=!0)}i(localStorage.getItem("[fx-theme]")??"system"),e.addEventListener("change",e=>{const t=e.target.value;window.th.setTheme(t)}),document.addEventListener("th-changed",e=>{e.detail.isSistem?i(t.system):i(e.detail.theme)})}});
+//# sourceMappingURL=dropdown.min.js.map

package/dist/dropdown.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.min.js","sources":["../src/components/dropdown.js"],"sourcesContent":["const selector = document.getElementById(\"fth-select\");\n\nif (selector) {\n    const OPTIONS = {\n        light: { id: 'fth-olight', text: 'Light', value: 'light' },\n        dark: { id: 'fth-odark', text: 'Dark', value: 'dark' },\n        system: { id: 'fth-osystem', text: 'System', value: 'system' }\n    };\n\n    function createOrUpdateOption(theme, config) {\n        let option = document.getElementById(config.id);\n\n        if (!option) {\n            option = document.createElement(\"option\");\n            option.id = config.id;\n            option.value = config.value; // Usa el valor definido en OPTIONS\n            option.textContent = config.text;\n            selector.appendChild(option);\n        }\n        return option;\n    }\n\n    const options = Object.values(OPTIONS).map(config => createOrUpdateOption(config.value, config));\n\n\n    function setSelectedOption(theme) {\n        const optionToSelect = options.find(option => option.value === theme);\n        if (optionToSelect) {\n            optionToSelect.selected = true;\n        }\n    }\n\n    const currentTheme = localStorage.getItem('[fx-theme]') ?? 'system';\n    setSelectedOption(currentTheme);\n\n    selector.addEventListener(\"change\", (event) => {\n        const newTheme = event.target.value;\n        window.th.setTheme(newTheme);\n    });\n\n    document.addEventListener('th-changed', (event) => {\n        if (event.detail.isSistem) setSelectedOption(OPTIONS.system);\n        else setSelectedOption(event.detail.theme);\n    });\n}"],"names":["selector","document","getElementById","OPTIONS","light","id","text","value","dark","system","createOrUpdateOption","theme","config","option","createElement","textContent","appendChild","options","Object","values","map","setSelectedOption","optionToSelect","find","selected","localStorage","getItem","addEventListener","event","newTheme","target","window","th","setTheme","detail","isSistem"],"mappings":"0FAAA,MAAMA,EAAWC,SAASC,eAAe,cAEzC,GAAIF,EAAU,CACV,MAAMG,EAAU,CACZC,MAAO,CAAEC,GAAI,aAAcC,KAAM,QAASC,MAAO,SACjDC,KAAM,CAAEH,GAAI,YAAaC,KAAM,OAAQC,MAAO,QAC9CE,OAAQ,CAAEJ,GAAI,cAAeC,KAAM,SAAUC,MAAO,WAGxD,SAASG,EAAqBC,EAAOC,GACjC,IAAIC,EAASZ,SAASC,eAAeU,EAAOP,IAS5C,OAPKQ,IACDA,EAASZ,SAASa,cAAc,UAChCD,EAAOR,GAAKO,EAAOP,GACnBQ,EAAON,MAAQK,EAAOL,MACtBM,EAAOE,YAAcH,EAAON,KAC5BN,EAASgB,YAAYH,IAElBA,CACV,CAED,MAAMI,EAAUC,OAAOC,OAAOhB,GAASiB,IAAIR,GAAUF,EAAqBE,EAAOL,MAAOK,IAGxF,SAASS,EAAkBV,GACvB,MAAMW,EAAiBL,EAAQM,KAAKV,GAAUA,EAAON,QAAUI,GAC3DW,IACAA,EAAeE,UAAW,EAEjC,CAGDH,EADqBI,aAAaC,QAAQ,eAAiB,UAG3D1B,EAAS2B,iBAAiB,SAAWC,IACjC,MAAMC,EAAWD,EAAME,OAAOvB,MAC9BwB,OAAOC,GAAGC,SAASJ,KAGvB5B,SAAS0B,iBAAiB,aAAeC,IACjCA,EAAMM,OAAOC,SAAUd,EAAkBlB,EAAQM,QAChDY,EAAkBO,EAAMM,OAAOvB,QAE5C"}

package/dist/index.cjs

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const THEME_STORAGE_KEY = '[fx-theme]';
+const META_ID = 'fth-meta';
+
+window.th = {
+    verbose: false,
+    themes: Object.freeze({
+        light: 'light',
+        dark: 'dark',
+        system: 'dark light'
+    }),
+
+    setMetaTag(content) {
+        let meta = document.getElementById(META_ID);
+        if (!meta) {
+            meta = document.createElement('meta');
+            meta.id = META_ID;
+            meta.name = 'color-scheme';
+            document.head.appendChild(meta);
+        }
+        meta.content = content;
+    },
+
+    getSystemTheme() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light';
+    },
+
+    setTheme(theme) {
+        if (!(theme in this.themes)) {
+            console.warn(`Invalid theme: ${theme}. Falling back to system theme.`);
+            theme = 'system';
+        }
+        
+        this.setMetaTag(this.themes[theme] || this.themes.system);
+        
+        const finalTheme = theme === 'system' ? this.getSystemTheme() : theme;
+        
+        document.documentElement.setAttribute('theme', finalTheme);
+        
+        try { localStorage.setItem(THEME_STORAGE_KEY, theme); }
+        catch (e) { 
+          if (this.verbose) console.debug("Error saving the theme:", e);
+        }
+        
+        this.dispatchThemeChangeEvent(finalTheme, theme === 'system');
+        
+        return finalTheme;
+    },
+    
+    dispatchThemeChangeEvent(theme, isSistem) {
+        const event = new CustomEvent('th-changed', { detail: { theme, isSistem } });
+        document.dispatchEvent(event);
+    },
+    
+    init() {
+      try {
+          const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) ?? 'system';
+          this.setTheme(savedTheme);
+      } catch (error) {
+          if (this.verbose) console.debug('Error loading theme:', error);
+          this.setTheme('system');
+      }
+      
+      if (!('matchMedia' in window)) {
+        if (this.verbose) console.debug("The 'matchMedia' parameter is not present");
+      }
+      
+      const listener = () => {
+        const currentTheme = localStorage.getItem(THEME_STORAGE_KEY);
+        if (currentTheme === 'system') { this.setTheme('system'); }
+      };
+      
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', listener);
+      
+      return () => {
+        window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener);
+      }
+    }
+};
+
+window.th.remove = window.th.init();
+
+const th = window.th;
+
+function init_dropdown() {
+const selector = document.getElementById("fth-select");
+
+if (selector) {
+    const OPTIONS = {
+        light: { id: 'fth-olight', text: 'Light', value: 'light' },
+        dark: { id: 'fth-odark', text: 'Dark', value: 'dark' },
+        system: { id: 'fth-osystem', text: 'System', value: 'system' }
+    };
+
+    function createOrUpdateOption(theme, config) {
+        let option = document.getElementById(config.id);
+
+        if (!option) {
+            option = document.createElement("option");
+            option.id = config.id;
+            option.value = config.value; // Usa el valor definido en OPTIONS
+            option.textContent = config.text;
+            selector.appendChild(option);
+        }
+        return option;
+    }
+
+    const options = Object.values(OPTIONS).map(config => createOrUpdateOption(config.value, config));
+
+
+    function setSelectedOption(theme) {
+        const optionToSelect = options.find(option => option.value === theme);
+        if (optionToSelect) {
+            optionToSelect.selected = true;
+        }
+    }
+
+    const currentTheme = localStorage.getItem('[fx-theme]') ?? 'system';
+    setSelectedOption(currentTheme);
+
+    selector.addEventListener("change", (event) => {
+        const newTheme = event.target.value;
+        window.th.setTheme(newTheme);
+    });
+
+    document.addEventListener('th-changed', (event) => {
+        if (event.detail.isSistem) setSelectedOption(OPTIONS.system);
+        else setSelectedOption(event.detail.theme);
+    });
+}
+}
+
+exports.init_dropdown = init_dropdown;
+exports.th = th;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/core.js","../src/index.js"],"sourcesContent":["const THEME_STORAGE_KEY = '[fx-theme]';\nconst META_ID = 'fth-meta';\n\nwindow.th = {\n    verbose: false,\n    themes: Object.freeze({\n        light: 'light',\n        dark: 'dark',\n        system: 'dark light'\n    }),\n\n    setMetaTag(content) {\n        let meta = document.getElementById(META_ID);\n        if (!meta) {\n            meta = document.createElement('meta');\n            meta.id = META_ID;\n            meta.name = 'color-scheme';\n            document.head.appendChild(meta);\n        }\n        meta.content = content;\n    },\n\n    getSystemTheme() {\n        return window.matchMedia('(prefers-color-scheme: dark)').matches\n            ? 'dark'\n            : 'light';\n    },\n\n    setTheme(theme) {\n        if (!(theme in this.themes)) {\n            console.warn(`Invalid theme: ${theme}. Falling back to system theme.`);\n            theme = 'system';\n        }\n        \n        this.setMetaTag(this.themes[theme] || this.themes.system);\n        \n        const finalTheme = theme === 'system' ? this.getSystemTheme() : theme;\n        \n        document.documentElement.setAttribute('theme', finalTheme);\n        \n        try { localStorage.setItem(THEME_STORAGE_KEY, theme); }\n        catch (e) { \n          if (this.verbose) console.debug(\"Error saving the theme:\", e)\n        }\n        \n        this.dispatchThemeChangeEvent(finalTheme, theme === 'system');\n        \n        return finalTheme;\n    },\n    \n    dispatchThemeChangeEvent(theme, isSistem) {\n        const event = new CustomEvent('th-changed', { detail: { theme, isSistem } });\n        document.dispatchEvent(event);\n    },\n    \n    init() {\n      try {\n          const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) ?? 'system';\n          this.setTheme(savedTheme);\n      } catch (error) {\n          if (this.verbose) console.debug('Error loading theme:', error);\n          this.setTheme('system');\n      }\n      \n      if (!('matchMedia' in window)) {\n        if (this.verbose) console.debug(\"The 'matchMedia' parameter is not present\")\n      }\n      \n      const listener = () => {\n        const currentTheme = localStorage.getItem(THEME_STORAGE_KEY);\n        if (currentTheme === 'system') { this.setTheme('system'); }\n      }\n      \n      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', listener);\n      \n      return () => {\n        window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener);\n      }\n    }\n}\n\nwindow.th.remove = window.th.init();\n","import './core.js';\n\nexport const th = window.th;\n\nexport function init_dropdown() {\n// ./components/dropdown.js\n}\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,146 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.thselector = {}));
+})(this, (function (exports) { 'use strict';
+
+    const THEME_STORAGE_KEY = '[fx-theme]';
+    const META_ID = 'fth-meta';
+
+    window.th = {
+        verbose: false,
+        themes: Object.freeze({
+            light: 'light',
+            dark: 'dark',
+            system: 'dark light'
+        }),
+
+        setMetaTag(content) {
+            let meta = document.getElementById(META_ID);
+            if (!meta) {
+                meta = document.createElement('meta');
+                meta.id = META_ID;
+                meta.name = 'color-scheme';
+                document.head.appendChild(meta);
+            }
+            meta.content = content;
+        },
+
+        getSystemTheme() {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light';
+        },
+
+        setTheme(theme) {
+            if (!(theme in this.themes)) {
+                console.warn(`Invalid theme: ${theme}. Falling back to system theme.`);
+                theme = 'system';
+            }
+            
+            this.setMetaTag(this.themes[theme] || this.themes.system);
+            
+            const finalTheme = theme === 'system' ? this.getSystemTheme() : theme;
+            
+            document.documentElement.setAttribute('theme', finalTheme);
+            
+            try { localStorage.setItem(THEME_STORAGE_KEY, theme); }
+            catch (e) { 
+              if (this.verbose) console.debug("Error saving the theme:", e);
+            }
+            
+            this.dispatchThemeChangeEvent(finalTheme, theme === 'system');
+            
+            return finalTheme;
+        },
+        
+        dispatchThemeChangeEvent(theme, isSistem) {
+            const event = new CustomEvent('th-changed', { detail: { theme, isSistem } });
+            document.dispatchEvent(event);
+        },
+        
+        init() {
+          try {
+              const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) ?? 'system';
+              this.setTheme(savedTheme);
+          } catch (error) {
+              if (this.verbose) console.debug('Error loading theme:', error);
+              this.setTheme('system');
+          }
+          
+          if (!('matchMedia' in window)) {
+            if (this.verbose) console.debug("The 'matchMedia' parameter is not present");
+          }
+          
+          const listener = () => {
+            const currentTheme = localStorage.getItem(THEME_STORAGE_KEY);
+            if (currentTheme === 'system') { this.setTheme('system'); }
+          };
+          
+          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', listener);
+          
+          return () => {
+            window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener);
+          }
+        }
+    };
+
+    window.th.remove = window.th.init();
+
+    const th = window.th;
+
+    function init_dropdown() {
+    const selector = document.getElementById("fth-select");
+
+    if (selector) {
+        const OPTIONS = {
+            light: { id: 'fth-olight', text: 'Light', value: 'light' },
+            dark: { id: 'fth-odark', text: 'Dark', value: 'dark' },
+            system: { id: 'fth-osystem', text: 'System', value: 'system' }
+        };
+
+        function createOrUpdateOption(theme, config) {
+            let option = document.getElementById(config.id);
+
+            if (!option) {
+                option = document.createElement("option");
+                option.id = config.id;
+                option.value = config.value; // Usa el valor definido en OPTIONS
+                option.textContent = config.text;
+                selector.appendChild(option);
+            }
+            return option;
+        }
+
+        const options = Object.values(OPTIONS).map(config => createOrUpdateOption(config.value, config));
+
+
+        function setSelectedOption(theme) {
+            const optionToSelect = options.find(option => option.value === theme);
+            if (optionToSelect) {
+                optionToSelect.selected = true;
+            }
+        }
+
+        const currentTheme = localStorage.getItem('[fx-theme]') ?? 'system';
+        setSelectedOption(currentTheme);
+
+        selector.addEventListener("change", (event) => {
+            const newTheme = event.target.value;
+            window.th.setTheme(newTheme);
+        });
+
+        document.addEventListener('th-changed', (event) => {
+            if (event.detail.isSistem) setSelectedOption(OPTIONS.system);
+            else setSelectedOption(event.detail.theme);
+        });
+    }
+    }
+
+    exports.init_dropdown = init_dropdown;
+    exports.th = th;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/core.js","../src/index.js"],"sourcesContent":["const THEME_STORAGE_KEY = '[fx-theme]';\nconst META_ID = 'fth-meta';\n\nwindow.th = {\n    verbose: false,\n    themes: Object.freeze({\n        light: 'light',\n        dark: 'dark',\n        system: 'dark light'\n    }),\n\n    setMetaTag(content) {\n        let meta = document.getElementById(META_ID);\n        if (!meta) {\n            meta = document.createElement('meta');\n            meta.id = META_ID;\n            meta.name = 'color-scheme';\n            document.head.appendChild(meta);\n        }\n        meta.content = content;\n    },\n\n    getSystemTheme() {\n        return window.matchMedia('(prefers-color-scheme: dark)').matches\n            ? 'dark'\n            : 'light';\n    },\n\n    setTheme(theme) {\n        if (!(theme in this.themes)) {\n            console.warn(`Invalid theme: ${theme}. Falling back to system theme.`);\n            theme = 'system';\n        }\n        \n        this.setMetaTag(this.themes[theme] || this.themes.system);\n        \n        const finalTheme = theme === 'system' ? this.getSystemTheme() : theme;\n        \n        document.documentElement.setAttribute('theme', finalTheme);\n        \n        try { localStorage.setItem(THEME_STORAGE_KEY, theme); }\n        catch (e) { \n          if (this.verbose) console.debug(\"Error saving the theme:\", e)\n        }\n        \n        this.dispatchThemeChangeEvent(finalTheme, theme === 'system');\n        \n        return finalTheme;\n    },\n    \n    dispatchThemeChangeEvent(theme, isSistem) {\n        const event = new CustomEvent('th-changed', { detail: { theme, isSistem } });\n        document.dispatchEvent(event);\n    },\n    \n    init() {\n      try {\n          const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) ?? 'system';\n          this.setTheme(savedTheme);\n      } catch (error) {\n          if (this.verbose) console.debug('Error loading theme:', error);\n          this.setTheme('system');\n      }\n      \n      if (!('matchMedia' in window)) {\n        if (this.verbose) console.debug(\"The 'matchMedia' parameter is not present\")\n      }\n      \n      const listener = () => {\n        const currentTheme = localStorage.getItem(THEME_STORAGE_KEY);\n        if (currentTheme === 'system') { this.setTheme('system'); }\n      }\n      \n      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', listener);\n      \n      return () => {\n        window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener);\n      }\n    }\n}\n\nwindow.th.remove = window.th.init();\n","import './core.js';\n\nexport const th = window.th;\n\nexport function init_dropdown() {\n// ./components/dropdown.js\n}\n"],"names":[],"mappings":"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"}

package/dist/index.min.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).thselector={})}(this,function(e){"use strict";const t="[fx-theme]",s="fth-meta";window.th={verbose:!1,themes:Object.freeze({light:"light",dark:"dark",system:"dark light"}),setMetaTag(e){let t=document.getElementById(s);t||(t=document.createElement("meta"),t.id=s,t.name="color-scheme",document.head.appendChild(t)),t.content=e},getSystemTheme:()=>window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",setTheme(e){e in this.themes||(console.warn(`Invalid theme: ${e}. Falling back to system theme.`),e="system"),this.setMetaTag(this.themes[e]||this.themes.system);const s="system"===e?this.getSystemTheme():e;document.documentElement.setAttribute("theme",s);try{localStorage.setItem(t,e)}catch(e){this.verbose&&console.debug("Error saving the theme:",e)}return this.dispatchThemeChangeEvent(s,"system"===e),s},dispatchThemeChangeEvent(e,t){const s=new CustomEvent("th-changed",{detail:{theme:e,isSistem:t}});document.dispatchEvent(s)},init(){try{const e=localStorage.getItem(t)??"system";this.setTheme(e)}catch(e){this.verbose&&console.debug("Error loading theme:",e),this.setTheme("system")}"matchMedia"in window||this.verbose&&console.debug("The 'matchMedia' parameter is not present");const e=()=>{"system"===localStorage.getItem(t)&&this.setTheme("system")};return window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e),()=>{window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change",e)}}},window.th.remove=window.th.init();const n=window.th;e.th=n,Object.defineProperty(e,"__esModule",{value:!0})});
+//# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.min.js","sources":["../src/core.js","../src/index.js"],"sourcesContent":["const THEME_STORAGE_KEY = '[fx-theme]';\nconst META_ID = 'fth-meta';\n\nwindow.th = {\n    verbose: false,\n    themes: Object.freeze({\n        light: 'light',\n        dark: 'dark',\n        system: 'dark light'\n    }),\n\n    setMetaTag(content) {\n        let meta = document.getElementById(META_ID);\n        if (!meta) {\n            meta = document.createElement('meta');\n            meta.id = META_ID;\n            meta.name = 'color-scheme';\n            document.head.appendChild(meta);\n        }\n        meta.content = content;\n    },\n\n    getSystemTheme() {\n        return window.matchMedia('(prefers-color-scheme: dark)').matches\n            ? 'dark'\n            : 'light';\n    },\n\n    setTheme(theme) {\n        if (!(theme in this.themes)) {\n            console.warn(`Invalid theme: ${theme}. Falling back to system theme.`);\n            theme = 'system';\n        }\n        \n        this.setMetaTag(this.themes[theme] || this.themes.system);\n        \n        const finalTheme = theme === 'system' ? this.getSystemTheme() : theme;\n        \n        document.documentElement.setAttribute('theme', finalTheme);\n        \n        try { localStorage.setItem(THEME_STORAGE_KEY, theme); }\n        catch (e) { \n          if (this.verbose) console.debug(\"Error saving the theme:\", e)\n        }\n        \n        this.dispatchThemeChangeEvent(finalTheme, theme === 'system');\n        \n        return finalTheme;\n    },\n    \n    dispatchThemeChangeEvent(theme, isSistem) {\n        const event = new CustomEvent('th-changed', { detail: { theme, isSistem } });\n        document.dispatchEvent(event);\n    },\n    \n    init() {\n      try {\n          const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) ?? 'system';\n          this.setTheme(savedTheme);\n      } catch (error) {\n          if (this.verbose) console.debug('Error loading theme:', error);\n          this.setTheme('system');\n      }\n      \n      if (!('matchMedia' in window)) {\n        if (this.verbose) console.debug(\"The 'matchMedia' parameter is not present\")\n      }\n      \n      const listener = () => {\n        const currentTheme = localStorage.getItem(THEME_STORAGE_KEY);\n        if (currentTheme === 'system') { this.setTheme('system'); }\n      }\n      \n      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', listener);\n      \n      return () => {\n        window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener);\n      }\n    }\n}\n\nwindow.th.remove = window.th.init();\n","import './core.js';\n\nexport const th = window.th;\n\nexport function init_dropdown() {\n// ./components/dropdown.js\n}\n"],"names":["THEME_STORAGE_KEY","META_ID","window","th","verbose","themes","Object","freeze","light","dark","system","setMetaTag","content","meta","document","getElementById","createElement","id","name","head","appendChild","getSystemTheme","matchMedia","matches","setTheme","theme","this","console","warn","finalTheme","documentElement","setAttribute","localStorage","setItem","e","debug","dispatchThemeChangeEvent","isSistem","event","CustomEvent","detail","dispatchEvent","init","savedTheme","getItem","error","listener","addEventListener","removeEventListener","remove"],"mappings":"iPAAA,MAAMA,EAAoB,aACpBC,EAAU,WAEhBC,OAAOC,GAAK,CACRC,SAAS,EACTC,OAAQC,OAAOC,OAAO,CAClBC,MAAO,QACPC,KAAM,OACNC,OAAQ,eAGZ,UAAAC,CAAWC,GACP,IAAIC,EAAOC,SAASC,eAAed,GAC9BY,IACDA,EAAOC,SAASE,cAAc,QAC9BH,EAAKI,GAAKhB,EACVY,EAAKK,KAAO,eACZJ,SAASK,KAAKC,YAAYP,IAE9BA,EAAKD,QAAUA,CAClB,EAEDS,eAAc,IACHnB,OAAOoB,WAAW,gCAAgCC,QACnD,OACA,QAGV,QAAAC,CAASC,GACCA,KAASC,KAAKrB,SAChBsB,QAAQC,KAAK,kBAAkBH,oCAC/BA,EAAQ,UAGZC,KAAKf,WAAWe,KAAKrB,OAAOoB,IAAUC,KAAKrB,OAAOK,QAElD,MAAMmB,EAAuB,WAAVJ,EAAqBC,KAAKL,iBAAmBI,EAEhEX,SAASgB,gBAAgBC,aAAa,QAASF,GAE/C,IAAMG,aAAaC,QAAQjC,EAAmByB,EAAS,CACvD,MAAOS,GACDR,KAAKtB,SAASuB,QAAQQ,MAAM,0BAA2BD,EAC5D,CAID,OAFAR,KAAKU,yBAAyBP,EAAsB,WAAVJ,GAEnCI,CACV,EAED,wBAAAO,CAAyBX,EAAOY,GAC5B,MAAMC,EAAQ,IAAIC,YAAY,aAAc,CAAEC,OAAQ,CAAEf,QAAOY,cAC/DvB,SAAS2B,cAAcH,EAC1B,EAED,IAAAI,GACE,IACI,MAAMC,EAAaX,aAAaY,QAAQ5C,IAAsB,SAC9D0B,KAAKF,SAASmB,EACjB,CAAC,MAAOE,GACDnB,KAAKtB,SAASuB,QAAQQ,MAAM,uBAAwBU,GACxDnB,KAAKF,SAAS,SACjB,CAEK,eAAgBtB,QAChBwB,KAAKtB,SAASuB,QAAQQ,MAAM,6CAGlC,MAAMW,EAAW,KAEM,WADAd,aAAaY,QAAQ5C,IACT0B,KAAKF,SAAS,WAKjD,OAFAtB,OAAOoB,WAAW,gCAAgCyB,iBAAiB,SAAUD,GAEtE,KACL5C,OAAOoB,WAAW,gCAAgC0B,oBAAoB,SAAUF,GAEnF,GAGL5C,OAAOC,GAAG8C,OAAS/C,OAAOC,GAAGuC,OC/EhB,MAAAvC,EAAKD,OAAOC"}

package/dist/index.mjs

@@ -0,0 +1,135 @@
+const THEME_STORAGE_KEY = '[fx-theme]';
+const META_ID = 'fth-meta';
+
+window.th = {
+    verbose: false,
+    themes: Object.freeze({
+        light: 'light',
+        dark: 'dark',
+        system: 'dark light'
+    }),
+
+    setMetaTag(content) {
+        let meta = document.getElementById(META_ID);
+        if (!meta) {
+            meta = document.createElement('meta');
+            meta.id = META_ID;
+            meta.name = 'color-scheme';
+            document.head.appendChild(meta);
+        }
+        meta.content = content;
+    },
+
+    getSystemTheme() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light';
+    },
+
+    setTheme(theme) {
+        if (!(theme in this.themes)) {
+            console.warn(`Invalid theme: ${theme}. Falling back to system theme.`);
+            theme = 'system';
+        }
+        
+        this.setMetaTag(this.themes[theme] || this.themes.system);
+        
+        const finalTheme = theme === 'system' ? this.getSystemTheme() : theme;
+        
+        document.documentElement.setAttribute('theme', finalTheme);
+        
+        try { localStorage.setItem(THEME_STORAGE_KEY, theme); }
+        catch (e) { 
+          if (this.verbose) console.debug("Error saving the theme:", e);
+        }
+        
+        this.dispatchThemeChangeEvent(finalTheme, theme === 'system');
+        
+        return finalTheme;
+    },
+    
+    dispatchThemeChangeEvent(theme, isSistem) {
+        const event = new CustomEvent('th-changed', { detail: { theme, isSistem } });
+        document.dispatchEvent(event);
+    },
+    
+    init() {
+      try {
+          const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) ?? 'system';
+          this.setTheme(savedTheme);
+      } catch (error) {
+          if (this.verbose) console.debug('Error loading theme:', error);
+          this.setTheme('system');
+      }
+      
+      if (!('matchMedia' in window)) {
+        if (this.verbose) console.debug("The 'matchMedia' parameter is not present");
+      }
+      
+      const listener = () => {
+        const currentTheme = localStorage.getItem(THEME_STORAGE_KEY);
+        if (currentTheme === 'system') { this.setTheme('system'); }
+      };
+      
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', listener);
+      
+      return () => {
+        window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener);
+      }
+    }
+};
+
+window.th.remove = window.th.init();
+
+const th = window.th;
+
+function init_dropdown() {
+const selector = document.getElementById("fth-select");
+
+if (selector) {
+    const OPTIONS = {
+        light: { id: 'fth-olight', text: 'Light', value: 'light' },
+        dark: { id: 'fth-odark', text: 'Dark', value: 'dark' },
+        system: { id: 'fth-osystem', text: 'System', value: 'system' }
+    };
+
+    function createOrUpdateOption(theme, config) {
+        let option = document.getElementById(config.id);
+
+        if (!option) {
+            option = document.createElement("option");
+            option.id = config.id;
+            option.value = config.value; // Usa el valor definido en OPTIONS
+            option.textContent = config.text;
+            selector.appendChild(option);
+        }
+        return option;
+    }
+
+    const options = Object.values(OPTIONS).map(config => createOrUpdateOption(config.value, config));
+
+
+    function setSelectedOption(theme) {
+        const optionToSelect = options.find(option => option.value === theme);
+        if (optionToSelect) {
+            optionToSelect.selected = true;
+        }
+    }
+
+    const currentTheme = localStorage.getItem('[fx-theme]') ?? 'system';
+    setSelectedOption(currentTheme);
+
+    selector.addEventListener("change", (event) => {
+        const newTheme = event.target.value;
+        window.th.setTheme(newTheme);
+    });
+
+    document.addEventListener('th-changed', (event) => {
+        if (event.detail.isSistem) setSelectedOption(OPTIONS.system);
+        else setSelectedOption(event.detail.theme);
+    });
+}
+}
+
+export { init_dropdown, th };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/core.js","../src/index.js"],"sourcesContent":["const THEME_STORAGE_KEY = '[fx-theme]';\nconst META_ID = 'fth-meta';\n\nwindow.th = {\n    verbose: false,\n    themes: Object.freeze({\n        light: 'light',\n        dark: 'dark',\n        system: 'dark light'\n    }),\n\n    setMetaTag(content) {\n        let meta = document.getElementById(META_ID);\n        if (!meta) {\n            meta = document.createElement('meta');\n            meta.id = META_ID;\n            meta.name = 'color-scheme';\n            document.head.appendChild(meta);\n        }\n        meta.content = content;\n    },\n\n    getSystemTheme() {\n        return window.matchMedia('(prefers-color-scheme: dark)').matches\n            ? 'dark'\n            : 'light';\n    },\n\n    setTheme(theme) {\n        if (!(theme in this.themes)) {\n            console.warn(`Invalid theme: ${theme}. Falling back to system theme.`);\n            theme = 'system';\n        }\n        \n        this.setMetaTag(this.themes[theme] || this.themes.system);\n        \n        const finalTheme = theme === 'system' ? this.getSystemTheme() : theme;\n        \n        document.documentElement.setAttribute('theme', finalTheme);\n        \n        try { localStorage.setItem(THEME_STORAGE_KEY, theme); }\n        catch (e) { \n          if (this.verbose) console.debug(\"Error saving the theme:\", e)\n        }\n        \n        this.dispatchThemeChangeEvent(finalTheme, theme === 'system');\n        \n        return finalTheme;\n    },\n    \n    dispatchThemeChangeEvent(theme, isSistem) {\n        const event = new CustomEvent('th-changed', { detail: { theme, isSistem } });\n        document.dispatchEvent(event);\n    },\n    \n    init() {\n      try {\n          const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) ?? 'system';\n          this.setTheme(savedTheme);\n      } catch (error) {\n          if (this.verbose) console.debug('Error loading theme:', error);\n          this.setTheme('system');\n      }\n      \n      if (!('matchMedia' in window)) {\n        if (this.verbose) console.debug(\"The 'matchMedia' parameter is not present\")\n      }\n      \n      const listener = () => {\n        const currentTheme = localStorage.getItem(THEME_STORAGE_KEY);\n        if (currentTheme === 'system') { this.setTheme('system'); }\n      }\n      \n      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', listener);\n      \n      return () => {\n        window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener);\n      }\n    }\n}\n\nwindow.th.remove = window.th.init();\n","import './core.js';\n\nexport const th = window.th;\n\nexport function init_dropdown() {\n// ./components/dropdown.js\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@feraxjs/thselector",
+  "version": "1.0.0",
+  "description": "The simplest way to add theme management to your HTML. Easy to configure and set up.",
+  "author": "feraxhp",
+  "license": "MIT",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "browser": "dist/index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -fr dist && rollup -c",
+    "build:prod": "rm -fr dist && NODE_ENV=production rollup -c",
+    "prepublishOnly": "pnpm run build:prod"
+  },
+  "keywords": [
+    "theme",
+    "dark-mode",
+    "light-mode",
+    "system-theme",
+    "javascript"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^2.79.2"
+  },
+  "dependencies": {
+    "@rollup/plugin-replace": "^6.0.3"
+  }
+}