Some things shall not be seen.
Some things demand to be glimpsed. But only when the veil shifts.
I wanted a way for words on my blog to hide in plain sight, wearing the skin of the background itself, but then whisper out when the light flips to dark, or the dark to light. A ghost in the stylesheet. A revenant in Helvetica.
The method is simple: a CSS class that forces text to inherit the background color of the page as its text color. Then, when the theme changes, the text hesitates for a beat. It lingers in the wrong shade just long enough to reveal itself as a phosphor sparking within a dying bulb. Then fades into nothing.
Here’s the magic:
:root {
--theme-reveal-delay: 1s; /* How long the ghost lingers */
--theme-reveal-duration: 0.6s; /* How quickly it fades away */
}
.phosphor {
color: var(--background-color) !important;
transition: color var(--theme-reveal-duration, 0.6s) ease-in-out var(--theme-reveal-delay, 1s);
}
.phosphor a {
color: inherit !important;
}
@media (prefers-reduced-motion: reduce) {
.phosphor { transition: none; /* always respect accessibility */}
}
Add the .phosphor class to any text element. Like so:
<p class="phosphor">this message flickers briefly into existence when you toggle themes</p>
this message flickers briefly into existence when you toggle themes
How It Works
- Normal State: The text color is always equal to the background color, so it’s invisible—camouflaged, hidden, erased.
- On Theme Switch: Your CSS variables for background update instantly. But the text color is delayed by a second, meaning the text clings to the old background color for a moment.
- The Reveal: Because the background changed instantly, but the text did not, the words appear, stark and spectral, against the new field. They glow for a heartbeat. And gone.
This isn’t flashy animation. It’s a temporal glitch. A haunting. A way to let words live only in the seam between states. Hidden text wants to be read, and sometimes the reader may not be ready for what it says.
Use with caution.