From 6e564b162f4c29ce037baf06f1f6f3c72b79d172 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Tue, 9 Aug 2022 11:53:59 -0300
Subject: [PATCH] Update header config

---
 config/header.yml                      | 2 ++
 src/components/Layout/LayoutHeader.vue | 7 ++++++-
 src/components/SwitchTheme.vue         | 7 ++++++-
 tailwind.config.js                     | 1 +
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/config/header.yml b/config/header.yml
index 22018dc..fa8e92e 100644
--- a/config/header.yml
+++ b/config/header.yml
@@ -1,5 +1,7 @@
 ---
   logo_url:
+  background_class: bg-[#89a741]
+  link_class: text-white 
   links:
     - label: Home
       link: /
diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue
index d76e769..e433880 100644
--- a/src/components/Layout/LayoutHeader.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/SwitchTheme.vue b/src/components/SwitchTheme.vue
index 25d09b9..96a3106 100644
--- a/src/components/SwitchTheme.vue
+++ b/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'
diff --git a/tailwind.config.js b/tailwind.config.js
index de95522..f834c20 100644
--- a/tailwind.config.js
+++ b/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',