fix(theming): Theme specific variables must be set on the root node

Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Feb 1, 2023 · b2c869a · b2c869a
1 parent d7bd763
commit b2c869a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php
@@ -370,7 +370,7 @@ public function getThemeStylesheet(string $themeId, bool $plain = false, bool $w
  } else {
  // If not set, we'll rely on the body class
  $compiler = new Compiler();
- $compiledCss = $compiler->compileString("[data-theme-$themeId] { $variables $customCss }");
+ $compiledCss = $compiler->compileString(":root[data-theme-$themeId] { $variables $customCss }");
  $css = $compiledCss->getCss();;
  }
 

diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue
@@ -242,13 +242,13 @@ export default {
  const enabledFontsIDs = this.fonts.filter(font => font.enabled === true).map(font => font.id)
 
  this.themes.forEach(theme => {
- document.body.toggleAttribute(`data-theme-${theme.id}`, theme.enabled)
+ document.documentElement.toggleAttribute(`data-theme-${theme.id}`, theme.enabled)
  })
  this.fonts.forEach(font => {
- document.body.toggleAttribute(`data-theme-${font.id}`, font.enabled)
+ document.documentElement.toggleAttribute(`data-theme-${font.id}`, font.enabled)
  })
 
- document.body.setAttribute('data-themes', [...enabledThemesIDs, ...enabledFontsIDs].join(','))
+ document.documentElement.setAttribute('data-themes', [...enabledThemesIDs, ...enabledFontsIDs].join(','))
  },
 
  /**

diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
@@ -13,7 +13,10 @@
 }
 
 ?><!DOCTYPE html>
-<html class="ng-csp" data-placeholder-focus="false" lang="<?php p($_['language']); ?>" data-locale="<?php p($_['locale']); ?>" translate="no" >
+<html class="ng-csp" data-placeholder-focus="false" lang="<?php p($_['language']); ?>" data-locale="<?php p($_['locale']); ?>" translate="no"
+<?php foreach ($_['enabledThemes'] as $themeId) {
+ p("data-theme-$themeId ");
+}?> data-themes=<?php p(join(',', $_['enabledThemes'])) ?>>
  <head data-user="<?php p($_['user_uid']); ?>" data-user-displayname="<?php p($_['user_displayname']); ?>" data-requesttoken="<?php p($_['requesttoken']); ?>">
  <meta charset="utf-8">
  <title>
@@ -42,9 +45,7 @@
  <?php emit_script_loading_tags($_); ?>
  <?php print_unescaped($_['headers']); ?>
  </head>
- <body id="<?php p($_['bodyid']);?>" <?php foreach ($_['enabledThemes'] as $themeId) {
- p("data-theme-$themeId ");
- }?> data-themes=<?php p(join(',', $_['enabledThemes'])) ?>>
+ <body id="<?php p($_['bodyid']);?>">
  <?php include 'layout.noscript.warning.php'; ?>
 
  <?php foreach ($_['initialStates'] as $app => $initialState) { ?>