Mastodon: Use CSS variables for skinning

[scottkellum]

Use CSS variables where possible instead of Sass variables as they can be easily overwritten in one place via the new CSS override section in the admin app. This will allow admins to change the whole color scheme of the instance with just a few lines of CSS and reduce errors from popping up as the CSS changes in the future.

This will also solve #8056 as the variables will be in the CSS and can be manipulated directly from the custom CSS area in admin.

---

• [x] I searched or browsed the repo’s other issues to ensure this is not a duplicate.

[trwnh]

For what it's worth, I have a "Mastodon Flat CSS" theme that uses CSS variables. If someone can help me adapt it from a userstyle to vanilla Mastodon, especially with actually implementing the UI (color picker, maybe?) then this would probably be really cool for admins and maybe also users, as a more flexible theming and appearance framework. I don't have enough experience with React to do it myself, but I've probably gained enough experience with the output CSS to be able to greatly simplify the CSS code. It's pretty messy right now, and many selectors are way too specific and redundant.

[scottkellum]

@trwnh that sounds rad! I’d imagine there may be some issues untangling a userstyle and I was starting to dig into the Mastodon Sass files looking for easy wins and it looks like there is some logic attached to the variables that make this a non-trivial task. That said it’s probably not a monumental task either and unfortunately I don’t have a ton of time to dig in.

[trwnh]

@scottkellum My personal vision for such a feature would be to make CSS variable palettes definable in a page like Settings > Appearance. I'd feel comfortable refactoring the base theme, but not comfortable at all with building the frontend/backend stuff for actually managing it.