One Fox for Day, One for Night: Mascots in Light and Dark Mode

There’s a little moment a lot of us know: you switch to dark mode in the evening, and suddenly the app looks like someone set the lights wrong. Text is bright, backgrounds are dark, but something feels off. Often it’s the images. An illustration that sat cheerfully on white during the day suddenly stands in the dark with a bright halo, like a sticker on a chalkboard.

LingFit faced that moment head-on. The app’s characters, led by Fitty Fox, come in separate versions for light and dark mode, according to the makers, so they always match the screen. That sounds like a footnote. For anyone who designs interfaces themselves, it’s a small lesson.

Why inverting isn’t enough

The obvious shortcut for dark mode is to just flip the colors or dim them. For text, that works well enough. For characters, it doesn’t. An orange fox turns blue when you invert it, and nobody wants a blue fox claiming to be Fitty.

There’s something else special about LingFit: the characters are fully 3D-rendered, with fur, soft shadows and lighting. A shadow that looks soft and natural on a white background can vanish or turn muddy on a dark one. Light that models a character gently on a bright background can be harsh in the dark. If you render real light into your characters, you basically have to build two lighting setups.

Two costumes instead of one filter

Going with separate versions means the character isn’t recolored, it adapts to its surroundings. We picture it like two costumes: one for the day, one for the night. The fox stays the same, but it’s dressed for both stages.

That fits the rest of the app’s theme settings. LingFit offers light, dark or “match the system,” plus eight accent colors. A theme system with that much choice falls apart fast if the characters don’t play along. With their own versions for both modes, the picture stays coherent no matter what you pick.

Where you actually see the characters

The effort pays off because the characters show up in a lot of places. According to LingFit, they greet you, wait and react during lessons, walk along your learning path and celebrate your wins. On top of that, there’s a halftime break in every lesson where a character tells a joke about itself, and a home screen widget with a streak flame and a daily mascot. So if you’re studying in dark mode at night, you’re not seeing the characters once, you’re seeing them constantly. A badly lit fox would get old fast.

A test you can try at home

If you like, you can try the detail yourself: open LingFit in the evening, switch between light and dark in the settings, and watch the characters. It’s a good exercise for your own eye. You learn what to look for in your own illustrations, namely edges, shadows and the question of whether a character stands on its background or just sticks to it.

What we’d steal for our own projects

For anyone currently working on a theme system, here’s a little sketch list:

1. Treat illustrations as theme elements. It’s not just colors and text that have a light and a dark state. Images need one too.
2. Check shadows and edges. Soft shadows and bright edges in particular give away instantly that an image was made for the other mode.
3. Don’t invert, relight. A character in the dark needs less brightness, not different colors. The identity stays, the lighting changes.
4. Take system mode seriously. Offering “match the system” is a promise that both modes look equally good. Every graphic has to keep that promise.

Three tiny delights

• The fox stays orange, even at midnight.
• Light, dark and system sit side by side as equals, instead of dark mode feeling like an afterthought.
• You can’t see the effort, and that’s exactly the point. Good theme design only gets noticed when it’s missing.

For this ping we set a little fox on a crescent moon, with a tiny sun beside it, as if it weren’t quite sure which shift it’s on. If you want to see the real fox by day and by night, you’ll find LingFit at lingfit.app.