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

susnux · susnux · commit e911a3ec427d · 2023-02-01T11:51:58.000+01:00
Signed-off-by: Ferdinand Thiessen &lt;rpm@fthiessen.de&gt;
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], [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) { ?>

Original file line number	Diff line number	Diff line change
`@@ -370,7 +370,7 @@ public function getThemeStylesheet(string $themeId, bool $plain = false, bool $w`
`370`	`370`	`} else {`
`371`	`371`	`// If not set, we'll rely on the body class`
`372`	`372`	`$compiler = new Compiler();`
`373`		`- $compiledCss = $compiler->compileString("[data-theme-$themeId] { $variables $customCss }");`
	`373`	`+ $compiledCss = $compiler->compileString(":root[data-theme-$themeId], [data-theme-$themeId] { $variables $customCss }");`
`374`	`374`	`$css = $compiledCss->getCss();;`
`375`	`375`	`}`
`376`	`376`