Deep dive into how we created Moneypile's unique tinted theme system that applies accent colors to the entire UI.
When we set out to build Moneypile, we wanted to go beyond the typical light/dark mode toggle. We envisioned a theming system that would give users unprecedented control over their interface's visual feel. The result? Our innovative tinted theme system.
Most applications offer themes that simply swap between predefined color sets. You get a primary color, maybe an accent, and that's it. The rest of the UI remains in neutral grays. While functional, this approach feels disconnected and lacks visual cohesion.
"We wanted every pixel to feel intentional, every color to contribute to a cohesive visual experience."
Our tinted themes apply the accent color's hue across the entire interface. Instead of gray backgrounds and borders, everything takes on a subtle tint of your chosen color. The result is a more immersive, cohesive visual experience.
Here's how we implemented tinted themes in our SvelteKit application:
/* Regular Theme - Traditional Approach */
.theme-slate {
--background: 0 0% 100%; /* Pure white */
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%; /* Slate blue */
--muted: 210 40% 96.1%; /* Gray */
}
/* Tinted Theme - Our Innovation */
.theme-slate-tinted {
--background: 210 11% 98%; /* White with blue tint */
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--muted: 215 12% 93%; /* Gray with blue tint */
}The key is in the HSL color values. For tinted themes, we maintain the same hue across all neutral colors but adjust saturation and lightness to create the appropriate contrast levels.
We built a system that generates these themes programmatically:
function generateTintedTheme(baseHue: number, name: string) {
return {
name: `${name}-tinted`,
colors: {
background: {
light: `${baseHue} 11% 98%`,
dark: `${baseHue} 8% 8%`
},
muted: {
light: `${baseHue} 12% 93%`,
dark: `${baseHue} 10% 15%`
},
card: {
light: `${baseHue} 10% 99%`,
dark: `${baseHue} 9% 12%`
}
}
}
}Creating tinted themes wasn't just a technical challengeit required careful design consideration. Too much saturation makes the interface overwhelming; too little and you lose the effect entirely.
We tested dozens of combinations before settling on our formula:
To help users distinguish between regular and tinted themes, we added a subtle white dot indicator in our theme selector:
{#if theme.includes('-tinted')}
<div class="absolute top-1 right-1 h-2 w-2 rounded-full bg-white shadow-sm" />
{/if}One concern with dynamic theming is performance. We optimized by:
// Theme switching with zero flicker
function setTheme(themeName: string) {
document.documentElement.className = themeName;
localStorage.setItem('selected-theme', themeName);
}The response has been overwhelmingly positive. Users love the ability to truly make the interface their own. Some feedback we've received:
"The lavender tinted theme makes using Moneypile feel calming and focused. It's like the whole app was designed just for me."
"I never realized how jarring gray interfaces felt until I tried the tinted themes. Now I can't go back!"
We're exploring several enhancements to our theme system:
The best way to understand tinted themes is to experience them. Head to your Moneypile settings and try switching between regular and tinted variants of the same color. Notice how the entire interface transforms while maintaining perfect readability and contrast.
Our theme system is open source, so feel free to explore the implementation in our GitHub repository and adapt it for your own projects.
We believe that software should be both powerful and beautiful. Our tinted theme system is just one example of how we're pushing the boundaries of what personal finance software can be.