feat: put theme swap in the style settings

.node-version

@@ -1 +1 @@
-22.11.0
+22.12.0

src/components/FontChange.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue"
 import { useUserRepoStore } from "../modules/repo/store/userRepo.store"
+import ThemeSwap from "@/components/ThemeSwap.vue"
 
 const store = useUserRepoStore()
 
@@ -13,6 +14,8 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
 
 <template>
   <div class="font-change" v-if="sortedFontFamilies.length > 0">
+    <theme-swap />
+
     <select
       class="select"
       :value="store.userSettings?.chosenFontFamily"
@@ -40,6 +43,7 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
   flex: 1;
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: 1rem;
 
   select {

src/components/HeaderNote.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import ThemeSwap from "@/components/ThemeSwap.vue"
 import FontChange from "@/components/FontChange.vue"
 
 defineProps<{ user: string; repo: string }>()
@@ -130,14 +129,13 @@ defineProps<{ user: string; repo: string }>()
     </router-link>
     <dialog id="font_modal" class="modal">
       <div class="modal-box">
-        <h3 class="text-lg font-bold">Font settings</h3>
+        <h3 class="text-lg font-bold">Style settings</h3>
         <font-change />
       </div>
       <form method="dialog" class="modal-backdrop">
         <button></button>
       </form>
     </dialog>
-    <theme-swap />
   </header>
 </template>