Save bg fill state to storage

src/js/page/main-controller.js

@@ -30,8 +30,8 @@ export default class MainController {
     this._settingsUi = new Settings();
     this._mainMenuUi = new MainMenu();
     this._toastsUi = new Toasts();
+    this._bgFillUi = new BgFillButton();
 
-    const bgFillUi = new BgFillButton();
     const dropUi = new FileDrop();
     const preloaderUi = new Preloader();
     const changelogUi = new Changelog(self.version);
@@ -47,6 +47,9 @@ export default class MainController {
     this._mainMenuUi.emitter.on('svgDataLoad', (event) =>
       this._onInputChange(event),
     );
+    this._bgFillUi.emitter.on('change', (isBgDark) =>
+      this._onBgFillStateChange(isBgDark),
+    );
     dropUi.emitter.on('svgDataLoad', (event) => this._onInputChange(event));
     this._mainMenuUi.emitter.on('error', ({ error }) =>
       this._handleError(error),
@@ -102,7 +105,7 @@ export default class MainController {
       );
 
       minorActionContainer.append(
-        bgFillUi.container,
+        this._bgFillUi.container,
         this._copyButtonUi.container,
       );
       actionContainer.append(this._downloadButtonUi.container);
@@ -209,6 +212,12 @@ export default class MainController {
     this._compressSvg(settings);
   }
 
+  _onBgFillStateChange(isBgDark) {
+    const settings = this._settingsUi.getSettings();
+    settings.bgFillState = isBgDark;
+    this._saveSettings(settings);
+  }
+
   async _onSettingsReset(oldSettings) {
     const toast = this._toastsUi.show('Settings reset', {
       buttons: ['undo', 'dismiss'],
@@ -251,7 +260,10 @@ export default class MainController {
 
   async _loadSettings() {
     const settings = await storage.get('settings');
-    if (settings) this._settingsUi.setSettings(settings);
+    if (settings) {
+      this._settingsUi.setSettings(settings);
+      this._bgFillUi.setBgFillState(settings.bgFillState || false);
+    }
   }
 
   _saveSettings(settings) {

src/js/page/ui/bg-fill-button.js

@@ -1,3 +1,4 @@
+import { createNanoEvents } from 'nanoevents';
 import FloatingActionButton from './floating-action-button.js';
 
 export default class BgFillButton extends FloatingActionButton {
@@ -12,15 +13,25 @@ export default class BgFillButton extends FloatingActionButton {
           '<path fill="currentColor" d="M21.143 9.667c-.733-1.392-1.914-3.05-3.617-4.753C14.549 1.936 12.048 1 10.741 1c-.414 0-.708.094-.86.246L8.52 2.606c-1.899-.236-3.42.106-4.294.983-.876.875-1.164 2.159-.792 3.523.492 1.806 2.305 4.049 5.905 5.375.038.323.157.638.405.885.588.588 1.535.586 2.121 0s.588-1.533.002-2.119a1.5 1.5 0 0 0-2.123-.001l-.17.256c-2.031-.765-3.395-1.828-4.232-2.9l3.879-3.875c.496 2.73 6.432 8.676 9.178 9.178l-7.115 7.107c-.234.153-2.798-.316-6.156-3.675-3.393-3.393-3.175-5.271-3.027-5.498L3.96 9.989C3.521 9.63 3.035 8.886 2.819 8.3L.685 10.431C.24 10.877 0 11.495 0 12.251c0 1.634 1.121 3.915 3.713 6.506C6.477 21.521 9.293 23 11.145 23c.648 0 1.18-.195 1.547-.562l8.086-8.078c.91.874-.778 3.538-.778 4.648a2 2 0 0 0 4-.001c0-3.184-1.425-6.81-2.857-9.34zM4.934 4.296c.527-.53 1.471-.791 2.656-.761L4.381 6.741c-.236-.978-.049-1.845.553-2.445zm9.292 4.079-.03-.029C12.904 7.054 10.393 3.99 11.1 3.283c.715-.715 3.488 1.521 5.062 3.096.862.862 2.088 2.247 2.937 3.458-1.717-1.074-3.491-1.469-4.873-1.462z"/>' +
         '</svg>',
     });
+    this.emitter = createNanoEvents();
   }
 
   onClick(event) {
     super.onClick(event);
 
     if (this.container.classList.contains('active')) {
+      this.emitter.emit('change', false);
       this.container.classList.remove('active');
       document.documentElement.classList.remove('bg-dark');
     } else {
+      this.emitter.emit('change', true);
+      this.container.classList.add('active');
+      document.documentElement.classList.add('bg-dark');
+    }
+  }
+
+  setBgFillState(isBgDark) {
+    if (isBgDark) {
       this.container.classList.add('active');
       document.documentElement.classList.add('bg-dark');
     }