Custom prime vue theme preset

IntelligenceModding · Nov 23, 2024 · 45eec91 · 45eec91
1 parent d16a526
commit 45eec91
Show file tree

Hide file tree

Showing 4 changed files with 666 additions and 46 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="">
+<html lang="en" class="idark">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -70,7 +70,7 @@ const footerNav = {
   <Toast></Toast>
   <div v-if="showLayout">
     <div class="flex flex-col min-h-screen">
-    <div class="sticky top-0 dark:bg-slate-800 bg-white z-20">
+    <div class="sticky top-0 bg-slate-800 z-20">
       <nav class="mx-auto flex max-w-7xl items-center justify-between p-3 lg:px-8" aria-label="Global">
         <div class="flex lg:flex-1">
           <router-link to="/" class="-m-1 p-1 ">
@@ -107,10 +107,10 @@ const footerNav = {
         </div>
       </nav>
     </div>
-    <div class="flex-grow dark:bg-slate-800 bg-white">
+    <div class="flex-grow">
       <router-view></router-view>
     </div>
-    <footer class="bg-white dark:bg-slate-800 border-t border-slate-600">
+    <footer class="bg-slate-800 border-t border-slate-600">
       <div class="mx-auto max-w-7xl overflow-hidden px-6 py-24 sm:py-8 lg:px-8">
         <nav class="mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12" aria-label="Footer">
           <router-link v-for="item in footerNav.main" :to=item.href

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -6,62 +6,22 @@ import App from "./App.vue";
 import ToastService from 'primevue/toastservice';
 
 import "primeicons/primeicons.css";
-import Aura from "@primevue/themes/aura";
 import {createRouter, createWebHistory} from "vue-router";
 import {requestBackend} from "@/scripts/data";
 import {useUserStore} from "@/stores/user";
 import Login from "@/views/Login.vue";
 import {createPinia} from "pinia";
-import {definePreset} from "@primevue/themes";
 import Users from "@/views/Users.vue";
 import MyProfile from "@/views/MyProfile.vue";
 import Homepage from "@/views/Homepage.vue";
+import {IntelligencePreset} from "@/theme";
 
 const pinia = createPinia()
 const app = createApp(App);
 
-const MyPreset = definePreset(Aura, {
-  semantic: {
-    primary: {
-      50: '{violet.50}',
-      100: '{violet.100}',
-      200: '{violet.200}',
-      300: '{violet.300}',
-      400: '{violet.400}',
-      500: '{violet.500}',
-      600: '{violet.600}',
-      700: '{violet.700}',
-      800: '{violet.800}',
-      900: '{violet.900}',
-      950: '{violet.950}'
-    },
-    colorScheme: {
-      light: {
-        formField: {
-          background: '{surface.100}',
-          disabledBackground: '{surface.200}',
-        }
-      },
-      dark: {
-        formField: {
-          background: '{surface.800}',
-          disabledBackground: '{surface.200}',
-        },
-        content: {
-          background: '{surface.900}',
-          hoverBackground: '{surface.800}',
-          borderColor: '{surface.700}',
-          color: '{text.color}',
-          hoverColor: '{text.hover.color}'
-        },
-      }
-    }
-  }
-});
-
 app.use(PrimeVue, {
   theme: {
-    preset: MyPreset,
+    preset: IntelligencePreset,
     options: {
       darkModeSelector: '.idark',
     },