yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enable use of CSS to directly set style sheet path

Browse Source
This commit is contained in:
Niels Lyngsø
2023-02-01 14:15:11 +01:00
parent e7ef351f17
commit e9e1373a73
3 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/libs/extensions-registry/theme.models.ts
View File

@@ -4,4 +4,5 @@ import type { ManifestWithLoader } from "./models";
// TODO: make or find type for JS Module with default export: Would be nice to support css file directly.
export interface ManifestTheme extends ManifestWithLoader<any> {
type: 'theme';
css?: string;
}

4
src/Umbraco.Web.UI.Client/src/backoffice/themes/manifests.ts
View File

@@ -11,14 +11,14 @@ export const themes: Array<ManifestTheme> = [
type: 'theme',
alias: 'umb-dark-theme',
name: 'Dark',
loader: () => new Promise((resolve) => resolve('src/backoffice/themes/themes/dark.theme.css')),
css: 'src/backoffice/themes/themes/dark.theme.css',
weight: 200,
},
{
type: 'theme',
alias: 'umb-high-contrast-theme',
name: 'High contrast',
loader: () => new Promise((resolve) => resolve('src/backoffice/themes/themes/high-contrast.theme.css')),
css: 'src/backoffice/themes/themes/high-contrast.theme.css',
weight: 100,
},
];

31
src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts
View File

@@ -16,17 +16,13 @@ export class UmbThemeContext {
private themeSubscription?: UmbObserverController;
#styleElement: HTMLLinkElement | null = null;
#styleElement: HTMLLinkElement| HTMLStyleElement | null = null;
constructor(host: UmbControllerHostInterface) {
this._host = host;
new UmbContextProviderController(host, UMB_THEME_CONTEXT_TOKEN, this);
this.#styleElement = document.createElement('link');
this.#styleElement.setAttribute('rel', 'stylesheet');
document.head.appendChild(this.#styleElement);
const storedTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
if (storedTheme) {
this.setThemeByAlias(storedTheme);
@@ -45,9 +41,28 @@ export class UmbThemeContext {
.extensionsOfType('theme')
.pipe(map((extensions) => extensions.filter((extension) => extension.alias === themeAlias))),
async (themes) => {
if (themes.length > 0 && themes[0].loader) {
const path = await themes[0].loader();
this.#styleElement?.setAttribute('href', path);
this.#styleElement?.remove();
if (themes.length > 0) {
if(themes[0].loader) {
const styleEl = this.#styleElement = document.createElement('style');
styleEl.setAttribute('type', 'text/css');
document.head.appendChild(styleEl);
const result = await themes[0].loader();
// Checking that this is still our styleElement, it has not been replaced with another theme in between.
if(styleEl === this.#styleElement) {
(styleEl as any).appendChild(document.createTextNode(result));
}
} else if (themes[0].css) {
this.#styleElement = document.createElement('link');
this.#styleElement.setAttribute('rel', 'stylesheet');
this.#styleElement.setAttribute('href', themes[0].css);
document.head.appendChild(this.#styleElement);
}
} else {
localStorage.removeItem(LOCAL_STORAGE_KEY);
this.#styleElement?.setAttribute('href', '');