uni-theme-select 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,240 @@
+# uni-theme-select
+
+# Uni Theme Toggle
+
+A lightweight, plug-and-play theme switcher with built-in custom color support using CSS variables and Coloris.
+
+Easily add Dark, Light, Beige, or fully Custom themes to any web application.
+
+---
+
+## Features
+
+* Predefined themes (Dark, Light, Beige)
+* Custom theme builder (Background, Primary, Secondary colors)
+* CSS Variable based theming
+* Theme persistence via `localStorage`
+* Mount anywhere in DOM
+* Zero framework dependency (Vanilla JS compatible)
+* Lightweight and modular
+
+---
+
+## Installation
+
+```bash
+npm install uni-theme-toggle
+```
+
+or
+
+```bash
+yarn add uni-theme-toggle
+```
+
+---
+
+##  Usage
+
+###  Import
+
+```ts
+import { 
+  setTheme,
+  loadSavedTheme,
+  mountToggleTheme,
+  unMountToggleTheme
+} from "uni-theme-toggle";
+```
+
+---
+
+###  Mount the Theme Toggle
+
+```ts
+mountToggleTheme({
+  containerId: "app" // optional
+});
+```
+
+If `containerId` is not provided, the toggle mounts to `document.body`.
+
+---
+
+### Load Saved Theme on App Start
+
+```ts
+loadSavedTheme();
+```
+
+This restores the previously selected theme from `localStorage`.
+
+---
+
+### Manually Set Theme
+
+```ts
+setTheme("dark");
+setTheme("light");
+setTheme("beige");
+```
+
+---
+
+### Set Custom Theme
+
+```ts
+setTheme("custom", {
+  bgColor: "#121212",
+  primaryColor: "#4f46e5",
+  secondaryColor: "#f59e0b"
+});
+```
+
+---
+
+## How It Works
+
+The package updates CSS variables on the `:root` element:
+
+```css
+:root {
+  --bgColor: #000;
+  --primaryColor: #fff;
+  --secondaryColor: #ccc;
+}
+```
+
+Your app should use these variables:
+
+```css
+body {
+  background-color: var(--bgColor);
+}
+
+button {
+  background-color: var(--primaryColor);
+}
+```
+
+---
+
+## Available API
+
+### `setTheme(name: string, themeProps?: Record<string, string>)`
+
+Apply a theme.
+
+---
+
+### `getAvailableThemes(): string[]`
+
+Returns available predefined themes.
+
+---
+
+### `loadSavedTheme()`
+
+Loads previously stored theme from `localStorage`.
+
+---
+
+### `mountToggleTheme(options?)`
+
+Mounts the theme toggle UI.
+
+```ts
+mountToggleTheme({
+  containerId?: string
+});
+```
+
+---
+
+### `unMountToggleTheme()`
+
+Removes the toggle UI from DOM.
+
+---
+
+## Architecture
+
+* Theme definitions stored in `themes.ts`
+* CSS injected dynamically
+* Color picker powered by Coloris
+* Fully dynamic DOM rendering
+* No global HTML required
+
+---
+
+## Customization
+
+You can extend predefined themes by editing:
+
+```ts
+themes.ts
+```
+
+Example:
+
+```ts
+export const themes = [
+  {
+    name: "dark",
+    properties: {
+      bgColor: "#121212",
+      primaryColor: "#ffffff",
+      secondaryColor: "#999999"
+    }
+  }
+];
+```
+
+---
+
+## Theme Persistence
+
+Selected theme is stored in:
+
+```
+localStorage key: "uts-theme"
+```
+
+---
+
+## Requirements
+
+* Modern browser (supports CSS variables)
+* Bundler that supports CSS imports (Vite, Webpack, etc.)
+
+---
+
+## Example
+
+```ts
+document.addEventListener("DOMContentLoaded", () => {
+  loadSavedTheme();
+  mountToggleTheme();
+});
+```
+
+---
+
+## Remove Toggle
+
+```ts
+unMountToggleTheme();
+```
+
+---
+
+## 🧩 Roadmap
+
+* Theme export/import
+* Animation support
+* Multi-theme preview
+* TypeScript definitions improvements
+* React wrapper
+
+---
+

package/dist/index.d.mts

@@ -1,6 +1,7 @@
-declare function setTheme(name: string): void;
 declare function getAvailableThemes(): string[];
 declare function loadSavedTheme(): void;
+declare function mountToggleTheme(options?: Record<string, string>): void;
+declare function unMountToggleTheme(): void;
 
 type Theme = {
     name: string;
@@ -9,4 +10,4 @@ type Theme = {
 
 declare const themes: Theme[];
 
-export { type Theme, getAvailableThemes, loadSavedTheme, setTheme, themes };
+export { type Theme, getAvailableThemes, loadSavedTheme, mountToggleTheme, themes, unMountToggleTheme };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-declare function setTheme(name: string): void;
 declare function getAvailableThemes(): string[];
 declare function loadSavedTheme(): void;
+declare function mountToggleTheme(options?: Record<string, string>): void;
+declare function unMountToggleTheme(): void;
 
 type Theme = {
     name: string;
@@ -9,4 +10,4 @@ type Theme = {
 
 declare const themes: Theme[];
 
-export { type Theme, getAvailableThemes, loadSavedTheme, setTheme, themes };
+export { type Theme, getAvailableThemes, loadSavedTheme, mountToggleTheme, themes, unMountToggleTheme };

package/dist/index.js

@@ -1,6 +1,9 @@
+"use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -21,8 +32,9 @@ var index_exports = {};
 __export(index_exports, {
   getAvailableThemes: () => getAvailableThemes,
   loadSavedTheme: () => loadSavedTheme,
-  setTheme: () => setTheme,
-  themes: () => themes
+  mountToggleTheme: () => mountToggleTheme,
+  themes: () => themes,
+  unMountToggleTheme: () => unMountToggleTheme
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -51,12 +63,134 @@ var themes = [
       "text-color": "#333333",
       "primary-color": "#c19a6b"
     }
+  },
+  {
+    name: "custom",
+    properties: {
+      "bg-color": "",
+      "text-color": "",
+      "primary-color": ""
+    }
   }
 ];
 
-// src/themeManager.ts
-function setTheme(name) {
-  const theme = themes.find((t) => t.name === name);
+// src/coreFunctions.ts
+var import_coloris = require("@melloware/coloris/dist/coloris.css");
+var import_coloris2 = __toESM(require("@melloware/coloris"));
+var colorFields = [
+  { id: "bgColor", label: "Background" },
+  { id: "primaryColor", label: "Primary" },
+  { id: "secondaryColor", label: "Secondary" },
+  { id: "borderColor", label: "Border Color" },
+  { id: "textColor", label: "Text Color" }
+];
+function injectStyles() {
+  if (document.getElementById("uni-theme-style")) return;
+  const style = document.createElement("style");
+  style.id = "uni-theme-style";
+  style.innerHTML = `
+        #uni-theme-toggle {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 50px;
+            height: 50px;
+            background: var(--bg, #222);
+            color: var(--text, #fff);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+            z-index: 9999;
+            font-size:20px;
+            transition: right 0.3s ease;
+        }
+
+        #uni-theme-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.3);
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+            z-index: 9998;
+        }
+
+        #uni-theme-overlay.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+
+        #uni-theme-panel {
+            position: fixed;
+            bottom: 20px;
+            right: -322px;
+            width: 280px;
+            background: var(--bg, #fff);
+            color: var(--text, #000);
+            padding: 20px;
+            box-shadow: -4px 0 12px rgba(0,0,0,0.2);
+            transition: right 0.3s ease;
+            z-index: 9999;
+        }
+
+        #uni-theme-root.opened #uni-theme-panel{
+            right: 0;
+            max-height: 500px;
+        }
+
+        #uni-theme-root.opened #uni-theme-toggle{
+            right: 322px;
+            transition: left 0.3s ease;
+        }
+
+        #uni-theme-panel button {
+            display: block;
+            margin: 10px 0;
+            padding: 8px;
+            width: 100%;
+            cursor: pointer;
+        }
+        #clr-picker{
+            z-index: 999999
+        }
+        #uni-theme-panel button{
+            margin: 0;
+            border-radius: 50%
+        }
+        .clr-field{
+            margin: 5px 0
+        }
+        .uni-color-group {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 14px;
+            gap: 12px;
+        }
+
+        .uni-color-group label {
+            font-size: 18px;
+            font-weight: 500;
+            color: var(--text-color, #333);
+        }
+
+        .uni-color-input {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            border: 2px solid #ddd;
+            cursor: pointer;
+            padding: 0;
+        }
+
+    `;
+  document.head.appendChild(style);
+}
+function setTheme(name, themeProps = {}) {
+  const theme = name === "custom" ? { name, properties: themeProps } : themes.find((t) => t.name === name);
   if (!theme) {
     console.warn(`Theme "${name}" not found`);
     return;
@@ -67,6 +201,61 @@ function setTheme(name) {
   });
   localStorage.setItem("uts-theme", name);
 }
+function constructPanel(container) {
+  const panel = document.createElement("div");
+  panel.id = "uni-theme-panel";
+  const title = document.createElement("h3");
+  title.textContent = "Select Custom Theme";
+  panel.appendChild(title);
+  colorFields.forEach((field) => {
+    const group = document.createElement("div");
+    group.className = "uni-color-group";
+    const label = document.createElement("label");
+    label.textContent = field.label;
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "uni-color-input";
+    input.id = `uni-theme-${field.id}`;
+    input.value = "#000";
+    group.appendChild(label);
+    group.appendChild(input);
+    panel.appendChild(group);
+  });
+  container.appendChild(panel);
+}
+function injectHTML(options = {}) {
+  var _a, _b;
+  const container = document.createElement("div");
+  if (document.getElementById("uni-theme-root")) return;
+  container.id = "uni-theme-root";
+  container.innerHTML = `
+        <div id='uni-theme-toggle'>\u{1F3A8}</div>
+    `;
+  constructPanel(container);
+  (_a = document.getElementById(options.containerId)) == null ? void 0 : _a.style.setProperty("position", "relative");
+  options.containerId ? (_b = document.getElementById(options.containerId)) == null ? void 0 : _b.append(container) : document.body.appendChild(container);
+  return container;
+}
+function initThemeElements() {
+  const themeToggler = document.getElementById("uni-theme-toggle");
+  const themePanel = document.getElementById("uni-theme-panel");
+  import_coloris2.default.init();
+  document.querySelectorAll(".uni-color-input").forEach((input) => {
+    console.log(input.className);
+    (0, import_coloris2.default)({
+      el: `.${input.className}`,
+      alpha: true,
+      format: "hex"
+    });
+    input.addEventListener("input", (e) => {
+      const target = e.target;
+      target.style.background = target.value;
+    });
+  });
+  return { themeToggler, themePanel };
+}
+
+// src/themeManager.ts
 function getAvailableThemes() {
   return themes.map((t) => t.name);
 }
@@ -76,10 +265,23 @@ function loadSavedTheme() {
     setTheme(saved);
   }
 }
+function mountToggleTheme(options = {}) {
+  injectStyles();
+  const container = injectHTML(options);
+  const { themeToggler, themePanel } = initThemeElements();
+  themeToggler == null ? void 0 : themeToggler.addEventListener("click", () => {
+    container == null ? void 0 : container.classList.toggle("opened");
+  });
+}
+function unMountToggleTheme() {
+  var _a;
+  (_a = document.getElementById("uni-theme-root")) == null ? void 0 : _a.remove();
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getAvailableThemes,
   loadSavedTheme,
-  setTheme,
-  themes
+  mountToggleTheme,
+  themes,
+  unMountToggleTheme
 });

package/dist/index.mjs

@@ -23,12 +23,134 @@ var themes = [
       "text-color": "#333333",
       "primary-color": "#c19a6b"
     }
+  },
+  {
+    name: "custom",
+    properties: {
+      "bg-color": "",
+      "text-color": "",
+      "primary-color": ""
+    }
   }
 ];
 
-// src/themeManager.ts
-function setTheme(name) {
-  const theme = themes.find((t) => t.name === name);
+// src/coreFunctions.ts
+import "@melloware/coloris/dist/coloris.css";
+import Coloris from "@melloware/coloris";
+var colorFields = [
+  { id: "bgColor", label: "Background" },
+  { id: "primaryColor", label: "Primary" },
+  { id: "secondaryColor", label: "Secondary" },
+  { id: "borderColor", label: "Border Color" },
+  { id: "textColor", label: "Text Color" }
+];
+function injectStyles() {
+  if (document.getElementById("uni-theme-style")) return;
+  const style = document.createElement("style");
+  style.id = "uni-theme-style";
+  style.innerHTML = `
+        #uni-theme-toggle {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 50px;
+            height: 50px;
+            background: var(--bg, #222);
+            color: var(--text, #fff);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+            z-index: 9999;
+            font-size:20px;
+            transition: right 0.3s ease;
+        }
+
+        #uni-theme-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.3);
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+            z-index: 9998;
+        }
+
+        #uni-theme-overlay.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+
+        #uni-theme-panel {
+            position: fixed;
+            bottom: 20px;
+            right: -322px;
+            width: 280px;
+            background: var(--bg, #fff);
+            color: var(--text, #000);
+            padding: 20px;
+            box-shadow: -4px 0 12px rgba(0,0,0,0.2);
+            transition: right 0.3s ease;
+            z-index: 9999;
+        }
+
+        #uni-theme-root.opened #uni-theme-panel{
+            right: 0;
+            max-height: 500px;
+        }
+
+        #uni-theme-root.opened #uni-theme-toggle{
+            right: 322px;
+            transition: left 0.3s ease;
+        }
+
+        #uni-theme-panel button {
+            display: block;
+            margin: 10px 0;
+            padding: 8px;
+            width: 100%;
+            cursor: pointer;
+        }
+        #clr-picker{
+            z-index: 999999
+        }
+        #uni-theme-panel button{
+            margin: 0;
+            border-radius: 50%
+        }
+        .clr-field{
+            margin: 5px 0
+        }
+        .uni-color-group {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 14px;
+            gap: 12px;
+        }
+
+        .uni-color-group label {
+            font-size: 18px;
+            font-weight: 500;
+            color: var(--text-color, #333);
+        }
+
+        .uni-color-input {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            border: 2px solid #ddd;
+            cursor: pointer;
+            padding: 0;
+        }
+
+    `;
+  document.head.appendChild(style);
+}
+function setTheme(name, themeProps = {}) {
+  const theme = name === "custom" ? { name, properties: themeProps } : themes.find((t) => t.name === name);
   if (!theme) {
     console.warn(`Theme "${name}" not found`);
     return;
@@ -39,6 +161,61 @@ function setTheme(name) {
   });
   localStorage.setItem("uts-theme", name);
 }
+function constructPanel(container) {
+  const panel = document.createElement("div");
+  panel.id = "uni-theme-panel";
+  const title = document.createElement("h3");
+  title.textContent = "Select Custom Theme";
+  panel.appendChild(title);
+  colorFields.forEach((field) => {
+    const group = document.createElement("div");
+    group.className = "uni-color-group";
+    const label = document.createElement("label");
+    label.textContent = field.label;
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "uni-color-input";
+    input.id = `uni-theme-${field.id}`;
+    input.value = "#000";
+    group.appendChild(label);
+    group.appendChild(input);
+    panel.appendChild(group);
+  });
+  container.appendChild(panel);
+}
+function injectHTML(options = {}) {
+  var _a, _b;
+  const container = document.createElement("div");
+  if (document.getElementById("uni-theme-root")) return;
+  container.id = "uni-theme-root";
+  container.innerHTML = `
+        <div id='uni-theme-toggle'>\u{1F3A8}</div>
+    `;
+  constructPanel(container);
+  (_a = document.getElementById(options.containerId)) == null ? void 0 : _a.style.setProperty("position", "relative");
+  options.containerId ? (_b = document.getElementById(options.containerId)) == null ? void 0 : _b.append(container) : document.body.appendChild(container);
+  return container;
+}
+function initThemeElements() {
+  const themeToggler = document.getElementById("uni-theme-toggle");
+  const themePanel = document.getElementById("uni-theme-panel");
+  Coloris.init();
+  document.querySelectorAll(".uni-color-input").forEach((input) => {
+    console.log(input.className);
+    Coloris({
+      el: `.${input.className}`,
+      alpha: true,
+      format: "hex"
+    });
+    input.addEventListener("input", (e) => {
+      const target = e.target;
+      target.style.background = target.value;
+    });
+  });
+  return { themeToggler, themePanel };
+}
+
+// src/themeManager.ts
 function getAvailableThemes() {
   return themes.map((t) => t.name);
 }
@@ -48,9 +225,22 @@ function loadSavedTheme() {
     setTheme(saved);
   }
 }
+function mountToggleTheme(options = {}) {
+  injectStyles();
+  const container = injectHTML(options);
+  const { themeToggler, themePanel } = initThemeElements();
+  themeToggler == null ? void 0 : themeToggler.addEventListener("click", () => {
+    container == null ? void 0 : container.classList.toggle("opened");
+  });
+}
+function unMountToggleTheme() {
+  var _a;
+  (_a = document.getElementById("uni-theme-root")) == null ? void 0 : _a.remove();
+}
 export {
   getAvailableThemes,
   loadSavedTheme,
-  setTheme,
-  themes
+  mountToggleTheme,
+  themes,
+  unMountToggleTheme
 };

package/package.json

@@ -1,20 +1,29 @@
 {
   "name": "uni-theme-select",
-  "version": "1.0.0",
+  "version": "1.0.01",
   "description": "Framework-agnostic theme switcher",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts",
     "dev": "tsup src/index.ts --format cjs,esm --watch --dts"
   },
-  "keywords": ["theme", "dark-mode", "css-variables"],
+  "keywords": [
+    "theme",
+    "dark-mode",
+    "css-variables"
+  ],
   "author": "sri_manohari",
   "license": "ISC",
   "devDependencies": {
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@melloware/coloris": "^0.25.0"
   }
 }