fix: Apply theme colors for switch component (#333)

visgl · Dec 14, 2023 · 7c9f7ab · 7c9f7ab
1 parent f3f00c0
commit 7c9f7ab
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -5,6 +5,8 @@ import { Header, HelpPanel } from "./components";
 import {
   color_brand_primary,
   color_brand_quaternary,
+  color_brand_tertiary,
+  dim_brand_tertinary,
   color_canvas_primary,
   color_canvas_secondary,
   dim_canvas_primary,
@@ -75,6 +77,10 @@ const THEMES: AppThemes = {
       validateTileOk: color_brand_secondary_dark,
       validateTileWarning: color_accent_tertiary,
       filtrationImage: color_brand_quaternary,
+      switchDisabledBackground: hilite_canvas_primary,
+      switchDisabledBackgroundHovered: dim_canvas_primary,
+      switchCheckedBackground: color_brand_tertiary,
+      switchCheckedBackgroundHovered: dim_brand_tertinary,
     },
     name: Theme.Dark,
   },
@@ -106,6 +112,10 @@ const THEMES: AppThemes = {
       validateTileOk: color_brand_secondary,
       validateTileWarning: color_accent_primary,
       filtrationImage: color_canvas_secondary,
+      switchDisabledBackground: dim_canvas_secondary,
+      switchDisabledBackgroundHovered: color_canvas_secondary_inverted,
+      switchCheckedBackground: color_brand_tertiary,
+      switchCheckedBackgroundHovered: dim_brand_tertinary,
     },
     name: Theme.Light,
   },

diff --git a/src/components/toogle-switch/toggle-switch.tsx b/src/components/toogle-switch/toggle-switch.tsx
@@ -37,7 +37,7 @@ const Slider = styled.span`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(250, 250, 250, 0.2);
+  background-color: ${({ theme }) => theme.colors.switchDisabledBackground};
   transition: 0.4s;
   border-radius: 8px;
   &::after {
@@ -54,9 +54,16 @@ const Slider = styled.span`
     transition: 0.4s;
     border-radius: 8px;
   }
+  &:hover {
+    background-color: ${({ theme }) =>
+      theme.colors.switchDisabledBackgroundHovered};
+  }
 
   ${Input}:checked + & {
-    background: #4f52cc;
+    background: ${({ theme }) => theme.colors.switchCheckedBackground};
+    &:hover {
+      background: ${({ theme }) => theme.colors.switchCheckedBackgroundHovered};
+    }
   }
 
   ${Input}:checked + &::before {