Consider setup for theming

[aminalhazwani]

Since we are not too deep into the works might be worth it to talk more about theming, at least dark and light as we currently ship with Firefox. What's the strategy there, if we have any? If not let's set one 🙌

On a longer run we could even consider custom themes, but that's for the future 🙂

[lmorchard]

What's the strategy there, if we have any? If not let's set one

I don't think we have a strategy for theming. I think we need to define 1) what is a theme? and 2) what all is affected by a theme? That's more a design concern than a technical concern.

If a theme is just a set of global colors, then we might be able to support themes by replacing every color with a CSS variable. Then, we can define those variables in a single CSS theme file. We kind of do this already by using the Photon Colors package. We could add another layer of indirection to swap all those colors.

If a theme is more than colors (e.g. icon images), we might need more fine-grained tweaks per-component / per-theme. Maybe we can use CSS variables for icon URLs too?

[lmorchard]

We might also need to consider using a CSS pre-processor like Sass, if CSS variables can't do the job for us.

[aminalhazwani]

Thanks for your super quick feedback @lmorchard. What we could consider a theme is how a component looks on a light and on a dark background, similarly to how Firefox light and dark theme look on desktop.

This is just an example because the content might be obsolete but it should give you an idea https://firefoxux.github.io/people/aalhazwani/firefox-design-system/themes/index.html.

So for example a primary icon is Grey 90 a80 on a light background and Grey 10 a80 on a dark background.

[aminalhazwani]

This is another example side by side https://design.firefox.com/photon/visuals/iconography.html#color

[johngruen]

Decisions:

• we should track components in a spreadsheet and keep a list of which ones are modified by light and dark modes
• we should not accommodate all theme possibilities in the MVP
• we should create an abstraction layer defined by a root class and css variables that translate btween color mode and individual components

I'll close this and file individual bugs