fix: minor color scheme inconsistencies

components/smart/AutoComplete.vue

@@ -213,7 +213,7 @@ export default {
     @apply z-50;
     @apply shadow-lg;
 
-    top: calc(100% - 8px);
+    top: calc(100% - 4px);
     border-radius: 0 0 8px 8px;
 
     li {

components/smart/ColorModePicker.vue

@@ -6,7 +6,7 @@
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
       :class="{
-        'bg-primaryLight !text-accent hover:text-accent': color === activeColor,
+        'bg-primaryLight !text-accent hover:text-accent': color === active,
       }"
       :icon="getIcon(color)"
       @click.native="setBGMode(color)"
@@ -31,7 +31,7 @@ export default Vue.extend({
   },
   subscriptions() {
     return {
-      activeColor: getSettingSubject("BG_COLOR"),
+      active: getSettingSubject("BG_COLOR"),
     }
   },
   methods: {

components/smart/Toggle.vue

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