Theme

What is theming?

The art of letting the user choose how to enjoy your app

A theme is a set of graphical assets to be used to define the visual aspect of a page or website. When you hear "theming", it usually refers to the practice of letting the user choose parts of the graphical interface of the application using pre-conceived sets of assets. You'll often hear about dark and light themes, but the practice goes well beyond that with web applications like MonkeyType providing more than a hundred themes with features such as custom gradients, sounds and shapes, to name a few.

Learn more on Wikipedia

Is theming a good idea?

And should I care?

Yes, and yes. Adding different themes comes with a lot of advantages. It's pretty much all about letting the user enjoy your application however they prefer. For example, matching the theme to the working environment; a user in a dim room might prefer a darker theme to reduce eye strain whereas a user in a bright place might have a better time reading on a lighter background. Pushing the reasoning further, adding themes can be a way to enhance the accessibility of your application!

Google on dark themes

Accessibility? What about it?

Oh my god! He used the a-word!

Let's get this right: Adding themes to your application won't make it accessible. It might help... but that's about it. Colors are only a small part of accessibility. Also, adding a theme to fix criterions WCAG-1.4.3 or RGAA-3.2 is, out of all the possible fixes for these, the least user-friendly and sustainable.

That being said, for an already somewhat accessible application, providing additional themes might be a great way to help color-blind users who might not be aware of or used to assistive technologies.

But it's haaaaaaard...!

Plus, I don't have time for this.

It's not that hard. It relies heavily on the introduction of Design Tokens using custom properties. And all of it is completely native to CSS, and well-supported to boot! Basically, you declare variables and change their content using Cascade (you know... the thing in Cascading Style Sheet) and data attributes.

How Proton uses Design Tokens

Wait... Does that mean you can...

Yes.

Being solely CSS based, it means you can use any CSS feature as part of your themes. You are no longer limited to changing colors and shapes, you can (not saying you should... but you can) let your imagination run wild by changing layouts, pseudo-selectors and pseudo-classes, animations...

See it in action

<code data-theme="dark">...</code>

            

<code data-theme="light">...</code>

            

And...

Yes.

Given that the current theme is defined using a data attribute; and that data attributes can be used on any HTML element, you actually can set the theme of pretty much any part of you application completely independently. Particularly useful for design systems documentation or technical demonstrations!