A quick rant about dark mode
I need to get a pedantic little rant out of my system. I‘ve seen a lot of conversations out there on the internet about application theming and dark mode. A lot of folks seem to conflate dark mode with theming and I cannot help that it gets under my skin. So consider this little rant to be my first small attempt to get folks to change the way they talk about dark mode and theming.
A dark option to your branding theme is a “mode” not a “theme”. Especially when that option is backed by a browser setting.
What is a theme?#
In my mind, a “theme” is a set of design token values that implement a single expression of a brand aesthetic. If you work at a smaller company, you might only have one brand look and feel, so you might only have one theme. If you work at a larger company or one that serves as an umbrella for a variety of brands, you might have several themes.
TO explain further, let‘s say you are building a design token library for a company with several products and each product has its own color scheme and branding style. Product A has a blue color scheme, lots of spacing, and pill buttons, and Product B has a green scheme, more compact spacing, and rounded rectangle buttons. You are a brilliant design system creator, so you make an amazing set of semantic design token names and you need to set token values for Product A and B. The set of token values you create for Product A with the blue color scheme is a theme. Likewise the set of token values you create for Product B is a different theme. If both themes default to light colors, then that can optionally be called “light mode” for each theme, and you can optionally make a dark mode variant for each theme.
Why dark mode isn‘t a theme#
The crux of the terminology choice for me is that light and dark style should still obey the branding concepts and principles for each product. They are not their own themes, they are variations on a theme. Ask a musician if you know one, variations on a theme are all over the place in classical music. If there wasn‘t a browser setting that controlled light and dark mode preference, I‘t insist we use the term “variant”, but since we do have a browser setting, let‘s all agree to call light and dark variations of a theme “modes” from now on?
^ That gif makes me want to make an “Edna Mode” variant of one of my themes ;P
What if I only have a theme with dark colors?#
Well then you have a theme with only a single mode and that mode happens to be dark.
Why does this matter?#
Only because words mean things and I‘m more than a little bit pedantic about terminology. It drives me crazy to see <html data-theme="dark"> on a site, but that convention seems relatively pervasive. We all call it “dark mode” when we talk about the feature we‘re implementing, then go immediately slap a data-theme="" on our <html> and completely ignore the fact that we called it a “mode” 10 seconds before we wrote the code.
The Dark Reader chrome extension use both “mode” and “theme” in the first two sentences of their description and they are describing the same thing.
“Mode” and “theme” are not interchangeable
Popular articles on CSS-Tricks talk about implementing “A Dark Mode Toggle with React ThemeProvider”. There we go again mixing terms.
The idea that “mode” and “theme” are interchangeable is everywhere. I‘d prefer that we establish a separation between the two terms so that we can more properly define what roles themes and modes play and more properly implement them.
/rant
The End