diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index d95b15527..e1a1ff1ca 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -4,7 +4,7 @@ import * as Misc from "../utils/misc";
import * as Arrays from "../utils/arrays";
import * as JSONData from "../utils/json-data";
import { isColorDark, isColorLight } from "../utils/colors";
-import Config, { setAutoSwitchTheme } from "../config";
+import Config, { setAutoSwitchTheme, setCustomBackground } from "../config";
import * as BackgroundFilter from "../elements/custom-background-filter";
import * as ConfigEvent from "../observables/config-event";
import * as DB from "../db";
@@ -345,7 +345,7 @@ function applyCustomBackground(): void {
$("#words").addClass("noErrorBorder");
$("#resultWordsHistory").addClass("noErrorBorder");
$(".customBackground").html(
- `
`
+ `
`
);
BackgroundFilter.apply();
applyCustomBackgroundSize();
@@ -425,3 +425,10 @@ ConfigEvent.subscribe(async (eventKey, eventValue, nosave) => {
await set(Config.themeDark, true);
}
});
+
+window.addEventListener("customBackgroundFailed", () => {
+ Notifications.add(
+ "The custom background cannot be loaded and will be removed from your configuration."
+ );
+ setCustomBackground("");
+});
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index f91ca8827..b8495c7c2 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -950,6 +950,9 @@ export async function update(groupUpdate = true): Promise {
".pageSettings .section[data-config-name='customBackgroundFilter']"
).addClass("hidden");
}
+ $(
+ ".pageSettings .section[data-config-name='customBackgroundSize'] input"
+ ).val(Config.customBackground);
if (isAuthenticated()) {
showAccountSection();