dark mode, bigger default window, gw brand

2025-03-02 16:05:38 -05:00 · 2025-03-02 16:05:38 -05:00 · d7a6fa102d
commit d7a6fa102d
parent 7c29e277fd
5 changed files with 49 additions and 8 deletions
--- a/index.html
+++ b/index.html
@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark-mode">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -13,8 +13,8 @@
    "windows": [
      {
        "title": "simple-inventory-editor",
-        "width": 800,
-        "height": 600
+        "width": 1280,
+        "height": 800
      }
    ],
    "security": {
--- a/src/App.vue
+++ b/src/App.vue
@ -1,9 +1,27 @@
 <script setup lang="ts">
+import Button from 'primevue/button'
+import Menubar from 'primevue/menubar'
 import Toast from 'primevue/toast'
+
+const onToggleDarkMode = (e: Event) => {
+  e.preventDefault()
+  document.documentElement.classList.toggle('dark-mode')
+}
 </script>

 <template lang="pug">
 Toast
+header
+  Menubar
+    template(#end)
+      Button(
+        icon='pi pi-moon'
+        aria-label='Toggle Dark Mode'
+        rounded
+        severity='secondary'
+        variant='text'
+        @click='onToggleDarkMode'
+      )
 main
  router-view(
    v-slot='{ Component }'
@ -16,5 +34,6 @@ main
 </template>

 <style lang="sass">
-
+header
+  margin-bottom: 1rem
 </style>
--- a/src/main.ts
+++ b/src/main.ts
@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import { definePreset } from '@primeuix/themes'
 import Aura from '@primeuix/themes/aura'
 import PrimeVue from 'primevue/config'
 import ToastService from 'primevue/toastservice'
@ -11,14 +12,33 @@ import App from './App.vue'
 const pinia = createPinia()
 const app = createApp(App)

+
+const themePreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '{sky.50}',
+      100: '{sky.100}',
+      200: '{sky.200}',
+      300: '{sky.300}',
+      400: '{sky.400}',
+      500: '{sky.500}',
+      600: '{sky.600}',
+      700: '{sky.700}',
+      800: '{sky.800}',
+      900: '{sky.900}',
+      950: '{sky.950}',
+    },
+  },
+})
+
 app
  .use(router)
  .use(pinia)
  .use(PrimeVue, {
    theme: {
-      preset: Aura,
+      preset: themePreset,
      options: {
-        darkModeSelector: 'system',
+        darkModeSelector: '.dark-mode',
        cssLayer: false,
      },
    },
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@ -106,7 +106,7 @@ section.home-page
      h2 Open Recent File
    .content
      p Not Yet Implemented
-  p or...
+  p.or or...
  Panel
    template(#header)
      h2 Create A New File
@ -136,7 +136,7 @@ section.home-page
          :disabled='newFileDisabled'
          @click='onCreate'
        )
-  p or...
+  p.or or...
  Panel
    template(#header)
      h2 Open An Existing File
@ -153,6 +153,8 @@ section.home-page
  display: flex
  flex-direction: column
  align-items: center
+  .or
+    margin: 0.5rem 0
  .p-panel
    width: 100%
    max-width: 40rem