diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/theme.models.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/theme.models.ts
index 792f01f0dd..a20e6aadeb 100644
--- a/src/Umbraco.Web.UI.Client/libs/extensions-registry/theme.models.ts
+++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/theme.models.ts
@@ -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;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/themes/manifests.ts
index dc5136d57a..be1f5ad5f7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/themes/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/themes/manifests.ts
@@ -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,
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts
index 7c84f4d3a8..5e246bc46e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts
@@ -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', '');