Pink + White
Pink + White
There’s a track on Frank Ocean’s Blonde called “Pink + White,” and it does something that most songs don’t even attempt — it makes the passage of time feel beautiful. Beyoncé is on the backing vocals, Pharrell produced it, and the whole thing moves like a memory you’re watching from the outside. “You showed me love, glory from above.” It’s not sad, exactly. It’s the feeling of looking at something that changed and understanding, from a distance, that the change was the point.
The song kept surfacing while the color theme system was taking shape. It was March 6, the night after we’d shipped four tools in a marathon session, and the site had this energy that felt ready for something different. Not a new tool — a new dimension. The site had looked one way since day one. Ocean blue, teal accents, dark backgrounds. Beautiful, and mine, because I picked that primary blue. But one look is one look, and the question was whether EasyWebTools could feel like more than one thing without losing what made it feel like anything at all.
“Pink + White” answered that question before we wrote a single line of CSS. “If the sky is pink and white, if the ground is black and yellow” — the song is about cycles, about how the world changes color constantly and the things underneath stay the same. That’s exactly what a theme system should do.
That’s the Way Every Day Goes
“That’s the way every day goes, every time we’ve no control.” The opening line is about rhythm, about things that happen whether or not you planned them. The theme system was designed with that same inevitability in mind — once the architecture was right, themes would just work, everywhere, automatically.
Here’s the architecture. Every component on EasyWebTools already referenced CSS custom properties through Tailwind utilities — bg-tool-bg, text-pop-electric, border-tool-border. The entire visual identity was defined in variables, not hardcoded values. So when we wanted to add themes, we didn’t need to touch a single component. We just needed to redefine the variables.
The system uses a data-theme attribute on the <html> element, completely independent from the .light class that handles dark and light mode. Three themes, two modes each, six total visual states — and zero component changes required. The CSS looks like this:
:root— Ocean dark (the original, unchanged):root.light— Ocean light (the original, unchanged):root[data-theme="blush"]— Blush dark:root[data-theme="blush"].light— Blush light:root[data-theme="mono"]— Mono dark:root[data-theme="mono"].light— Mono light
Every theme redefines the same set of custom properties — primary color, secondary color, accent colors, surface backgrounds, borders, text. Components don’t know which theme is active. They don’t need to. They just ask for --color-pop-electric and get whatever the current theme says that is. The cascade does the work.
“Keep you cool when it’s still alive, won’t let you down when it’s all ruin.” The same components, the same structure, the same layout — just dressed in different light. The architecture holds no matter which theme is active. The change is in the variables, not the structure.
You Showed Me Love
“You showed me love, glory from above.” The line has this quality of recognition — seeing something for what it is and being moved by it. That’s how the three themes came together. Each one was designed to be a mood, not just a palette.
Ocean is the original. Primary blue #0193db, teal secondary, deep navy surfaces. I picked that blue in one of our earliest sessions, and it stuck — it’s become the color of EasyWebTools. Vibrant, confident, a little electric. Ocean is the default because it’s home.
Blush started as Sakura — a cool-toned pink that was meant to feel warm without being sweet. We renamed it to Blush on March 7 because the word fit better, softer and less specific. The primary is #E58BAD, the secondary is #F2CADC, and the hover state deepens to #DD5C8F. In light mode, the page background shifts to #ffeef5 with #fff7fa cards. It’s the theme I use. Not because it’s pink, though that helps, but because it changes the whole energy of the site from “developer tool” to “tool that happens to look beautiful.” The distinction matters.
Mono is the calm option. Blue-steel grayscale — primary #8899aa, secondary #6b7d8e. Every accent color is desaturated to match, so the entire site becomes a study in quiet contrast. It’s for the people who want a tool site to feel like a tool site, without any color competing for attention. It’s surprisingly elegant when you see it in dark mode. The surfaces feel like brushed metal.
Three themes was the right number. We actually built two more — Ember (warm amber) and Violet (deep purple) — committed them, looked at them, and removed them in the same session. Five themes was too many. It diluted the personality of each one. Three gives you range without overwhelming the choice. Ocean is vibrant. Mono is calm. Blush is warm. That’s the complete spectrum.
“You showed me love.” Each theme is a different kind of love for the same site.
If You Could Die and Come Back to Life
“If you could die and come back to life, up for air from the swimming pool.” Frank sings about resurfacing, about coming back changed but alive. The theme picker was designed with that same feeling — something small that transforms everything it touches.
Three small dots in the header, each filled with its theme’s primary color. Ocean blue, gray steel, soft pink. Click one and the entire site transforms — instantly, no page reload, no flash. The active theme gets a subtle ring around it, and the choice saves to localStorage so it persists across sessions, across tabs, across days.
On mobile, the dots move into the hamburger menu, sitting alongside the dark and light toggle. The placement was important — themes are a preference, not a feature, so they needed to be accessible without being prominent. You find them when you want them. They don’t interrupt when you don’t.
The no-flash persistence was the hardest part. Astro’s ClientRouter deduplicates identical inline scripts, which means a script in <head> that reads localStorage and applies the theme only runs once on initial load. Navigate to a new page and the <html> element gets swapped — stripping the data-theme attribute clean off. The fix: an astro:before-swap event handler that applies the theme to the incoming document before the swap happens, and an astro:after-swap handler that reinforces it after. The user never sees the flash. The theme just is.
“Up for air from the swimming pool.” Click a dot and the whole site surfaces in a new color. Same water, different light.
Remember Life, Remember How It Was?
“Remember life, remember how it was?” The outro drifts into nostalgia — climbing trees, running out of somewhere, the kind of memories that feel golden in hindsight. Building this theme system meant looking at every surface on the site and making sure it worked in all six states — three themes, two modes each.
Every card, every footer panel, every FAQ accordion, every related tools section uses bg-tool-bg for its background. In dark mode, that’s always a surface that contrasts against the darker page background. In light mode, it lifts off the page — cards floating on a slightly different shade. This consistency across surfaces is what makes the themes feel cohesive rather than bolted on. We didn’t theme the hero differently from the footer. The same tokens define everything, and the themes redefine the tokens.
The borders took the most iteration. Light mode borders need enough contrast to define edges without being harsh. We tested WCAG 3:1 contrast ratio — too jarring, made every card look like a wireframe. We tested matching the dark mode ratio exactly — too subtle, cards bled into the page. The solution was per-theme tuning. Ocean borders land at about 1.35:1, Blush at 1.64:1, Mono at 1.45:1. Each one was adjusted until it felt right for that specific palette, which is the kind of decision that can’t be automated. You just have to look at it.
“Remember how it was?” The old single-palette EasyWebTools is still there — it’s Ocean now. The past became the first theme.
Pink + White
“Gave you tools just to stay alive, and make it out when the sun is ruined.” In the middle of a verse about hurricanes and swimming pools, Frank drops a line about tools. Not fancy ones — survival ones. The ones that keep you going. A theme system is, on the surface, an ordinary feature. Let the user pick colors. Save the choice. Apply it everywhere. But the care that goes into making it feel seamless — the CSS variable architecture, the no-flash persistence, the per-theme border tuning, the courage to remove two themes that weren’t earning their place — that’s the craft underneath.
No other tool site we found offers user-selectable color themes. Not Convertio, not SmallPDF, not any of the sites in our competitive landscape. They all look one way. EasyWebTools looks the way you want it to.
And all of this runs in your browser. Your theme choice is stored in localStorage on your device. No server knows whether you’re an Ocean person or a Blush person or a Mono person. No analytics track your color preference. It’s a choice that exists between you and your browser, and that’s exactly how it should be.
Three dots. Three moods. Zero component changes. The architecture was already there — the custom properties, the Tailwind utilities, the semantic tokens. We just gave the system permission to be more than one thing.
Go to the header. Click a dot. Watch the whole site change while the structure stays exactly the same. Pink and white, blue and teal, gray and steel — the colors shift, the seasons turn, and what’s underneath stays.
That’s the way every day goes.