diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets
index 58b3ae84551a9e717250b888165e35e222ca9c74..e049981587ab439fd4f11a1a8ebfebc964d9b402 100644
--- a/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets
+++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets
@@ -37,6 +37,10 @@ struct ComponentsNavigationPage {
       title: 'TimePicker',
       page: 'pages/components/TimePickerPage'
     },
+    {
+      title: 'TogglePage',
+      page: 'pages/components/TogglePage'
+    },
   ]
 
   build() {
diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/TogglePage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/TogglePage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..8b919a3def4cb6a2829729efd11a761d88796182
--- /dev/null
+++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/TogglePage.ets
@@ -0,0 +1,86 @@
+import { BrownThemeColors, GreenThemeColors, RedThemeColors } from '../../theme/CustomColorsImlp'
+import { CustomThemeImpl } from '../../theme/CustomThemeImpl'
+
+@Entry
+@Component
+struct TogglePage {
+  @State customTheme: Theme = new CustomThemeImpl(RedThemeColors)
+  count = 0
+
+  @State isOnButton: boolean = true
+  @State isOnCheckbox: boolean = true
+  @State isOnSwitch: boolean = true
+
+  @State isOnButtonCustom: boolean = true
+  @State isOnCheckboxCustom: boolean = true
+  @State isOnSwitchCustom: boolean = true
+
+  build() {
+    Row() {
+      Scroll() {
+        Column({ space: '8vp' }) {
+          Toggle({ type: ToggleType.Button, isOn: this.isOnButton }) {
+            Text("Toggle Button: SystemTheme")
+          }
+          .onChange((isOn) => { this.isOnButton = isOn })
+          .onClick(() => {})
+
+          Row({ space: '8vp' }) {
+            Toggle({ type: ToggleType.Checkbox, isOn: this.isOnCheckbox })
+              .onChange((isOn) => { this.isOnCheckbox = isOn })
+            Text('Toggle Checkbox: SystemTheme')
+          }
+
+          Row({ space: '8vp' }) {
+            Toggle({ type: ToggleType.Switch, isOn: this.isOnSwitch })
+              .onChange((isOn) => { this.isOnSwitch = isOn })
+            Text('Toggle Switch: SystemTheme')
+          }
+
+          WithTheme(this.customTheme) {
+            Column({ space: '8vp' }) {
+              Toggle({ type: ToggleType.Button, isOn: this.isOnButtonCustom }) {
+                Text("Toggle Button: CustomTheme")
+              }
+              .onChange((isOn) => { this.isOnButtonCustom = isOn })
+              .onClick(() => {})
+
+              Row({ space: '8vp' }) {
+                Toggle({ type: ToggleType.Checkbox, isOn: this.isOnCheckboxCustom })
+                  .onChange((isOn) => { this.isOnCheckboxCustom = isOn })
+                Text('Toggle Checkbox: CustomTheme')
+              }
+
+              Row({ space: '8vp' }) {
+                Toggle({ type: ToggleType.Switch, isOn: this.isOnSwitchCustom })
+                  .onChange((isOn) => { this.isOnSwitchCustom = isOn})
+                Text('Toggle Switch: CustomTheme')
+              }
+            }
+            .width('100%')
+          }
+        }
+        .width('100%')
+      }
+    }
+    .height('100%')
+    .onClick(() => {
+      this.count++
+      if (this.count > 2) {
+        this.count = 0
+      }
+      switch (this.count) {
+        case 0:
+          this.customTheme = new CustomThemeImpl(RedThemeColors)
+          break
+        case 1:
+          this.customTheme = new CustomThemeImpl(GreenThemeColors)
+          break
+        case 2:
+        default:
+          this.customTheme = new CustomThemeImpl(BrownThemeColors)
+          break
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/theme/ThemeDemo/entry/src/main/ets/theme/CustomColorsImlp.ets b/theme/ThemeDemo/entry/src/main/ets/theme/CustomColorsImlp.ets
index 1864281f9a5ccce5f3b63710db264bf99166abe0..f12cce1ab094064861f54a39ab338c503eefdd55 100644
--- a/theme/ThemeDemo/entry/src/main/ets/theme/CustomColorsImlp.ets
+++ b/theme/ThemeDemo/entry/src/main/ets/theme/CustomColorsImlp.ets
@@ -5,6 +5,8 @@ export class RedColors implements Colors {
   backgroundSecondary = 0x33FF1111
   backgroundEmphasize = 0xFFD00000
   backgroundTertiary = 0x44FF2222
+  compEmphasizeSecondary = 0x33FF1111
+  compBackgroundEmphasize = 0xFFD00000
 }
 
 export class GreenColors implements Colors {
@@ -14,6 +16,8 @@ export class GreenColors implements Colors {
   backgroundSecondary = 0x3322FF22
   backgroundTertiary = 0x1111FF11
   backgroundEmphasize = 0xFF00541F
+  compEmphasizeSecondary = 0x3322FF22
+  compBackgroundEmphasize = 0xFF00541F
 }
 
 export class BrownColors implements Colors {
@@ -23,6 +27,8 @@ export class BrownColors implements Colors {
   backgroundSecondary = 0x33556B55
   backgroundEmphasize = 0xFF8B6B5C
   backgroundTertiary = 0x44556B55
+  compEmphasizeSecondary = 0x33556B55
+  compBackgroundEmphasize = 0xFF8B6B5C
 }
 
 export const RedThemeColors = new RedColors()
diff --git a/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json b/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json
index 808516e79aa74cfa3c64c0ff80c7868912128e2e..e52a78490d848603fde86ce8538b767218ddd22d 100644
--- a/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json
+++ b/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json
@@ -35,6 +35,7 @@
     "pages/tokens/shapes/PaddingsPage",
     "pages/tokens/shapes/BordersPage",
     "pages/tokens/shapes/OutlinesPage",
-    "pages/components/dialog/DialogPage"
+    "pages/components/dialog/DialogPage",
+    "pages/components/TogglePage"
   ]
 }
\ No newline at end of file