element-hq / element-hq/element-web
fix theming by no longer hardcoding color values, and switching to new default font
- Dominant language
- TypeScript
- Stars
- 13.5k
- Forks
- 2.8k
- PR merge metrics
- PR metrics pending
Description
Hello everyone. Unfortunately, [theming](https://github.com/vector-im/element-web/blob/develop/docs/theming.md) is not really supported throughout the application, and that’s a pity. I still think it might be relatively easy to achieve this goal by using the already introduced — and in `config.json` supported — color variables throughout the application instead of hardcoded color values.
As encouraged by @t3chguy yesterday in another thread …
>> almost any new elements that are introduced use hardcoded color values instead of existing color variables
> Please report these specifically because this should not be happening.
… I would like to sum this issue up in an issue once more, after already having tried to tackle these problems last year in https://github.com/vector-im/element-web/issues/13082 and https://github.com/matrix-org/matrix-react-sdk/pull/4373.
Also, the custom themes are still using the `Nunito` font instead of `Inter`, which should also be adapted. See: https://github.com/vector-im/element-web/issues/15095
Besides, from a typographic perspective, I’m conviced that alongside the Inter font, `Roboto Mono` would be a superior choice for the monospaced texts and elements instead of `Inconsolata`. See: https://github.com/vector-im/element-web/issues/15077 as well as https://github.com/vector-im/element-web/issues/9807
From a quick check, it seems there’s `377` occurences of hardcoded color values in `matrix-react-sdk/res/css/` and `matrix-react-sdk/res/themes/` including legacy_light and legacy_dark, and there’s `191` without the legacy_themes.
```
~/git/matrix-react-sdk/res $ grep -r -i "#[A-F0-9]\+" themes/ | grep -c -v ': \$'
377
~/git/matrix-react-sdk/res $ grep -r -i "#[A-F0-9]\+" themes/light* themes/dark* | grep -c -v ': \$'
191
```
In the very most cases, these could simply be swapped with an already existing color variabel as shown the linked issue and pull request. All colors the Element app is using could simply be defined by the already existing color variables; maybe the dev team would want to introduce some more color variables (which then definitely need to be supported by `config.json`) for reasons, but there’s really not that many color definitions such an interface needs.
For example, Slack manages to achieve this kind of theming by only using `9` color definitions. That’s less color definitions than Element already supports via `config.json`, which is currently `15` … so please, properly support custom themes.
Contributor guide
Assessment
This issue has not been assessed yet.