From e911a3ec427d1499057d4f1cffc2b8bfd2b7dd4e Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Tue, 31 Jan 2023 20:08:36 +0100 Subject: [PATCH] fix(theming): Theme specific variables must be set on the root node Signed-off-by: Ferdinand Thiessen --- apps/theming/lib/Controller/ThemingController.php | 2 +- apps/theming/src/UserThemes.vue | 6 +++--- core/templates/layout.user.php | 9 +++++---- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php index a323bac180ba9..0297289989f50 100644 --- 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 index 0f72e95d9a8fe..9f81863f307f1 100644 --- 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 index 951f0dabe21fc..09d1860b674c2 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -13,7 +13,10 @@ } ?> - + data-themes=> @@ -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) { ?>