Color Options

[hubbcaps]

• [ ] This is a bug report.
• [x] Streamlink is working correctly on my system without using the Twitch GUI.
• [x] I tried solving my issue by reading the project's wiki first.
• [x] I used the search function to find already opened/closed issues or pull requests.

Hello,

I'm wondering if we could get an option to chose our own color themes? I like the dark mode, however I'd like to get it a little more in line with the rest of my system.

As you can see at the bottom of the above image it sticks out quite a bit.

I can see in the code it appears to be baked in during the build, is there any possibility we could get it to read another file for it's color options after build? I'm using the AUR and not building straight from source, so editing it before build would be cumbersome, especially if I were to flip around my theme to something else.

[bastimeyer]

I've talked about this in several threads now over the last couple of months, but let's make a dedicated feature request out of this thread...

Let me just quickly sum up the current situation and let's go a bit into detail:

---

The theming system is fairly complex and is written entirely in LessCSS. This makes it impossible to have user-customizable colors without using a Less compiler in the application itself that rebuilds the stylesheets every time the user wants to change a color.

See how the theming system is implemented:

• Example usage:
  The goal is to just use a single theme block without rewriting or defining multiple selectors...
  https://github.com/streamlink/streamlink-twitch-gui/blob/v1.1.1/src/styles/main.less#L94-L106
• Themes:
  https://github.com/streamlink/streamlink-twitch-gui/blob/v1.1.1/src/styles/themes/default.less
  https://github.com/streamlink/streamlink-twitch-gui/blob/v1.1.1/src/styles/themes/dark.less
• Theme mixins:
  https://github.com/streamlink/streamlink-twitch-gui/blob/v1.1.1/src/styles/themes.less
• Theme loader (reads from a json file, then builds a less file that imports the themes and defines the THEMES name array):
  https://github.com/streamlink/streamlink-twitch-gui/blob/v1.1.1/src/web_loaders/themes-loader.js
• Switching themes is being done by simply switching class names on the DocumentElement:
  https://github.com/streamlink/streamlink-twitch-gui/blob/v1.1.1/src/app/components/ApplicationComponent.js#L36-L50

---

Having user-customizable themes means that certain css properties need to be changed during runtime. This technique requires CSS variables, which have only just been implemented in one of the recent Chromium versions. Thus, custom themes were not possible until recently when the application upgraded to the latest NW.js version (#275).

So, in order to have dynamic themes, the theming system needs to be rewritten based on CSS variables.

There's one issue: The themes are heavily making use of transparent text and background colors. Chromium doesn't like semi-transparent text colors on Windows, though (thanks to the great text rendering on Windows). This is the reason why ffc64ad499bd1f04d00fbf5150d319459919ec3e has been added recently. This translates transparent text colors to non-transparent text colors based on a background color. I'm not sure if something similar can be added in pure CSS (maybe split color variables component wise and use color: rgb(calc(var(--color-a-r) - var(--color-b-r)), calc(var(--color-a-g) - var(--color-b-g)), calc(var(--color-a-b) - var(--color-b-b))) ?!?!).

---

I know that there are specific system colors available in CSS, so a "system" theme could be added in the meantime, but these system colors are not reliable and would be quite messy on different systems, and I don't want to add something like that.

Btw, if you're using Arch, there's also the streamlink-twitch-gui-git AUR package which lets you add custom patches before building the package. This way you can add your own theme or customize the "dark" one.

[hubbcaps]

Thank you for the detailed breakdown of the system and making this a feature request, I appreciate it.

I'll touch the git on in the meantime and do some customization there.

I'll also begin looking into what you've laid out and see if I can't contribute something to move forward on that system.