gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
1 lines • 5.98 kB
JavaScript
import"./main-v4-BFwmMcfm.js";import{t as e}from"./toast-DgCSlJPv.js";var t="gentelella:theme-overrides",a={primary:"#1ABB9C",primaryDk:"#169f85",sidebarBg:"#1a2332",radius:6,sidebarW:252,fontSize:14,mode:document.documentElement.getAttribute("data-theme")||"light"};Object.assign(a,function(){try{return JSON.parse(sessionStorage.getItem(t)||"null")||{}}catch(e){return{}}}());var r=document.createElement("style");function n(){const e=i(a.primary,.1);r.textContent=`\n :root {\n --primary: ${a.primary};\n --primary-dk: ${a.primaryDk};\n --primary-lt: ${e};\n --radius: ${a.radius}px;\n --radius-sm: ${Math.max(0,a.radius-2)}px;\n --radius-lg: ${a.radius+2}px;\n --sidebar-w: ${a.sidebarW}px;\n --font-size: ${a.fontSize/16}rem;\n ${"primary"===a.sidebarBg?`--sidebar-bg: ${a.primary}; --sidebar-active: rgba(255,255,255,0.18); --sidebar-text: rgba(255,255,255,0.7); --sidebar-text-active: #fff; --sidebar-text-hover: #fff; --sidebar-hover: rgba(255,255,255,0.10); --sidebar-border: rgba(255,255,255,0.18);`:"#ffffff"===a.sidebarBg?"--sidebar-bg: #ffffff; --sidebar-text: var(--text-secondary); --sidebar-text-active: var(--primary); --sidebar-text-hover: var(--text); --sidebar-hover: var(--bg-surface-secondary); --sidebar-active: var(--primary-lt); --sidebar-border: var(--border-color-light);":`--sidebar-bg: ${a.sidebarBg};`}\n }\n `,document.documentElement.setAttribute("data-theme",a.mode),function(){const e=`// Generated by Gentelella v4 theme generator\n// Paste into src/scss/v4/_tokens.scss\n:root {\n --primary: ${a.primary};\n --primary-dk: ${a.primaryDk};\n --primary-lt: ${i(a.primary,.1)};\n\n --radius: ${a.radius}px;\n --radius-sm: ${Math.max(0,a.radius-2)}px;\n --radius-lg: ${a.radius+2}px;\n\n --sidebar-bg: ${"primary"===a.sidebarBg?a.primary:a.sidebarBg};\n --sidebar-w: ${a.sidebarW}px;\n\n --font-size: ${a.fontSize/16}rem;\n}`;document.getElementById("tokens-output").textContent=e}(),function(){try{sessionStorage.setItem(t,JSON.stringify(a))}catch(e){}}(),document.documentElement.dispatchEvent(new CustomEvent("themechange"))}function i(e,t){const a=e.replace("#","").match(/^([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);return a?`rgba(${parseInt(a[1],16)}, ${parseInt(a[2],16)}, ${parseInt(a[3],16)}, ${t})`:e}r.id="theme-overrides",document.head.appendChild(r);var d=document.querySelectorAll(".theme-swatch");d.forEach(e=>{e.dataset.primary===a.primary?e.classList.add("active"):e.classList.remove("active"),e.addEventListener("click",()=>{d.forEach(e=>e.classList.remove("active")),e.classList.add("active"),a.primary=e.dataset.primary,a.primaryDk=e.dataset.primaryDk,document.getElementById("custom-color").value=a.primary,document.getElementById("custom-color-picker").value=a.primary,n()})});var s=document.getElementById("custom-color"),o=document.getElementById("custom-color-picker"),c=e=>{/^#[0-9a-f]{6}$/i.test(e)&&(a.primary=e,a.primaryDk=function(e){const t=e.replace("#","").match(/^([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);return t?"#"+[Math.max(0,Math.round(.88*parseInt(t[1],16))),Math.max(0,Math.round(.88*parseInt(t[2],16))),Math.max(0,Math.round(.88*parseInt(t[3],16)))].map(e=>e.toString(16).padStart(2,"0")).join(""):e}(e),d.forEach(t=>t.classList.toggle("active",t.dataset.primary?.toLowerCase()===e.toLowerCase())),n())};s.addEventListener("change",e=>c(e.target.value)),o.addEventListener("input",e=>{s.value=e.target.value,c(e.target.value)}),document.querySelectorAll('input[name="sidebar-bg"]').forEach(e=>{e.value===a.sidebarBg&&(e.checked=!0),e.addEventListener("change",()=>{e.checked&&(a.sidebarBg=e.value,n())})});var m=document.getElementById("radius-slider"),u=document.getElementById("radius-display");m.value=a.radius,u.textContent=`${a.radius} px`,m.addEventListener("input",()=>{a.radius=parseInt(m.value,10),u.textContent=`${a.radius} px`,n()});var l=document.getElementById("sidebar-w-slider"),p=document.getElementById("sidebar-w-display");l.value=a.sidebarW,p.textContent=`${a.sidebarW} px`,l.addEventListener("input",()=>{a.sidebarW=parseInt(l.value,10),p.textContent=`${a.sidebarW} px`,n()});var v=document.getElementById("font-size-slider"),y=document.getElementById("font-size-display");v.value=a.fontSize,y.textContent=`${a.fontSize} px`,v.addEventListener("input",()=>{a.fontSize=parseFloat(v.value),y.textContent=`${a.fontSize} px`,n()}),document.querySelectorAll('input[name="mode"]').forEach(e=>{e.value===a.mode&&(e.checked=!0),e.addEventListener("change",()=>{e.checked&&(a.mode=e.value,n())})}),document.getElementById("reset-theme").addEventListener("click",()=>{Object.assign(a,{primary:"#1ABB9C",primaryDk:"#169f85",sidebarBg:"#1a2332",radius:6,sidebarW:252,fontSize:14,mode:"light"}),d.forEach((e,t)=>e.classList.toggle("active",0===t)),s.value=a.primary,o.value=a.primary,document.querySelectorAll('input[name="sidebar-bg"]').forEach(e=>{e.checked=e.value===a.sidebarBg}),document.querySelectorAll('input[name="mode"]').forEach(e=>{e.checked=e.value===a.mode}),m.value=a.radius,u.textContent=`${a.radius} px`,l.value=a.sidebarW,p.textContent=`${a.sidebarW} px`,v.value=a.fontSize,y.textContent=`${a.fontSize} px`,n(),e("Theme reset")});var b=async()=>{try{await navigator.clipboard.writeText(document.getElementById("tokens-output").textContent),e("SCSS copied",{variant:"success"})}catch(t){e("Copy failed — select and Ctrl+C",{variant:"error"})}};document.getElementById("copy-tokens").addEventListener("click",b),document.getElementById("copy-tokens-2").addEventListener("click",b),document.getElementById("download-tokens").addEventListener("click",()=>{const t=document.getElementById("tokens-output").textContent,a=new Blob([t],{type:"text/x-scss"}),r=URL.createObjectURL(a),n=document.createElement("a");n.href=r,n.download="_tokens-override.scss",document.body.appendChild(n),n.click(),n.remove(),setTimeout(()=>URL.revokeObjectURL(r),0),e("Downloaded _tokens-override.scss",{variant:"success"})}),n();