diff --git a/pages/component/switch/switch.test.js b/pages/component/switch/switch.test.js
index a3400d0abfb13d5c5dc67780049819f9fcc63497..79ccc75fd283710a9f013a605d85e444cdc71413 100644
--- a/pages/component/switch/switch.test.js
+++ b/pages/component/switch/switch.test.js
@@ -37,6 +37,16 @@ describe('switch', () => {
     await page.waitFor(100)
     expect(await switch_element.attribute('color')).toBe(color)
   })
+  it('dark', async () => {
+    const dark = await page.$('#dark')
+    const darkChecked = await page.$('#darkChecked')
+
+    expect(await dark.attribute('background-color')).toBe('#1f1f1f')
+    expect(await dark.attribute('fore-color')).toBe('#f0f0f0')
+
+    expect(await darkChecked.attribute('active-background-color')).toBe('#007aff')
+    expect(await darkChecked.attribute('active-fore-color')).toBe('#ffffff')
+  })
   it('click', async () => {
     let switchElement
     // TODO 暂时通过获取组件内部的 class 触发模拟点击
diff --git a/pages/component/switch/switch.uvue b/pages/component/switch/switch.uvue
index 650dac0fd21c60a54d22948916e1211d1222ba69..3f2acf2b6b2fcc06c0e7d095bc00f15ef92162b0 100644
--- a/pages/component/switch/switch.uvue
+++ b/pages/component/switch/switch.uvue
@@ -5,7 +5,11 @@
       <view class="flex-row">
         <switch class="switch-checked" :checked="checked" @change="switch1Change" />
         <switch @change="switch2Change" />
-        <!-- <text class="switch-checked-value">{{clickCheckedValue}}</text> -->
+      </view>
+      <view class="uni-title">暗黑样式</view>
+      <view class="flex-row">
+        <switch id="darkChecked" background-color="#1f1f1f" activeBackgroundColor="#007aff" foreColor="#f0f0f0" activeForeColor="#ffffff" :checked="checked" />
+        <switch id="dark" background-color="#1f1f1f" activeBackgroundColor="#007aff" foreColor="#f0f0f0" activeForeColor="#ffffff" />
       </view>
       <view class="uni-title">禁用样式</view>
       <view class="flex-row">