Perma dark mode and fixing inconsistent styles.

src/App.vue

@@ -37,10 +37,8 @@ function stopTable(tableId: number) {
 
 </script>
 
-<style>
-@import "tailwindcss";
-@import "tailwindcss-primeui";
 
+<style>
 .ActiveTables {
   margin: 20px;
 
@@ -51,18 +49,21 @@ function stopTable(tableId: number) {
   .ATTables {
     padding-left: 50px;
   }
+
+  .button-box {
+    padding: 10px;
+  }
 }
 </style>
 
 <template>
-
   <Card class="ActiveTables">
-    <template #header>
+    <template #title>
       <h2>Active Tables</h2>
     </template>
 
     <template #content>
-      <DataTable class="ATTables" style="" :exportable="false" :value="activeTables">
+      <DataTable :exportable="false" :value="activeTables">
         <Column field="table_name" header="Table Name" />
         <Column field="table_link" header="Table Link">
           <template #body="slotProps">
@@ -79,7 +80,7 @@ function stopTable(tableId: number) {
   </Card>
 
   <Card class="ActiveTables">
-    <template #header>
+    <template #title>
       <h2>All Tables</h2>
     </template>
 
@@ -93,10 +94,9 @@ function stopTable(tableId: number) {
           </template>
         </Column>
       </DataTable>
-      <div class="flex justify-end">
+      <div class="button-box flex justify-content-end">
         <Button label="New Table"/>
       </div>
     </template>
   </Card>
-
 </template>

src/main.ts

@@ -2,8 +2,16 @@ import { createApp } from 'vue'
 import PrimeVue from 'primevue/config';
 import Aura from '@primeuix/themes/aura'
 import App from './App.vue'
+import 'primeflex/primeflex.css'
 
 const app = createApp(App)
+app.use(PrimeVue, {
+  theme: {
+    preset: Aura,
+    options: {
+      darkModeSelector: ".darkmode",
+      cssLayer: false
+    }
+  }
+})
 app.mount('#app')
-app.use(PrimeVue, { theme: { preset: Aura } })
-