Skip to content
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

Scoping issue when overriding CSS variables for user-themes #36303

Open
mspae opened this issue Jan 23, 2023 · 1 comment
Open

Scoping issue when overriding CSS variables for user-themes #36303

mspae opened this issue Jan 23, 2023 · 1 comment
Labels
0. Needs triage Pending check for reproducibility or if it fits our roadmap 1. to develop Accepted and waiting to be taken care of enhancement feature: theming

Comments

@mspae
Copy link

mspae commented Jan 23, 2023

To prevent confusion, here a note on the nomenclature I use:
"user theme" → theme enabled by the individual user in their personal settings
"nextcloud theme" → instance-wide design customization which is enabled by the administrator

TL;DR I propose changing the element the user theme data attributes are set to the root html element to solve scoping issues.

I'm developing a nextcloud theme. It should work with the inbuilt user themes (light, dark, light-highcontrast, dark-highcontrast).

In order to do this I am using a SASS build-process to reduce the amount of duplicate code and still catch all the possible edge-cases. (personal user account settings vs. inbuilt browser settings/media queries).

Example SASS mixin for theming:

@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    body:not([data-theme-light], [data-theme-light-hightcontrast]) {
      // browser says this is dark mode, nextcloud user settings do not disagree
      @content;
    }
  }
  body[data-theme-dark],
  body[data-theme-dark-highcontrast] {
    // nextcloud user settings say this should be dark mode
    @content;
  }
}

As you can see I'm using the body attribute selector to catch the user theme-preference (e.g. body[data-theme-dark]). This is sub optimal since this limits the customization to elements within the body scope. (For example the html tag has a background color, this is visible when the browser window is resized).

I propose the theme attributes are set on the html to fix this problem.

The code which would need to be adjusted lies in https://github.com/nextcloud/server/blob/master/apps/theming/src/UserThemes.vue#L240

As I have no deeper knowledge of the nextcloud code base I cannot foresee which problems/conflicts might arise from such a change.

@mspae mspae added 0. Needs triage Pending check for reproducibility or if it fits our roadmap enhancement labels Jan 23, 2023
@susnux
Copy link
Contributor

susnux commented Feb 1, 2023

See: #36462

@joshtrichards joshtrichards added 1. to develop Accepted and waiting to be taken care of feature: theming labels Sep 4, 2023
@joshtrichards joshtrichards changed the title Theming: Scoping issue when overriding CSS variables for user-themes Scoping issue when overriding CSS variables for user-themes Sep 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
0. Needs triage Pending check for reproducibility or if it fits our roadmap 1. to develop Accepted and waiting to be taken care of enhancement feature: theming
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants