Style changes, add css config folder

config/style/theme.css

@@ -0,0 +1,29 @@
+
+:root {
+  --color-primary: 137, 167, 65;
+  --color-primary-content: 255, 255, 255;
+
+  --color-secondary: 14, 165, 233;
+  --color-secondary-content: 255, 255, 255;
+
+  --color-base-foreground: 255, 255, 255;
+  --color-base-background: 245, 247, 251;
+  --color-base-200: 226, 232, 240;
+  --color-base-300: 203, 213, 225;
+  --color-base-content: 0, 0, 0;
+}
+
+.dark {
+  --color-primary: 14, 165, 233;
+  --color-primary-content: 255, 255, 255;
+
+  --color-secondary: 14, 165, 233;
+  --color-secondary-content: 255, 255, 255;
+
+  --color-base-background: 23,23,23;
+  --color-base-foreground: 38,38,38;
+  --color-base-200: 30, 41, 59;
+  --color-base-300: 30, 41, 59;
+  --color-base-content: 255, 255, 255;
+}
+

jsconfig.json

@@ -4,6 +4,7 @@
   ],
   "compilerOptions": {
     "baseUrl": ".",
+    "jsx": "preserve",
     "paths": {
       "@/*": ["./src/*"]
     }

src/assets/css/tailwind.css

@@ -2,9 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
+
   :root {
-    --color-primary: 137, 167, 65;
+    --color-primary: 0, 0, 0;
     --color-primary-content: 255, 255, 255;
 
     --color-secondary: 14, 165, 233;
@@ -51,4 +51,3 @@
   .dark {
     color-scheme: dark;
   }
-}

src/components/Layout/LayoutFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="footer text-white bottom-0 border-gray-200 bg-zinc-800 dark:bg-slate-800 pl-4 pr-4">
+  <footer class="footer text-white bottom-0 border-gray-200 bg-zinc-800 pl-4 pr-4">
     <div class="container mx-auto text-sm pt-2 pb-4">
       <div class="pt-4 pb-2">
         {{ project_authors }}
@@ -31,7 +31,7 @@
         <p>{{ copyright_text }}</p>
       </div>
 
-      <hr class="mt-3 mb-3 border-gray-500 dark:border-slate-700">
+      <hr class="mt-3 mb-3 border-gray-500">
 
       <div class="flex items-center">
         <span>

src/main.js

@@ -2,8 +2,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from '@/router/index.js'
 import globalComponents from '@/components/globalComponents'
-import '@/assets/css/main.css'
-
+import.meta.globEager('@/assets/css/main.css')
+import.meta.globEager('../config/style/*.{scss,css}')
 
 const app = createApp(App)