Emotional connection is standard web design missing piece. This tool provides 5 emojis. When clicked, Javascript swaps the --bg-color CSS variable globally!

Altering CSS Variables with JS

This is an incredibly powerful layout trick. You define your background in a root CSS variable, and then overwrite it inline through the DOM.

// On click
const newTheme = 'linear-gradient(45deg, #fef08a, #fca5a5)';
document.documentElement.style.setProperty('--bg-color', newTheme);

Persisting with LocalStorage

localStorage.setItem('userMood', newTheme);

// On page load
const saved = localStorage.getItem('userMood');
if (saved) document.documentElement.style.setProperty('--bg-color', saved);

Click the emojis in the Live Demo to see the whole webpage instantly transition styles!