From 7132e2f4ee080ece4103334e82cb5a880a58e386 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 28 Apr 2026 09:55:28 +0200
Subject: [PATCH] fix(themes): don't leak custom theme css after preview
 (@fehmer)

---
 .../__tests__/components/core/Theme.spec.tsx  |  4 +--
 frontend/src/ts/components/core/Theme.tsx     | 34 +++++++++++++------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/frontend/__tests__/components/core/Theme.spec.tsx b/frontend/__tests__/components/core/Theme.spec.tsx
index 5bd1a3b2ce29..35a2f5ec604e 100644
--- a/frontend/__tests__/components/core/Theme.spec.tsx
+++ b/frontend/__tests__/components/core/Theme.spec.tsx
@@ -85,13 +85,13 @@ describe("Theme component", () => {
   it("removes CSS when theme has no CSS", async () => {
     themeSignalMock.mockImplementation(() => ({ name: "light" }) as any);
     const { css } = renderComponent();
-    expect(css.getAttribute("href")).toBe("");
+    expect(css).not.toBeInTheDocument();
   });
 
   it("removes CSS when theme is custom", async () => {
     themeSignalMock.mockImplementation(() => ({ name: "custom" }) as any);
     const { css } = renderComponent();
-    expect(css.getAttribute("href")).toBe("");
+    expect(css).not.toBeInTheDocument();
   });
 
   it("handles CSS load error", () => {
diff --git a/frontend/src/ts/components/core/Theme.tsx b/frontend/src/ts/components/core/Theme.tsx
index c20457d05dd4..f04c85f6d287 100644
--- a/frontend/src/ts/components/core/Theme.tsx
+++ b/frontend/src/ts/components/core/Theme.tsx
@@ -1,5 +1,5 @@
 import { Link, Meta, MetaProvider, Style } from "@solidjs/meta";
-import { createEffect, createMemo, JSXElement } from "solid-js";
+import { createEffect, createMemo, JSXElement, Show } from "solid-js";
 
 import { themes } from "../../constants/themes";
 import { createDebouncedEffectOn } from "../../hooks/effects";
@@ -52,27 +52,39 @@ export function Theme(): JSXElement {
 }`);
   });
 
+  const isThemeWithCss = () => {
+    const name = getThemeName();
+    return name !== "custom" && (themes[name]?.hasCss ?? false);
+  };
+
   createEffect(() => {
     const name = getThemeName();
-    const hasCss = name !== "custom" && (themes[name].hasCss ?? false);
+    const hasCss = isThemeWithCss();
+
     console.debug(
       `Theme component ${hasCss ? "loading style" : "removing style"} for theme ${name}`,
     );
-    if (hasCss) showLoaderBar();
+    if (hasCss) {
+      showLoaderBar();
+    } else {
+      hideLoaderBar();
+    }
     linkEl()?.setAttribute("href", hasCss ? `/themes/${name}.css` : "");
   });
 
   return (
     <MetaProvider>
       <Style id="theme" ref={styleRef} />
-      <Link
-        ref={linkRef}
-        rel="stylesheet"
-        id="currentTheme"
-        data-name={getTheme().name}
-        onError={onError}
-        onLoad={onLoad}
-      />
+      <Show when={isThemeWithCss()}>
+        <Link
+          ref={linkRef}
+          rel="stylesheet"
+          id="currentTheme"
+          data-name={getTheme().name}
+          onError={onError}
+          onLoad={onLoad}
+        />
+      </Show>
       <Meta id="metaThemeColor" name="theme-color" content={getTheme().bg} />
       <FavIcon theme={getTheme()} />
     </MetaProvider>