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();