Fix theming: Theme specific variables must be set on the root node #36461
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
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