Goldenwere/simple-inventory-editor
1
0
Fork 0
Code Issues 2 Projects Releases Activity Actions

dark mode, bigger default window, gw brand

Browse source
This commit is contained in:
lightling 2025-03-02 16:05:38 -05:00
parent 7c29e277fd
commit d7a6fa102d
Signed by: lightling
GPG key ID: F1F29650D537C773
5 changed files with 49 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="dark-mode">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />

4
src-tauri/tauri.conf.json
View file

@ -13,8 +13,8 @@
"windows": [ "windows": [
{ {
"title": "simple-inventory-editor", "title": "simple-inventory-editor",
"width": 800, "width": 1280,
"height": 600 "height": 800
} }
], ],
"security": { "security": {

21
src/App.vue
View file

@ -1,9 +1,27 @@
<script setup lang="ts"> <script setup lang="ts">
import Button from 'primevue/button'
import Menubar from 'primevue/menubar'
import Toast from 'primevue/toast' import Toast from 'primevue/toast'
const onToggleDarkMode = (e: Event) => {
e.preventDefault()
document.documentElement.classList.toggle('dark-mode')
}
</script> </script>
<template lang="pug"> <template lang="pug">
Toast Toast
header
Menubar
template(#end)
Button(
icon='pi pi-moon'
aria-label='Toggle Dark Mode'
rounded
severity='secondary'
variant='text'
@click='onToggleDarkMode'
)
main main
router-view( router-view(
v-slot='{ Component }' v-slot='{ Component }'
@ -16,5 +34,6 @@ main
</template> </template>
<style lang="sass"> <style lang="sass">
header
margin-bottom: 1rem
</style> </style>

24
src/main.ts
View file

@ -1,5 +1,6 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
import { definePreset } from '@primeuix/themes'
import Aura from '@primeuix/themes/aura' import Aura from '@primeuix/themes/aura'
import PrimeVue from 'primevue/config' import PrimeVue from 'primevue/config'
import ToastService from 'primevue/toastservice' import ToastService from 'primevue/toastservice'
@ -11,14 +12,33 @@ import App from './App.vue'
const pinia = createPinia() const pinia = createPinia()
const app = createApp(App) 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 app
.use(router) .use(router)
.use(pinia) .use(pinia)
.use(PrimeVue, { .use(PrimeVue, {
theme: { theme: {
preset: Aura, preset: themePreset,
options: { options: {
darkModeSelector: 'system', darkModeSelector: '.dark-mode',
cssLayer: false, cssLayer: false,
}, },
}, },

6
src/views/Home/Home.vue
View file

@ -106,7 +106,7 @@ section.home-page
h2 Open Recent File h2 Open Recent File
.content .content
p Not Yet Implemented p Not Yet Implemented
p or... p.or or...
Panel Panel
template(#header) template(#header)
h2 Create A New File h2 Create A New File
@ -136,7 +136,7 @@ section.home-page
:disabled='newFileDisabled' :disabled='newFileDisabled'
@click='onCreate' @click='onCreate'
) )
p or... p.or or...
Panel Panel
template(#header) template(#header)
h2 Open An Existing File h2 Open An Existing File
@ -153,6 +153,8 @@ section.home-page
display: flex display: flex
flex-direction: column flex-direction: column
align-items: center align-items: center
.or
margin: 0.5rem 0
.p-panel .p-panel
width: 100% width: 100%
max-width: 40rem max-width: 40rem