fix(editor): toggle switch style (#12436)

Closes: [BS-2852](https://linear.app/affine-design/issue/BS-2852/ui-bug：-toggle-的组件样式不一样了)

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

- **Style**
  - Updated toggle switch appearance with refined colors and spacing for a more polished look.

- **Bug Fixes**
  - Improved toggle switch functionality in settings menus to ensure correct state display and interaction.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/fragments/frame-panel/src/header/frames-setting-menu.ts

@@ -138,7 +138,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
         <div class="action-label">Fill Screen</div>
         <div class="toggle-button">
           <toggle-switch
-            .subscribe=${this.fillScreen}
+            .on=${this.fillScreen}
             .onChange=${this._onFillScreenChange}
           ></toggle-switch>
         </div>
@@ -153,7 +153,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
         <div class="action-label">Dark background</div>
         <div class="toggle-button">
           <toggle-switch
-            .subscribe=${this.blackBackground}
+            .on=${this.blackBackground}
             .onChange=${this._onBlackBackgroundChange}
           ></toggle-switch>
         </div>
@@ -162,7 +162,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
         <div class="action-label">Hide toolbar</div>
         <div class="toggle-button">
           <toggle-switch
-            .subscribe=${this.hideToolbar}
+            .on=${this.hideToolbar}
             .onChange=${this._onHideToolBarChange}
           ></toggle-switch>
         </div>