Update header config

config/header.yml

@@ -1,5 +1,7 @@
 ---
   logo_url:
+  background_class: bg-[#89a741]
+  link_class: text-white 
   links:
     - label: Home
       link: /

src/components/Layout/LayoutHeader.vue

@@ -16,11 +16,13 @@
       align-middle
       flex
       items-center"
+    :class="background_class"
   >
     <div class="container flex flex-wrap justify-between items-center mx-auto dark:text-slate-200 font-medium">
       <a
         href="/"
         class="flex"
+        :class="link_class"
       >
         <img
           v-if="logo"
@@ -74,6 +76,7 @@
               <router-link
                 :to="item.link"
                 class="hover:text-sky-500 dark:hover:text-sky-400"
+                :class="link_class"
               >
                 {{ item.label }}
               </router-link>
@@ -95,7 +98,9 @@ import SwitchTheme from '../SwitchTheme.vue'
 const {
   logo,
   links,
-  project_name
+  project_name,
+  background_class,
+  link_class
 } = __APP_ENV__
 
 </script>

src/components/SwitchTheme.vue

@@ -27,7 +27,8 @@
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class="h-6 w-6 text-slate-400 hover:text-slate-500 dark:hover:text-slate-300"
+      class="h-6 w-6 text-slate-400 hover:text-primary-500 dark:hover:text-slate-300"
+      :class="link_class"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
@@ -45,6 +46,10 @@
 <script setup>
 import { watch, ref } from 'vue'
 
+const {
+  link_class
+} = __APP_ENV__
+
 const themeModes = {
   dark: 'dark',
   light: 'light'

tailwind.config.js

@@ -5,6 +5,7 @@ module.exports = {
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx,md}",
     "./pages/*.{vue,md}",
+    "./config/*.yml",
   ],
 
   darkMode: 'class',