refactor(ui): minor inconsistency fixes

components/smart/AccentModePicker.vue

@@ -14,8 +14,9 @@
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-      :class="[`text-${color}-400`, { 'bg-primary': color === active }]"
+      :class="[{ 'bg-primaryLight': color === active }]"
       icon="lens"
+      :color="color"
       @click.native="setActiveColor(color)"
     />
   </div>

components/smart/ColorModePicker.vue

@@ -5,10 +5,9 @@
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-      :class="[
-        { 'bg-primary': color === activeColor },
-        { 'text-accent hover:text-accent': color === activeColor },
-      ]"
+      :class="{
+        'bg-primaryLight !text-accent hover:text-accent': color === activeColor,
+      }"
       :icon="getIcon(color)"
       @click.native="setBGMode(color)"
     />

components/smart/Toggle.vue

@@ -24,9 +24,9 @@ export default {
 
 <style scoped lang="scss">
 $useBorder: false;
-$borderColor: var(--secondary-light-color);
+$borderColor: var(--divider-dark-color);
 $activeColor: var(--accent-color);
-$inactiveColor: var(--secondary-light-color);
+$inactiveColor: var(--divider-dark-color);
 $inactiveHandleColor: var(--primary-color);
 $activeHandleColor: var(--primary-color);
 $width: 32px;