update theming

package-lock.json

@@ -1968,6 +1968,39 @@
         "node": ">=12.11.0"
       }
     },
+    "node_modules/@primeuix/themes": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-1.0.3.tgz",
+      "integrity": "sha512-f/1qadrv5TFMHfvtVv4Y9zjrkeDP2BO/cuzbHBO9DYxKL6YBIPT9BjKec2K4Kg8PcfGm6CAvxAvICadJSWejRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.5.1"
+      }
+    },
+    "node_modules/@primeuix/themes/node_modules/@primeuix/styled": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.5.1.tgz",
+      "integrity": "sha512-5Ftw/KSauDPClQ8F2qCyCUF7cIUEY4yLNikf0rKV7Vsb8zGYNK0dahQe7CChaR6M2Kn+NA2DSBSk76ZXqj6Uog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.5.3"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/themes/node_modules/@primeuix/utils": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.5.3.tgz",
+      "integrity": "sha512-7SGh7734wcF1/uK6RzO6Z6CBjGQ97GDHfpyl2F1G/c7R0z9hkT/V72ypDo82AWcCS7Ta07oIjDpOCTkSVZuEGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@primeuix/utils": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.3.2.tgz",
@@ -22704,6 +22737,7 @@
       "devDependencies": {
         "@goldenwere/mackenzii-embeds": "*",
         "@goldenwere/mackenzii-types": "*",
+        "@primeuix/themes": "1.0.3",
         "@primevue/themes": "4.2.5",
         "@types/dompurify": "3.2.0",
         "@types/js-yaml": "4.0.9",

projects/frontend/package.json

@@ -12,6 +12,7 @@
     "@goldenwere/mackenzii-types": "*",
     "@goldenwere/mackenzii-embeds": "*",
     "@primevue/themes": "4.2.5",
+    "@primeuix/themes": "1.0.3",
     "@types/dompurify": "3.2.0",
     "@types/js-yaml": "4.0.9",
     "@types/node": "22.12.0",

projects/frontend/src/components/shared/theme-picker.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
+import PrimeVueSelect from 'primevue/select'
+
+import type { SiteTheme } from '@goldenwere/mackenzii-types'
 import { injectStylesheet } from 'src/utilities/dom'
 import { storage } from 'src/utilities/fetch'
 import { useRouteStore } from 'src/routes'
@@ -8,30 +11,69 @@ import { useRouteStore } from 'src/routes'
 const routeStore = useRouteStore()
 const globalConfig = routeStore._globals
 const options = ref(globalConfig.themes)
-const currentTheme = ref('')
+const optionsArray = computed(() => Object.keys(options.value).map(key => ({...options.value[key], id: key})))
+const currentTheme = ref<SiteTheme & { id: string }>(null as any)
 let node: HTMLLinkElement
 
+const setModeClass = () => {
+  switch (currentTheme.value.type) {
+    case 'dark':
+      document.body.parentElement!.classList.add('app-dark')
+      document.body.parentElement!.classList.remove('app-dark-hc')
+      document.body.parentElement!.classList.remove('app-light')
+      document.body.parentElement!.classList.remove('app-light-hc')
+      break
+    case 'dark_hc':
+      document.body.parentElement!.classList.remove('app-dark')
+      document.body.parentElement!.classList.add('app-dark-hc')
+      document.body.parentElement!.classList.remove('app-light')
+      document.body.parentElement!.classList.remove('app-light-hc')
+      break
+    case 'light':
+      document.body.parentElement!.classList.remove('app-dark')
+      document.body.parentElement!.classList.remove('app-dark-hc')
+      document.body.parentElement!.classList.add('app-light')
+      document.body.parentElement!.classList.remove('app-light-hc')
+      break
+    case 'light_hc':
+      document.body.parentElement!.classList.remove('app-dark')
+      document.body.parentElement!.classList.remove('app-dark-hc')
+      document.body.parentElement!.classList.remove('app-light')
+      document.body.parentElement!.classList.add('app-light-hc')
+      break
+    default:
+      document.body.parentElement!.classList.remove('app-dark')
+      document.body.parentElement!.classList.remove('app-dark-hc')
+      document.body.parentElement!.classList.remove('app-light')
+      document.body.parentElement!.classList.remove('app-light-hc')
+      break
+  }
+}
+
 const onThemeChosen = (event: Event) => {
-  storage.write(`${globalConfig.id}::currentTheme`, currentTheme.value)
+  const themeId = currentTheme.value.id
-  node.setAttribute('href', globalConfig.themes[currentTheme.value].url)
+  storage.write(`${globalConfig.id}::currentTheme`, themeId)
+  node.setAttribute('href', globalConfig.themes[themeId].url)
+  setModeClass()
 }
 
 onMounted(async () => {
-  currentTheme.value = storage.read(`${globalConfig.id}::currentTheme`) || Object.keys(globalConfig.themes)[0]
+  const themeId = storage.read<string>(`${globalConfig.id}::currentTheme`) || Object.keys(globalConfig.themes)[0]
-  node = injectStylesheet(globalConfig.themes[currentTheme.value].url, 'theme-stylesheet')
+  currentTheme.value = { ...options.value[themeId], id: themeId }
+  node = injectStylesheet(globalConfig.themes[themeId].url, 'theme-stylesheet')
+  setModeClass()
 })
 </script>
 
 <template lang="pug">
 .theme-picker
-  select(
+  PrimeVueSelect(
     v-model='currentTheme'
+    :options='optionsArray'
     @change='onThemeChosen($event)'
+    optionLabel='displayName'
+    placeholder='theme'
   )
-    option(
-      v-for='(option, key) in options'
-      :value='key'
-    ) {{ option.displayName|| option }}
 </template>
 
 <style scoped lang="sass">

projects/frontend/src/main.ts

@@ -5,6 +5,8 @@ import type { HLJSApi } from 'highlight.js'
 const marked = import('marked')
 import { markedHighlight } from 'marked-highlight'
 import PrimeVue from 'primevue/config'
+import Aura from '@primevue/themes/aura'
+import { definePreset } from '@primeuix/themes'
 
 import type { RoutedWindow, SiteGlobals } from '@goldenwere/mackenzii-types'
 
@@ -46,7 +48,31 @@ export const createApp = ViteSSG(
 
     app
     .use(createPinia())
-    .use(PrimeVue, { theme: 'none' })
+    .use(PrimeVue, {
+      theme: {
+        // TBA: proper theme implementation between mackenzii and primevue
+        preset: definePreset(Aura, {
+          semantic: {
+            primary: {
+              50: '{neutral.50}',
+              100: '{neutral.100}',
+              200: '{neutral.200}',
+              300: '{neutral.300}',
+              400: '{neutral.400}',
+              500: '{neutral.500}',
+              600: '{neutral.600}',
+              700: '{neutral.700}',
+              800: '{neutral.800}',
+              900: '{neutral.900}',
+              950: '{neutral.950}',
+            },
+          },
+        }),
+        options: {
+          darkModeSelector: '.app-dark'
+        }
+      },
+    })
     initializeRouteStore(routes, globals as unknown as SiteGlobals)
   },
 )