[Enhancement] CSS: Overhaul the way theming is done

[syeopite]

Is your enhancement request related to a problem? Please describe.

With the way theming is currently done in the CSS style logic has to be duplicated around four times in different parts of the stylesheet.

This is a maintaince and development nightmare.

Describe the solution you'd like

A better way of theming that doesn't require such a duplication.

The best way to go about it would be to probably use a CSS pre-processor as then we won't have to use any of the new CSS features and can continue to support old browsers.

Describe alternatives you've considered

Alternatively if we were to use new CSS features like variables we could implement something akin to this

https://css-tricks.com/a-dry-approach-to-color-themes-in-css/

Though this solution breaks the darkreader extension

Additional context

[SamantazFox]

Related: #4113 (comment)

The best way to go about it would be to probably use a CSS pre-processor as then we won't have to use any of the new CSS features and can continue to support old browsers.

I've though about that option, but I'm hesitant to require yet another development tool.

Alternatively if we were to use new CSS features like variables we could implement something akin to this [...]

This is probably the best option imo. We're already planning on dropping IE support with VideoJS 8, so no browser prevents us from using --var anymore!

[rockerBOO]

Had some time to poke at this. Swapped out the colors and moved most of the positioning values to em/rem. Tried to keep it looking relatively the same as before.

• Kept all the pure and made some changes from <p> to <div> or <h3> <h4> where appropriate.
• Updated to the system fonts stack (OS native fonts). Fonts were being set to sans-serif by the pure framework and the body value was not being used.
• Removed some style="" attributes so it will be style-able.
• Made a stylelint config to help in updating the code. For my personal approach but I could make it available too.

:root {
  --sans-serif: ui-rounded, "Hiragino Maru Gothic ProN", "Quicksand",
    "Comfortaa", "Manjari", "Arial Rounded MT", "Arial Rounded MT Bold",
    "Calibri", source-sans-pro, sans-serif;
  --monospace: font-family: ui-monospace, "Cascadia Code", "Source Code Pro",
    "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
}

html,
body {
  font-family: var(--sans-serif);
  background-color: var(--bg-color);
  color: var(--fg-color);
}

.dark-theme {
  --fg-color: #f0f0f0;
  --bg-color: #0d0d0d;
  --accent-color: #c6c6c6;
  --accent-bg-color: #0197ff;
  --secondary-color: #b3b3b3;
  --secondary-bg-color: #0d0d0d;
}

.light-theme {
  --fg-color: black;
  --bg-color: #eee;
  --accent-color: #3a3a3a;
  --accent-bg-color: #008bec;
  --secondary-color: #7c7c7c;
  --secondary-bg-color: #eee;
}

@media (prefers-color-scheme: light) {
  .no-theme {
    --fg-color: black;
    --bg-color: #eee;
    --accent-color: #3a3a3a;
    --accent-bg-color: #008bec;
    --secondary-color: #7c7c7c;
    --secondary-bg-color: #eee;
  }
}

@media (prefers-color-scheme: dark) {
  .no-theme {
    --fg-color: #f0f0f0;
    --bg-color: #0d0d0d;
    --accent-color: #c6c6c6;
    --accent-bg-color: #001f31;
    --secondary-color: #b3b3b3;
    --secondary-bg-color: #0d0d0d;
  }
}

Still needs some color massaging but seems to be OK for the most part.

Let me know if there are any questions or feedback on this approach.

[syeopite]

My only concern with using CSS variables directly is that we'll still have to duplicate the definations at least twice for each theme

[rockerBOO]

For the duplicates we could do this approach.

• Default to dark colors
• Alternate light colors
• Prefers light (default to light)
• Selects light-theme
• Selects dark-theme

:root {
  --fg-color-dark: #f0f0f0;
  --bg-color-dark: #0d0d0d;
  --accent-color-dark: #c6c6c6;
  --accent-bg-color-dark: #0197ff;
  --secondary-color-dark: #b3b3b3;
  --secondary-bg-color-dark: #0d0d0d;

  /* light theme colors */
  --fg-color-light: black;
  --bg-color-light: #eee;
  --accent-color-light: #3a3a3a;
  --accent-bg-color-light: #008bec;
  --secondary-color-light: #7c7c7c;
  --secondary-bg-color-light: #eee;

  --fg-color: var(--fg-color-dark);
  --bg-color: var(--bg-color-dark);
  --accent-color: var(--accent-color-dark);
  --accent-bg-color: var(--accent-bg-color-dark);
  --secondary-color: var(--secondary-color-dark);
  --secondary-bg-color: var(--secondary-bg-color-dark);
}

@media (prefers-color-scheme: light) {
  :root {
    --fg-color: var(--fg-color-light);
    --bg-color: var(--bg-color-light);
    --accent-color: var(--accent-color-light);
    --accent-bg-color: var(--accent-bg-color-light);
    --secondary-color: var(--secondary-color-light);
    --secondary-bg-color: var(--secondary-bg-color-light);
  }
}

.light-theme {
  --fg-color: var(--fg-color-light);
  --bg-color: var(--bg-color-light);
  --accent-color: var(--accent-color-light);
  --accent-bg-color: var(--accent-bg-color-light);
  --secondary-color: var(--secondary-color-light);
  --secondary-bg-color: var(--secondary-bg-color-light);
}

.dark-theme {
  --fg-color: var(--fg-color-dark);
  --bg-color: var(--bg-color-dark);
  --accent-color: var(--accent-color-dark);
  --accent-bg-color: var(--accent-bg-color-dark);
  --secondary-color: var(--secondary-color-dark);
  --secondary-bg-color: var(--secondary-bg-color-dark);
}

[syeopite]

Isn't that still the same problem? Sure the colors are now defined only once but the usage of those colors for each theme still needs to be applied twice.

This is the only truly DRY approach I've seen to theming in pure CSS

https://css-tricks.com/a-dry-approach-to-color-themes-in-css

But again this does break the Dark Reader extension... I'm not sure about the overlap of users of Invidious and Dark Reader but I am hesitant on introducing CSS "hacks" that'll make it harder for users to use user themes

[rockerBOO]

In that article it might produce a more DRY result but they also mention it as hacky and not clear. I think the tradeoffs here for clarity might be more important as it lowers complexity for individuals creating modifications to the themes. These showcase the colors but we really only use 3 colors. The additional colors allow for more expression but I do not think we will need significantly more colors. The other variables do not have as much complexity, like fonts, spacing.

Ultimately I am fine with whichever solution is decided.

I use the Dark Reader extension and my current styling improvements work fine with it currently.

Example of how it looks right now.

[syeopite]

I've recently been made aware of the CSS light-dark() function which will allow a DRY approach in native CSS without any "hacks".

The problem is the feature has only recently gained wide baseline support so this really isn't a solution if we wish to continue to support older browsers.