style: add theme css variables setup#2659
Conversation
|
I think our end goal is to entirely remove the theme-map variables and migrate to using material's defined variables where possible, which should remove most of the need for light-dark/themify calls. Also this is what the site looks like when loading this PR |
lllarsen
left a comment
lllarsen
left a comment
There was a problem hiding this comment.
We will probably want to change all users whos theme is light to user preferences as well as any user who got opted in to light theme will be stuck with light theme right? Maybe @williamh890 will have more wisdom here.
| color-scheme: light dark; | ||
| background-color: light-dark($asf-background-white, darken($asf-dark-primary, 5%)); |
There was a problem hiding this comment.
Remove this and just keep themify
We can start with just having new people default to system and see how it works. We can certainly go through and update the database to be system preferences, but that's not something we have done before. |
|
Also not something that can be done in a vertex pr |
This sounds like a reasonable option - one thing to note is it will cause potentially unintuitive behaviour where a logged in users theme will change depending on their logged in state... But, we can go in and change that if we get any complaints. |
4 participants
Summary
Adds the initial CSS variables setup for theme switching and validates the approach with a small proof of concept in the header. Theme variables are now generated globally from the existing $themes map, and .breadcrumb-list was updated to consume --asf-background-white so the value changes when switching between light and dark theme.
Validated locally by toggling theme in Preferences and confirming .breadcrumb-list updates through the computed CSS variable value.