/* DeskHub Tickets: übernimmt Farben vom Theme. * Schrift, Hintergrund und Rahmen kommen schon per CSS (currentColor). Hier wird nur die Akzentfarbe gelesen, * und zwar aus Knöpfen oder Links der Seite. Eine feste Farbe aus den Einstellungen (data-dht-accent) hat Vorrang. */ (function () { 'use strict'; function parse(c) { var m = /rgba?\(\s*([\d.]+)[ ,]+([\d.]+)[ ,]+([\d.]+)(?:[ ,/]+([\d.%]+))?\s*\)/.exec(c || ''); if (!m) { return null; } var a = m[4] === undefined ? 1 : (m[4].indexOf('%') > -1 ? parseFloat(m[4]) / 100 : parseFloat(m[4])); return { r: +m[1], g: +m[2], b: +m[3], a: a }; } function lum(c) { var f = function (v) { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }; return 0.2126 * f(c.r) + 0.7152 * f(c.g) + 0.0722 * f(c.b); } function contrast(a, b) { var l1 = lum(a), l2 = lum(b); return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05); } function css(c) { return 'rgb(' + Math.round(c.r) + ',' + Math.round(c.g) + ',' + Math.round(c.b) + ')'; } // Hintergrund, der hinter dem Formular wirklich zu sehen ist function pageBackground(el) { for (var n = el; n && n.nodeType === 1; n = n.parentNode) { var c = parse(getComputedStyle(n).backgroundColor); if (c && c.a > 0.5) { return c; } } return { r: 255, g: 255, b: 255, a: 1 }; } function saturation(c) { var mx = Math.max(c.r, c.g, c.b), mn = Math.min(c.r, c.g, c.b); return mx === 0 ? 0 : (mx - mn) / mx; } // Farbwert (auch #hex oder Name) in rgb umrechnen function resolve(wrap, value) { if (!value) { return null; } var span = document.createElement('span'); span.style.color = value; if (!span.style.color) { return null; } wrap.appendChild(span); var c = parse(getComputedStyle(span).color); wrap.removeChild(span); return c; } // Akzent der Seite: häufigste kräftige Farbe von Knöpfen (Füllung oder Rand), sonst Linkfarbe. // Die Farbe dient als Füllung, die Schrift darauf wird extra gewählt: ein geringer Kontrast zum Hintergrund (z. B. Orange auf Weiß) ist also in Ordnung. function themeAccent(wrap, bg) { var counts = {}, best = null, bestN = 0; function add(c, weight) { if (!c || c.a < 0.9 || saturation(c) < 0.25 || contrast(c, bg) < 1.3) { return; } var k = css(c); counts[k] = (counts[k] || 0) + weight; if (counts[k] > bestN) { bestN = counts[k]; best = c; } } var sel = '.wp-element-button, .wp-block-button__link, .button, .btn, [class*="btn"], [class*="button"], [role="button"], button, input[type="submit"], a'; var nodes = document.querySelectorAll(sel); for (var i = 0; i < nodes.length && i < 400; i++) { if (wrap.contains(nodes[i])) { continue; } var st = getComputedStyle(nodes[i]); add(parse(st.backgroundColor), /wp-element-button|wp-block-button__link|(^|\s)(button|btn)(\s|$)/.test(nodes[i].className || '') ? 4 : 2); if (parseFloat(st.borderTopWidth) > 0) { add(parse(st.borderTopColor), 1); } } if (best) { return best; } // Farbvariablen bekannter Themes und Seitenbauer (Block-Themes, Elementor, Astra, Kadence …) var names = ['--wp--preset--color--primary', '--wp--preset--color--accent', '--e-global-color-accent', '--e-global-color-primary', '--ast-global-color-0', '--global-palette1', '--global-palette-btn-bg', '--primary-color', '--accent-color', '--theme-color-primary', '--color-primary', '--color-accent', '--primary', '--accent', '--brand-color']; var rootStyle = getComputedStyle(document.documentElement); for (var k = 0; k < names.length; k++) { var v = rootStyle.getPropertyValue(names[k]).trim(); if (!v) { continue; } var vc = resolve(wrap, v); if (vc && vc.a > 0.9 && saturation(vc) >= 0.25 && contrast(vc, bg) >= 1.3) { return vc; } } var server = resolve(wrap, getComputedStyle(wrap).getPropertyValue('--dht-server-accent').trim()); if (server) { return server; } var probe = document.createElement('a'); probe.href = '#'; probe.style.cssText = 'position:absolute;visibility:hidden'; (wrap.parentNode || document.body).appendChild(probe); var lc = parse(getComputedStyle(probe).color); probe.parentNode.removeChild(probe); return lc && saturation(lc) >= 0.25 ? lc : null; } function apply(wrap) { var bg = pageBackground(wrap); var fg = parse(getComputedStyle(wrap).color) || { r: 0, g: 0, b: 0, a: 1 }; var dark = lum(bg) < 0.4; // Felder und Rahmen: feste Mischfarben aus Seitenhintergrund und Schriftfarbe (unabhängig von der Akzentfarbe) var mix = function (t) { return css({ r: bg.r + (fg.r - bg.r) * t, g: bg.g + (fg.g - bg.g) * t, b: bg.b + (fg.b - bg.b) * t }); }; wrap.style.setProperty('--dht-field-bg', mix(0.07)); wrap.style.setProperty('--dht-border', mix(0.3)); wrap.style.setProperty('--dht-muted', mix(0.7)); wrap.style.setProperty('--dht-bg', css(bg)); wrap.style.setProperty('--dht-fg', css(fg)); wrap.style.setProperty('color-scheme', dark ? 'dark' : 'light'); var accent; if (wrap.getAttribute('data-dht-accent') === 'fixed') { accent = resolve(wrap, getComputedStyle(wrap).getPropertyValue('--dht-theme-accent').trim()); } else { accent = themeAccent(wrap, bg); if (accent) { wrap.style.setProperty('--dht-theme-accent', css(accent)); } } if (!accent) { return; } // Schrift auf dem Knopf: schwarz oder weiß, je nachdem, was besser lesbar ist var white = { r: 255, g: 255, b: 255 }, black = { r: 17, g: 17, b: 17 }; wrap.style.setProperty('--dht-theme-on-accent', contrast(accent, white) >= contrast(accent, black) ? '#fff' : '#111'); } function ready() { document.querySelectorAll('.dht-wrap').forEach(apply); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', ready); } else { ready(); } // Nochmal nach dem Laden: Theme-Stile und Schriften können später kommen window.addEventListener('load', ready); })();