iobroker.mywebui 1.85.0 → 1.86.0

package/default-controls/controls/theme/theme-toggle.control

@@ -0,0 +1 @@
+{"properties": {"lighttheme": {"type": "string", "default": "light"}, "darktheme": {"type": "string", "default": "dark"}}, "settings": {"width": "170px", "height": "40px"}, "html": "<div id=\"wrap\" class=\"tt-wrap\"><button class=\"tt-seg\" id=\"seg-auto\" data-mode=\"auto\" title=\"Auto (system)\" type=\"button\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-5.35 7.31L14 14H10l-.65 2H7.4l3.05-8h1.9l3.05 8h-1.75z\"/></svg></button><button class=\"tt-seg\" id=\"seg-light\" data-mode=\"light\" title=\"Light\" type=\"button\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z\"/></svg></button><button class=\"tt-seg\" id=\"seg-dark\" data-mode=\"dark\" title=\"Dark\" type=\"button\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z\"/></svg></button></div>", "style": ":host{display:inline-block;font-family:'Segoe UI',Roboto,sans-serif;}.tt-wrap{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;border:1px solid var(--ui-border,#3b4250);background:var(--ui-surface-2,#2f3545);height:100%;box-sizing:border-box;}.tt-seg{appearance:none;border:none;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px 16px;background:transparent;color:var(--ui-dim,#9aa3b0);transition:background .15s,color .15s;}.tt-seg + .tt-seg{border-left:1px solid var(--ui-border,#3b4250);}.tt-seg svg{width:20px;height:20px;fill:currentColor;display:block;}.tt-seg:hover{color:var(--ui-text,#e2e6ec);}.tt-seg.active{background:color-mix(in srgb,var(--accent,#2680eb) 22%,transparent);color:var(--accent,#2680eb);}.tt-seg[data-mode=auto].active svg{filter:drop-shadow(0 0 1px var(--accent,#2680eb));}", "script": "const KEY='webui-theme-mode';\nfunction resolved(instance,mode){\n    if(mode==='light') return instance.lighttheme||'light';\n    if(mode==='dark') return instance.darktheme||'dark';\n    return window.matchMedia('(prefers-color-scheme: dark)').matches?(instance.darktheme||'dark'):(instance.lighttheme||'light');\n}\nfunction getMode(){ try{ return localStorage.getItem(KEY)||'auto'; }catch(e){ return 'auto'; } }\nfunction mark(instance){\n    const m=getMode();\n    for(const md of ['auto','light','dark']){\n        const b=instance._getDomElement('seg-'+md);\n        if(b) b.classList.toggle('active', md===m);\n    }\n}\nfunction setMode(instance,mode){\n    try{ localStorage.setItem(KEY,mode); }catch(e){}\n    if(window.mywebuiTheme) window.mywebuiTheme.apply(resolved(instance,mode));\n    mark(instance);\n}\nexport function init(instance){\n    for(const md of ['auto','light','dark']){\n        const b=instance._getDomElement('seg-'+md);\n        if(b) b.addEventListener('click',()=>setMode(instance,md));\n    }\n    try{\n        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change',()=>{\n            if(getMode()==='auto') setMode(instance,'auto');\n        });\n    }catch(e){}\n    window.addEventListener('webui-theme-changed',()=>mark(instance));\n    // re-apply on load so 'auto' resolves against the CURRENT system scheme\n    if(window.mywebuiTheme && getMode()==='auto') setMode(instance,'auto'); else mark(instance);\n}\nexport function connectedCallback(instance){}"}