alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto-compute contrast text color for accent backgrounds

Browse Source 
Add --primary-contrast CSS variable that auto-switches between white and
dark text based on accent color luminance (WCAG relative luminance).
Replace all hardcoded #fff/white on primary-color backgrounds with
var(--primary-contrast) so light accent colors like yellow remain readable.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-27 16:22:45 +03:00
parent 46a2ebf61e
commit 2bca119ad4
9 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
server/src/wled_controller/templates/index.html
View File

@@ -223,12 +223,22 @@
return '#'+[rr,gg,bb].map(x=>Math.round(x*255).toString(16).padStart(2,'0')).join('');
}
function contrastColor(hex) {
const r = parseInt(hex.slice(1,3),16)/255;
const g = parseInt(hex.slice(3,5),16)/255;
const b = parseInt(hex.slice(5,7),16)/255;
const lin = c => c <= 0.03928 ? c/12.92 : Math.pow((c+0.055)/1.055, 2.4);
const L = 0.2126*lin(r) + 0.7152*lin(g) + 0.0722*lin(b);
return L > 0.36 ? '#1a1a1a' : '#ffffff';
}
function applyAccentColor(hex, silent) {
const root = document.documentElement;
root.style.setProperty('--primary-color', hex);
const theme = root.getAttribute('data-theme');
root.style.setProperty('--primary-text-color', adjustLightness(hex, theme === 'dark' ? 15 : -15));
root.style.setProperty('--primary-hover', adjustLightness(hex, 8));
root.style.setProperty('--primary-contrast', contrastColor(hex));
document.getElementById('accent-swatch').style.background = hex;
document.getElementById('accent-picker').value = hex;
// Mark the active preset dot