fix: custom background filters not applied on laod

Author: Miodec

frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx

@@ -3,44 +3,10 @@ import { JSXElement } from "solid-js";
 import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
-import { qs } from "../../../../utils/dom";
+import { applyCustomBackgroundFilters } from "../../../../controllers/theme-controller";
 import { Slider } from "../../../common/Slider";
 import { Setting } from "../Setting";
 
-export function applyCustomBackgroundFilters(
-  values?: [number, number, number, number],
-): void {
-  const valuesToApply = values ?? getConfig.customBackgroundFilter;
-
-  let filterCSS = "";
-  //blur
-  if (valuesToApply[0] !== 0) {
-    filterCSS += `blur(${valuesToApply[0]}rem) `;
-  }
-  //brightness
-  if (valuesToApply[1] !== 1) {
-    filterCSS += `brightness(${valuesToApply[1]}) `;
-  }
-  //saturate
-  if (valuesToApply[2] !== 1) {
-    filterCSS += `saturate(${valuesToApply[2]}) `;
-  }
-  //opacity
-  if (valuesToApply[3] !== 1) {
-    filterCSS += `opacity(${valuesToApply[3]}) `;
-  }
-
-  const css = {
-    filter: filterCSS,
-    width: `calc(100% + ${valuesToApply[0] * 8}rem)`,
-    height: `calc(100% + ${valuesToApply[0] * 8}rem)`,
-    transform: `scale(${1 + valuesToApply[0] / 100})`,
-    top: `-${valuesToApply[0] * 4}rem`,
-    position: "absolute",
-  };
-  qs(".customBackground img")?.setStyle(css);
-}
-
 export function CustomBackgroundFilters(): JSXElement {
   let refBlur: HTMLInputElement | undefined = undefined;
   let refBrightness: HTMLInputElement | undefined = undefined;

frontend/src/ts/controllers/theme-controller.ts

@@ -1,7 +1,7 @@
 import * as Arrays from "../utils/arrays";
 import { isColorDark, isColorLight } from "../utils/colors";
 
-import { Config } from "../config/store";
+import { Config, getConfig } from "../config/store";
 import { setConfig } from "../config/setters";
 import { configEvent } from "../events/config";
 import * as CustomThemes from "../collections/custom-themes";
@@ -302,10 +302,45 @@ export async function applyCustomBackground(): Promise<void> {
 
     container?.replaceChildren(img);
 
+    applyCustomBackgroundFilters();
     applyCustomBackgroundSize();
   }
 }
 
+export function applyCustomBackgroundFilters(
+  values?: [number, number, number, number],
+): void {
+  const valuesToApply = values ?? getConfig.customBackgroundFilter;
+
+  let filterCSS = "";
+  //blur
+  if (valuesToApply[0] !== 0) {
+    filterCSS += `blur(${valuesToApply[0]}rem) `;
+  }
+  //brightness
+  if (valuesToApply[1] !== 1) {
+    filterCSS += `brightness(${valuesToApply[1]}) `;
+  }
+  //saturate
+  if (valuesToApply[2] !== 1) {
+    filterCSS += `saturate(${valuesToApply[2]}) `;
+  }
+  //opacity
+  if (valuesToApply[3] !== 1) {
+    filterCSS += `opacity(${valuesToApply[3]}) `;
+  }
+
+  const css = {
+    filter: filterCSS,
+    width: `calc(100% + ${valuesToApply[0] * 8}rem)`,
+    height: `calc(100% + ${valuesToApply[0] * 8}rem)`,
+    transform: `scale(${1 + valuesToApply[0] / 100})`,
+    top: `-${valuesToApply[0] * 4}rem`,
+    position: "absolute",
+  };
+  qs(".customBackground img")?.setStyle(css);
+}
+
 window
   .matchMedia?.("(prefers-color-scheme: dark)")
   ?.addEventListener?.("change", (event) => {
@@ -328,6 +363,7 @@ configEvent.subscribe(async ({ key, newValue, nosave }) => {
 
     await clearRandom();
     await clearPreview(false);
+
     if (Config.autoSwitchTheme) {
       if (prefersColorSchemeDark()) {
         await set(Config.themeDark, true);