(() => { const root = document.documentElement; const defaultAccent = "#257BFF"; const defaultAccentMotion = {"enabled":false,"mode":"spectrum","durationSeconds":18,"colors":["#E11D48","#EA580C","#16A34A","#0891B2","#257BFF","#7C3AED"]}; const defaultBackground = {"mode":"default","surfaceStyle":"blend","chromeOpacity":82,"cardOpacity":86,"controlOpacity":80,"surfaceBlur":16,"surfaceSaturation":120,"borderStrength":58,"customMaterial":{"chromeOpacity":82,"cardOpacity":86,"controlOpacity":80,"surfaceBlur":16,"surfaceSaturation":120,"borderStrength":58},"solidColor":"#EEF4FF","gradientType":"linear","gradientColorCount":2,"gradientColors":["#E8F1FF","#EEF8F4","#F5EDFF"],"gradientAngle":135,"imageFit":"cover","imagePositionX":50,"imagePositionY":50,"imageZoom":100,"imageAspectRatio":null,"imageName":null}; const backgroundSurfacePresets = {"solid":{"chromeOpacity":96,"cardOpacity":98,"controlOpacity":96,"surfaceBlur":8,"surfaceSaturation":100,"borderStrength":72},"blend":{"chromeOpacity":82,"cardOpacity":86,"controlOpacity":80,"surfaceBlur":16,"surfaceSaturation":120,"borderStrength":58},"immersive":{"chromeOpacity":64,"cardOpacity":72,"controlOpacity":66,"surfaceBlur":24,"surfaceSaturation":138,"borderStrength":45}}; const backgroundImageStorageKey = "topping-theme-background-image"; const backgroundBlurBleed = 80; const backgroundImageZoomMin = 100; const backgroundImageZoomMax = 250; let mode = 'light'; let accent = defaultAccent; let foregroundMode = 'auto'; let accentMotion = defaultAccentMotion; let background = defaultBackground; let backgroundImage = null; const normalizeAccent = (value) => { if (typeof value !== 'string') return null; const trimmed = value.trim(); const shortMatch = /^#?([0-9a-f]{3})$/i.exec(trimmed); if (shortMatch) { const [r, g, b] = shortMatch[1].split(''); return ('#' + r + r + g + g + b + b).toUpperCase(); } const fullMatch = /^#?([0-9a-f]{6})$/i.exec(trimmed); return fullMatch ? ('#' + fullMatch[1]).toUpperCase() : null; }; const clampMotionValue = (value, min, max) => Math.max(min, Math.min(max, value)); const motionHexToRgb = (value) => ({ r: Number.parseInt(value.slice(1, 3), 16), g: Number.parseInt(value.slice(3, 5), 16), b: Number.parseInt(value.slice(5, 7), 16), }); const motionRgbToHex = ({ r, g, b }) => ( '#' + [r, g, b] .map((channel) => ( Math.max(0, Math.min(255, Math.round(channel))) .toString(16) .padStart(2, '0') )) .join('') ).toUpperCase(); const motionHexToHsl = (value) => { const { r, g, b } = motionHexToRgb(value); const red = r / 255; const green = g / 255; const blue = b / 255; const max = Math.max(red, green, blue); const min = Math.min(red, green, blue); const delta = max - min; const lightness = (max + min) / 2; let hue = 0; if (delta > 0) { if (max === red) hue = 60 * (((green - blue) / delta) % 6); else if (max === green) hue = 60 * (((blue - red) / delta) + 2); else hue = 60 * (((red - green) / delta) + 4); } return { h: ((hue % 360) + 360) % 360, s: delta === 0 ? 0 : (delta / (1 - Math.abs(2 * lightness - 1))) * 100, l: lightness * 100, }; }; const motionHslToHex = ({ h, s, l }) => { const hue = ((h % 360) + 360) % 360; const saturation = clampMotionValue(s, 0, 100) / 100; const lightness = clampMotionValue(l, 0, 100) / 100; const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation; const segment = hue / 60; const x = chroma * (1 - Math.abs((segment % 2) - 1)); const match = lightness - chroma / 2; const channels = segment < 1 ? [chroma, x, 0] : segment < 2 ? [x, chroma, 0] : segment < 3 ? [0, chroma, x] : segment < 4 ? [0, x, chroma] : segment < 5 ? [x, 0, chroma] : [chroma, 0, x]; return motionRgbToHex({ r: (channels[0] + match) * 255, g: (channels[1] + match) * 255, b: (channels[2] + match) * 255, }); }; const resolveSpectrumStartAccent = (value) => { const base = motionHexToHsl(value); const fallbackHue = motionHexToHsl(defaultAccent).h; return motionHslToHex({ h: base.s < 0.5 ? fallbackHue : base.h, s: clampMotionValue(base.s, 72, 96), l: clampMotionValue(base.l, 44, 58), }); }; const motionToLinearChannel = (value) => { const channel = value / 255; return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4; }; const motionGetContrastRatio = (first, second) => { const luminance = (color) => ( 0.2126 * motionToLinearChannel(color.r) + 0.7152 * motionToLinearChannel(color.g) + 0.0722 * motionToLinearChannel(color.b) ); const firstLuminance = luminance(motionHexToRgb(first)); const secondLuminance = luminance(motionHexToRgb(second)); const lighter = Math.max(firstLuminance, secondLuminance); const darker = Math.min(firstLuminance, secondLuminance); return (lighter + 0.05) / (darker + 0.05); }; const resolveMotionForegroundMode = (value) => ( motionGetContrastRatio(value, '#FFFFFF') >= 3 ? 'white' : 'black' ); const mixMotionHex = (first, second, progress) => { const start = motionHexToRgb(first); const end = motionHexToRgb(second); const ratio = clampMotionValue(progress, 0, 1); return motionRgbToHex({ r: start.r + (end.r - start.r) * ratio, g: start.g + (end.g - start.g) * ratio, b: start.b + (end.b - start.b) * ratio, }); }; const ensureMotionForegroundContrast = (value, mode) => { const foreground = mode === 'white' ? '#FFFFFF' : '#08111F'; if (motionGetContrastRatio(value, foreground) >= 3) return value; const target = mode === 'white' ? '#000000' : '#FFFFFF'; let lowerBound = 0; let upperBound = 1; let adjusted = target; for (let iteration = 0; iteration < 14; iteration += 1) { const ratio = (lowerBound + upperBound) / 2; const candidate = mixMotionHex(value, target, ratio); if (motionGetContrastRatio(candidate, foreground) >= 3) { adjusted = candidate; upperBound = ratio; } else { lowerBound = ratio; } } return adjusted; }; try { const raw = window.localStorage.getItem('topping-preferences'); const parsed = raw ? JSON.parse(raw) : null; const state = parsed && parsed.state ? parsed.state : null; const stored = state ? state.themeMode : null; if (stored === 'system') mode = 'auto'; else if (stored === 'auto' || stored === 'light' || stored === 'dark' || stored === 'glass' || stored === 'glass-dark') mode = stored; accent = normalizeAccent(state ? state.themeAccent : null) || defaultAccent; const storedForeground = state ? state.themeAccentForeground : null; if (storedForeground === 'white' || storedForeground === 'black') { foregroundMode = storedForeground; } accentMotion = state && state.themeAccentMotion && typeof state.themeAccentMotion === 'object' ? state.themeAccentMotion : defaultAccentMotion; background = state && state.themeBackground && typeof state.themeBackground === 'object' ? state.themeBackground : defaultBackground; const storedBackgroundImage = window.localStorage.getItem(backgroundImageStorageKey); backgroundImage = typeof storedBackgroundImage === 'string' && storedBackgroundImage.startsWith('data:image/') ? storedBackgroundImage : null; } catch {} if (false) { if (mode === 'glass-dark') mode = 'dark'; else if (mode === 'glass') mode = 'light'; } const prefersDark = mode === 'auto' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-color-scheme: dark)').matches; const dark = mode === 'dark' || mode === 'glass-dark' || prefersDark; const reducedMotion = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const routePerformancePause = window.location && window.location.pathname === '/autoeq'; const accentMotionEnabled = accentMotion && accentMotion.enabled === true; if (accentMotionEnabled) { foregroundMode = 'auto'; root.dataset.themeAccentMotion = reducedMotion || routePerformancePause ? (reducedMotion ? 'paused' : 'paused-performance') : 'pending'; if (!reducedMotion && !routePerformancePause) { if (accentMotion.mode === 'custom' && Array.isArray(accentMotion.colors)) { const firstMotionColor = accentMotion.colors .map((color) => normalizeAccent(color)) .find(Boolean); if (firstMotionColor) accent = firstMotionColor; } else { accent = resolveSpectrumStartAccent(accent); } foregroundMode = resolveMotionForegroundMode(accent); accent = ensureMotionForegroundContrast(accent, foregroundMode); } } root.classList.toggle('dark', dark); root.classList.toggle('theme-glass', mode === 'glass'); root.classList.toggle('theme-glass-dark', mode === 'glass-dark'); root.style.colorScheme = dark ? 'dark' : 'light'; if (accent !== defaultAccent || foregroundMode !== 'auto') { const clampChannel = (value) => Math.max(0, Math.min(255, Math.round(value))); const hexToRgb = (value) => ({ r: Number.parseInt(value.slice(1, 3), 16), g: Number.parseInt(value.slice(3, 5), 16), b: Number.parseInt(value.slice(5, 7), 16), }); const rgbToHex = ({ r, g, b }) => ( '#' + [r, g, b] .map((channel) => clampChannel(channel).toString(16).padStart(2, '0')) .join('') ).toUpperCase(); const mix = (color, target, targetWeight) => { const ratio = Math.max(0, Math.min(1, targetWeight)); return { r: color.r + (target.r - color.r) * ratio, g: color.g + (target.g - color.g) * ratio, b: color.b + (target.b - color.b) * ratio, }; }; const lighten = (color, amount) => mix(color, { r: 255, g: 255, b: 255 }, amount); const darken = (color, amount) => mix(color, { r: 0, g: 0, b: 0 }, amount); const toLinearChannel = (value) => { const channel = value / 255; return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4; }; const getContrastRatio = (first, second) => { const luminance = (color) => ( 0.2126 * toLinearChannel(color.r) + 0.7152 * toLinearChannel(color.g) + 0.0722 * toLinearChannel(color.b) ); const firstLuminance = luminance(hexToRgb(first)); const secondLuminance = luminance(hexToRgb(second)); const lighter = Math.max(firstLuminance, secondLuminance); const darker = Math.min(firstLuminance, secondLuminance); return (lighter + 0.05) / (darker + 0.05); }; const pickReadableAccent = (base, useDarkSurface) => { const surface = useDarkSurface ? '#1C2230' : '#FFFFFF'; const candidates = useDarkSurface ? [ lighten(base, 0.22), lighten(base, 0.34), lighten(base, 0.46), lighten(base, 0.58), lighten(base, 0.7), base, ] : [ darken(base, 0.12), darken(base, 0.24), darken(base, 0.36), darken(base, 0.5), darken(base, 0.62), darken(base, 0.72), base, ]; const candidateHexes = candidates.map(rgbToHex); const readable = candidateHexes.find( (candidate) => getContrastRatio(candidate, surface) >= 4.5 ); if (readable) return readable; return candidateHexes.sort( (first, second) => ( getContrastRatio(second, surface) - getContrastRatio(first, surface) ) )[0]; }; const rgba = (color, alpha) => ( 'rgba(' + clampChannel(color.r) + ', ' + clampChannel(color.g) + ', ' + clampChannel(color.b) + ', ' + alpha + ')' ); const base = hexToRgb(accent); const readableAccent = pickReadableAccent(base, dark); const notificationBadgeText = pickReadableAccent(base, false); const onPrimary = foregroundMode === 'white' ? '#FFFFFF' : foregroundMode === 'black' ? '#08111F' : getContrastRatio(accent, '#FFFFFF') >= 3 ? '#FFFFFF' : '#08111F'; const shades = { 50: rgbToHex(lighten(base, 0.93)), 100: rgbToHex(lighten(base, 0.84)), 200: rgbToHex(lighten(base, 0.68)), 300: rgbToHex(lighten(base, 0.5)), 400: rgbToHex(lighten(base, 0.28)), 500: accent, 600: rgbToHex(darken(base, 0.1)), 700: rgbToHex(darken(base, 0.28)), 800: rgbToHex(darken(base, 0.48)), 900: rgbToHex(darken(base, 0.7)), }; const tokens = { '--ds-action-primary-rgb': base.r + ' ' + base.g + ' ' + base.b, '--ds-action-primary': accent, '--ds-action-primary-light': shades[400], '--ds-action-primary-50': shades[50], '--ds-action-primary-100': shades[100], '--ds-action-primary-200': shades[200], '--ds-action-primary-300': shades[300], '--ds-action-primary-400': shades[400], '--ds-action-primary-500': shades[500], '--ds-action-primary-600': shades[600], '--ds-action-primary-700': shades[700], '--ds-action-primary-800': shades[800], '--ds-action-primary-900': shades[900], '--ds-action-accent-rgb': base.r + ' ' + base.g + ' ' + base.b, '--ds-action-accent': accent, '--ds-app-primary': accent, '--ds-app-primary-light': shades[400], '--ds-text-on-primary': onPrimary, '--ds-ui-primary': readableAccent, '--ds-ui-primary-subtle': rgba(base, dark ? 0.22 : 0.14), '--ds-ui-primary-ring': rgba(base, dark ? 0.58 : 0.36), '--ds-notification-badge-bg': '#FFFFFF', '--ds-notification-badge-text': notificationBadgeText, '--ds-chart-preview-line-compact': rgba(base, dark ? 0.88 : 0.8), '--ds-chart-preview-line': rgba(base, dark ? 0.92 : 0.85), '--ds-chart-preview-glow': rgba(base, dark ? 0.2 : 0.15), '--ds-chart-preview-cursor': rgba(base, dark ? 0.75 : 0.65), '--ds-autoeq-result-border': rgba(base, dark ? 0.4 : 0.26), '--ds-glass-hover-border': rgba(base, dark ? 0.48 : 0.3), '--ds-focus-ring': rgba(base, dark ? 0.58 : 0.36), '--ds-pcl-accent-dim': rgba(base, dark ? 0.46 : 0.26), '--ds-shadow-primary': '0 4px 12px ' + rgba(base, 0.3), '--ds-shadow-primary-hover': '0 4px 16px ' + rgba(base, 0.4), '--ds-gradient-glow-primary': rgba(base, dark ? 0.12 : 0.18), }; for (const [property, value] of Object.entries(tokens)) { root.style.setProperty(property, value); } } const backgroundMode = background && ( background.mode === 'solid' || background.mode === 'gradient' || background.mode === 'image' ) ? background.mode : 'default'; const backgroundColor = normalizeAccent(background ? background.solidColor : null) || defaultBackground.solidColor; const rawGradientColors = background && Array.isArray(background.gradientColors) ? background.gradientColors : defaultBackground.gradientColors; const gradientColors = [ normalizeAccent(rawGradientColors[0]) || defaultBackground.gradientColors[0], normalizeAccent(rawGradientColors[1]) || defaultBackground.gradientColors[1], normalizeAccent(rawGradientColors[2]) || defaultBackground.gradientColors[2], ]; const gradientColorCount = background && background.gradientColorCount === 3 ? 3 : 2; const gradientType = background && ( background.gradientType === 'radial' || background.gradientType === 'conic' ) ? background.gradientType : 'linear'; const rawGradientAngle = background ? Number(background.gradientAngle) : NaN; const gradientAngle = Number.isFinite(rawGradientAngle) ? ((Math.round(rawGradientAngle) % 360) + 360) % 360 : defaultBackground.gradientAngle; const imageFit = background && background.imageFit === 'contain' ? 'contain' : 'cover'; const clampImageNumber = (value, fallback, min, max) => { const numeric = Number(value); return Number.isFinite(numeric) ? Math.max(min, Math.min(max, Math.round(numeric))) : fallback; }; const imagePositionX = clampImageNumber( background ? background.imagePositionX : null, defaultBackground.imagePositionX, 0, 100 ); const imagePositionY = clampImageNumber( background ? background.imagePositionY : null, defaultBackground.imagePositionY, 0, 100 ); const imageZoom = clampImageNumber( background ? background.imageZoom : null, defaultBackground.imageZoom, backgroundImageZoomMin, backgroundImageZoomMax ); const rawImageAspectRatio = background ? Number(background.imageAspectRatio) : NaN; const imageAspectRatio = Number.isFinite(rawImageAspectRatio) && rawImageAspectRatio >= 0.05 && rawImageAspectRatio <= 20 ? Math.round(rawImageAspectRatio * 10000) / 10000 : null; const clampMaterial = (value, fallback, min, max) => { const numeric = Number(value); return Number.isFinite(numeric) ? Math.max(min, Math.min(max, Math.round(numeric))) : fallback; }; const surfaceStyle = background && ( background.surfaceStyle === 'solid' || background.surfaceStyle === 'immersive' || background.surfaceStyle === 'custom' ) ? background.surfaceStyle : 'blend'; const storedCustomMaterial = background && background.customMaterial && typeof background.customMaterial === 'object' ? background.customMaterial : null; const customMaterialFallback = defaultBackground.customMaterial || backgroundSurfacePresets.blend; const customMaterial = { chromeOpacity: clampMaterial( storedCustomMaterial ? storedCustomMaterial.chromeOpacity : null, customMaterialFallback.chromeOpacity, 45, 100 ), cardOpacity: clampMaterial( storedCustomMaterial ? storedCustomMaterial.cardOpacity : null, customMaterialFallback.cardOpacity, 45, 100 ), controlOpacity: clampMaterial( storedCustomMaterial ? storedCustomMaterial.controlOpacity : null, customMaterialFallback.controlOpacity, 45, 100 ), surfaceBlur: clampMaterial( storedCustomMaterial ? storedCustomMaterial.surfaceBlur : null, customMaterialFallback.surfaceBlur, 0, 30 ), surfaceSaturation: clampMaterial( storedCustomMaterial ? storedCustomMaterial.surfaceSaturation : null, customMaterialFallback.surfaceSaturation, 80, 160 ), borderStrength: clampMaterial( storedCustomMaterial ? storedCustomMaterial.borderStrength : null, customMaterialFallback.borderStrength, 0, 100 ), }; const materialPreset = surfaceStyle === 'custom' ? customMaterial : backgroundSurfacePresets[surfaceStyle]; const chromeOpacity = clampMaterial( background ? background.chromeOpacity : null, materialPreset.chromeOpacity, 45, 100 ); const cardOpacity = clampMaterial( background ? background.cardOpacity : null, materialPreset.cardOpacity, 45, 100 ); const controlOpacity = clampMaterial( background ? background.controlOpacity : null, materialPreset.controlOpacity, 45, 100 ); const surfaceBlur = clampMaterial( background ? background.surfaceBlur : null, materialPreset.surfaceBlur, 0, 30 ); const surfaceSaturation = clampMaterial( background ? background.surfaceSaturation : null, materialPreset.surfaceSaturation, 80, 160 ); const borderStrength = clampMaterial( background ? background.borderStrength : null, materialPreset.borderStrength, 0, 100 ); let userBackground = null; let userBackgroundSize = 'cover'; if (backgroundMode === 'solid') { userBackground = backgroundColor; } else if (backgroundMode === 'gradient') { const stops = gradientColorCount === 3 ? gradientColors[0] + ' 0%, ' + gradientColors[1] + ' 50%, ' + gradientColors[2] + ' 100%' : gradientColors[0] + ' 0%, ' + gradientColors[1] + ' 100%'; if (gradientType === 'radial') { userBackground = 'radial-gradient(circle at center, ' + stops + ')'; } else if (gradientType === 'conic') { const conicStops = gradientColorCount === 3 ? gradientColors[0] + ' 0deg, ' + gradientColors[1] + ' 120deg, ' + gradientColors[2] + ' 240deg, ' + gradientColors[0] + ' 360deg' : gradientColors[0] + ' 0deg, ' + gradientColors[1] + ' 180deg, ' + gradientColors[0] + ' 360deg'; userBackground = 'conic-gradient(from ' + gradientAngle + 'deg at center, ' + conicStops + ')'; } else { userBackground = 'linear-gradient(' + gradientAngle + 'deg, ' + stops + ')'; } } else if (backgroundMode === 'image' && backgroundImage) { userBackground = 'url(' + JSON.stringify(backgroundImage) + ')'; if (imageAspectRatio) { const sizeFunction = imageFit === 'cover' ? 'max' : 'min'; const scale = imageZoom / 100; const formatCssNumber = (value) => String(Math.round(value * 1000) / 1000); userBackgroundSize = sizeFunction + '(' + 'calc(' + formatCssNumber(imageZoom) + 'vw + ' + formatCssNumber(backgroundBlurBleed * scale) + 'px), ' + 'calc(' + formatCssNumber(imageAspectRatio * imageZoom) + 'vh + ' + formatCssNumber(backgroundBlurBleed * scale * imageAspectRatio) + 'px)' + ') auto'; } else { userBackgroundSize = imageFit; } } if (userBackground) { root.style.setProperty('--app-user-background', userBackground); root.style.setProperty('--app-user-background-size', userBackgroundSize); root.style.setProperty( '--app-user-background-position', backgroundMode === 'image' ? imagePositionX + '% ' + imagePositionY + '%' : 'center' ); root.style.setProperty('--app-user-background-repeat', 'no-repeat'); root.style.setProperty('--app-material-chrome-opacity', (chromeOpacity / 100).toFixed(2)); root.style.setProperty('--app-material-card-opacity', (cardOpacity / 100).toFixed(2)); root.style.setProperty('--app-material-control-opacity', (controlOpacity / 100).toFixed(2)); root.style.setProperty('--app-material-blur', surfaceBlur + 'px'); root.style.setProperty('--app-material-saturation', surfaceSaturation + '%'); root.style.setProperty('--app-material-border-strength', (borderStrength / 100).toFixed(2)); root.dataset.themeBackgroundSurface = surfaceStyle; } else { delete root.dataset.themeBackgroundSurface; } root.dataset.themePrepaint = 'ready'; })();