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

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2023-01-31 20:08:36 +01:00
parent d7bd7639c2
commit e911a3ec42
3 changed files with 9 additions and 8 deletions

View File

@ -370,7 +370,7 @@ class ThemingController extends Controller {
} 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();;
}

View File

@ -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(','))
},
/**

View File

@ -13,7 +13,10 @@ $getUserAvatar = static function (int $size) use ($_): string {
}
?><!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 @@ p($theme->getTitle());
<?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) { ?>