-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(theming): Theme specific variables must be set on the root node #36462
Conversation
@susnux can you explain what the NcSelect is doing differently that makes our variables behave differently in body than html? 🤔 |
As explained above it uses variables defined on the root, that evaluate to another variable, see e.g. here.
|
The variables from the theme should have precedence over the default ones, because their specificity score should be higher (because of the data tag). Edit: Well that's not the case, the specificity of |
No, because that would prevent us from applying themes to other areas of the page (e.g., the Viewer is always in dark mode, whatever theme is currently active) |
c5e4883
to
b2c869a
Compare
Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
b2c869a
to
e911a3e
Compare
More like |
My spider senses are tingling. We should be very careful with theming now. https://github.com/nextcloud/nextcloud-vue/blob/093ce19071b66b076b975255810f6f1642eaf855/src/components/NcSelect/NcSelect.vue#L907 |
It can be fixed on the |
Some of the variables are for styling the options list, which is not a child of the |
Well, locally scoped variables are much cleaner than everyone putting their variables in the root tbh :/ |
I think this is still a thing, maybe not that important anymore but still something we should look into
BTW this is one thing we lately have problems with because people think that "scoped" rules are 2-way scoped but that is not the case they still share the class selector meaning two components called |
I think we can close this |
Resolves: Black table on light theme text#3369Summary
Currently if you use a css variable which links to an other css variable, like
--color-main-background
and a theme is enabled, the theme is not used for the variable. See linked issue (same e.g. on forms, see nextcloud/forms#1471 (review)).The problem is the css variable evaluation order, e.g. consider the browser requests dark color theme but the user selected the bright nextcloud theme, then:
--color-main-background
for dark color theme (as requested by the browser)--table-color-background
to be the same as--color-main-background
--color-main-background
to match the theme (becausedata-theme-light
is set on the body tag)--table-color-background
which evaluates toHTML-Tag
::--color-main-background
and in the context it is set to dark instead of bright.So the solution is to set
data-theme-light
on the HTML tag rather than the body tag.Screenshots
System uses dark color theme, but nextcloud is configured to use the bright theme.
You can see the
NcSelect
has the wrong background color:Checklist