Use scss vars in ThemeToggle (#131)

src/components/common/ThemeToggle/style.module.scss

@@ -1,3 +1,5 @@
+@use 'src/styles/vars.scss' as vars;
+
 $indicator-size: 30px;
 $switch-gap: 127%;
 $switch-gap-num: calc($switch-gap / 100%);
@@ -6,8 +8,8 @@ $component-roundness: 34px;
 
 .switch {
   align-items: center;
-  border-color: #9f9f9f;
-  border-radius: 34px;
+  border-color: var(--theme-mode-indicator);
+  border-radius: $component-roundness;
   border-style: solid;
   border-width: 1px;
   display: flex;
@@ -16,14 +18,13 @@ $component-roundness: 34px;
 
   label {
     align-items: center;
-    color: #fff;
     cursor: pointer;
     display: flex;
     flex-direction: row;
     float: left;
-    height: $indicator-size * 1.2;
+    height: $indicator-size * $switch-gap-num;
     justify-content: center;
-    width: #{$indicator-size * $switch-gap-num};
+    width: $indicator-size * $switch-gap-num;
 
     input {
       opacity: 0;
@@ -60,29 +61,28 @@ $component-roundness: 34px;
 
   .icon {
     align-items: center;
-    color: #fff;
     display: flex;
 
     fill: var(--theme-mode-icon);
     height: $indicator-size;
     justify-content: center;
-    padding: #{$indicator-size * 0.25};
+    padding: $indicator-size * 0.25;
     position: absolute;
     stroke: var(--theme-mode-icon);
     width: $indicator-size;
     z-index: 2;
   }
 
   .switchOne {
-    transform: translate3d(#{$switch-start}, 0, 0);
+    transform: translate3d($switch-start, 0, 0);
   }
 
   .switchTwo {
-    transform: translate3d(calc(#{$switch-start} + #{$switch-gap}), 0, 0);
+    transform: translate3d(calc($switch-start + $switch-gap), 0, 0);
   }
 
   .switchThree {
-    transform: translate3d(calc(#{$switch-start} + #{$switch-gap * 2}), 0, 0);
+    transform: translate3d(calc($switch-start + $switch-gap * 2), 0, 0);
   }
 }