From a3b8aaff61962c9c936e8389bf6dc77a498748d6 Mon Sep 17 00:00:00 2001
From: donteatfriedrice <chs@bupt.cn>
Date: Thu, 22 May 2025 06:13:25 +0000
Subject: [PATCH] fix(editor): toggle switch style (#12436)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 -->
---
 .../affine/components/src/toggle-switch/index.ts  | 15 +++++++--------
 .../frame-panel/src/header/frames-setting-menu.ts |  6 +++---
 .../outline/src/header/outline-setting-menu.ts    |  2 +-
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/blocksuite/affine/components/src/toggle-switch/index.ts b/blocksuite/affine/components/src/toggle-switch/index.ts
index 0e60bf5df1..8b83eb92a5 100644
--- a/blocksuite/affine/components/src/toggle-switch/index.ts
+++ b/blocksuite/affine/components/src/toggle-switch/index.ts
@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -18,8 +19,7 @@ const styles = css`
     text-indent: -9999px;
     width: 38px;
     height: 20px;
-    background: var(--affine-icon-color);
-    border: 1px solid var(--affine-black-10);
+    background: ${unsafeCSSVarV2('toggle/backgroundOff')};
     display: block;
     border-radius: 20px;
     position: relative;
@@ -28,22 +28,21 @@ const styles = css`
   label:after {
     content: '';
     position: absolute;
-    top: 1px;
-    left: 1px;
+    top: 2px;
+    left: 2px;
     width: 16px;
     height: 16px;
-    background: var(--affine-white);
-    border: 1px solid var(--affine-black-10);
+    background: ${unsafeCSSVarV2('toggle/foreground')};
     border-radius: 16px;
     transition: 0.1s;
   }
 
   label.on {
-    background: var(--affine-primary-color);
+    background: ${unsafeCSSVarV2('toggle/background')};
   }
 
   label.on:after {
-    left: calc(100% - 1px);
+    left: calc(100% - 2px);
     transform: translateX(-100%);
   }
 
diff --git a/blocksuite/affine/fragments/frame-panel/src/header/frames-setting-menu.ts b/blocksuite/affine/fragments/frame-panel/src/header/frames-setting-menu.ts
index 4d4c0307ab..a06d693bd5 100644
--- a/blocksuite/affine/fragments/frame-panel/src/header/frames-setting-menu.ts
+++ b/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>
diff --git a/blocksuite/affine/fragments/outline/src/header/outline-setting-menu.ts b/blocksuite/affine/fragments/outline/src/header/outline-setting-menu.ts
index 6b87ea0f7e..363c56e6ef 100644
--- a/blocksuite/affine/fragments/outline/src/header/outline-setting-menu.ts
+++ b/blocksuite/affine/fragments/outline/src/header/outline-setting-menu.ts
@@ -26,7 +26,7 @@ export class OutlineNotePreviewSettingMenu extends SignalWatcher(
         <div class=${styles.actionLabel}>Show type icon</div>
         <div class=${styles.toggleButton}>
           <toggle-switch
-            .subscribe=${showPreviewIcon}
+            .on=${showPreviewIcon}
             .onChange=${() => {
               this._context.showIcons$.value = !showPreviewIcon;
             }}