From 74b2d4dc2e3232d237d0e5bc895ce3ce372ff12d Mon Sep 17 00:00:00 2001
From: doodlewind <7312949+doodlewind@users.noreply.github.com>
Date: Thu, 15 May 2025 03:41:08 +0000
Subject: [PATCH] fix(editor): use persisted state for presentation mode
 background config (#12293)

Fixed this issue (black background is on but the toggle state is not synced):

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lEGcysB4lFTEbCwZ8jMv/bb4885c1-eccc-45fa-ac19-f868b9ea055a.png)

Issue source: https://linear.app/affine-design/issue/BS-3448

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Bug Fixes**
  - The background color now defaults to non-black for new users or when no previous setting exists.
  - Improved reliability when restoring user settings.

- **New Features**
  - Changes to the background color setting are now saved and persist between sessions.

- **Style**
  - Enhanced toggle switch responsiveness for background and toolbar settings.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/present/navigator-setting-button.ts     | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/blocksuite/affine/blocks/frame/src/present/navigator-setting-button.ts b/blocksuite/affine/blocks/frame/src/present/navigator-setting-button.ts
index 0dddd3161..16ed99103 100644
--- a/blocksuite/affine/blocks/frame/src/present/navigator-setting-button.ts
+++ b/blocksuite/affine/blocks/frame/src/present/navigator-setting-button.ts
@@ -77,18 +77,16 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
     slots.navigatorSettingUpdated.next({
       blackBackground: this.blackBackground,
     });
+    this.edgeless.std
+      .get(EditPropsStore)
+      .setStorage('presentBlackBackground', checked);
   };
 
   private _tryRestoreSettings() {
     const blackBackground = this.edgeless.std
       .get(EditPropsStore)
       .getStorage('presentBlackBackground');
-    this.blackBackground = blackBackground ?? true;
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this._tryRestoreSettings();
+    this.blackBackground = blackBackground ?? false;
   }
 
   override disconnectedCallback(): void {
@@ -97,6 +95,7 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
   }
 
   override firstUpdated() {
+    if (this.edgeless) this._tryRestoreSettings();
     this._navigatorSettingPopper = createButtonPopper({
       reference: this._navigatorSettingButton,
       popperElement: this._navigatorSettingMenu,
@@ -133,7 +132,7 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
           <div class="text">Black background</div>
 
           <toggle-switch
-            .subscribe=${this.blackBackground}
+            .on=${this.blackBackground}
             .onChange=${this._onBlackBackgroundChange}
           >
           </toggle-switch>
@@ -143,7 +142,7 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
           <div class="text">Hide toolbar</div>
 
           <toggle-switch
-            .subscribe=${this.hideToolbar}
+            .on=${this.hideToolbar}
             .onChange=${(checked: boolean) => {
               this.onHideToolbarChange && this.onHideToolbarChange(checked);
             }}
@@ -173,7 +172,7 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
   private accessor _navigatorSettingMenu!: HTMLElement;
 
   @state()
-  accessor blackBackground = true;
+  accessor blackBackground = false;
 
   @property({ attribute: false })
   accessor edgeless!: BlockComponent;