design.estate/dees-document
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(page): Use theme variables for page styling, make pagecontainer background theme-aware, and use accent background for footer separator

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-11 02:38:18 +00:00
parent 3be8de28c6
commit 0e30684c2f
6 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
ts_web/elements/page.ts
View File

@@ -132,17 +132,14 @@ export class DePage extends DeesElement {
];
public render(): TemplateResult {
const theme = this.documentSettings.theme;
return html`
<style>
:host {
--theme-color-primary-fg: ${this.documentSettings.theme
?.colorPrimaryForeground};
--theme-color-primary-bg: ${this.documentSettings.theme
?.colorPrimaryBackground};
--theme-color-accent-fg: ${this.documentSettings.theme
?.colorAccentForeground};
--theme-color-accent-bg: ${this.documentSettings.theme
?.colorAccentBackground};
${theme?.colorPrimaryForeground ? `--theme-color-primary-fg: ${theme.colorPrimaryForeground};` : ''}
${theme?.colorPrimaryBackground ? `--theme-color-primary-bg: ${theme.colorPrimaryBackground};` : ''}
${theme?.colorAccentForeground ? `--theme-color-accent-fg: ${theme.colorAccentForeground};` : ''}
${theme?.colorAccentBackground ? `--theme-color-accent-bg: ${theme.colorAccentBackground};` : ''}
}
.page {
@@ -151,15 +148,11 @@ export class DePage extends DeesElement {
}
.page:not(.page--first) {
background-image: ${this.documentSettings.theme?.pageBackground ??
"none"};
background-image: ${theme?.pageBackground ?? "none"};
}
.page.page--first {
background-image: ${this.documentSettings.theme
?.coverPageBackground ??
this.documentSettings.theme?.pageBackground ??
"none"};
background-image: ${theme?.coverPageBackground ?? theme?.pageBackground ?? "none"};
}
</style>
<div id="scaleWrapper">