back to flyonui

src/stores/ui/de.json

@@ -0,0 +1,6 @@
+{
+  "light": "Hell",
+  "dark": "Dunkel",
+  "soft": "Soft",
+  "corporate": "Corporate"
+}

src/stores/ui/en.json

@@ -0,0 +1,6 @@
+{
+  "light": "Light",
+  "dark": "Dark",
+  "soft": "Soft",
+  "corporate": "Corporate"
+}

src/stores/ui/index.ts

@@ -0,0 +1,55 @@
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import de from './de.json'
+import en from './en.json'
+
+export interface ITheme {
+  value: string
+  name: string
+  icon: string
+}
+
+export const useUiStore = defineStore('uiStore', () => {
+  const breakpoints = useBreakpoints(breakpointsTailwind)
+
+  const currentScreenSize = computed(() =>
+    breakpoints.active().value.length > 0 ? breakpoints.active().value : 'xs'
+  )
+
+  const { t } = useI18n({
+    messages: {
+      de: { ui: de },
+      en: { ui: en },
+    },
+  })
+
+  const availableThemes = ref([
+    {
+      value: 'dark',
+      name: t('ui.dark'),
+      icon: 'line-md:moon-rising-alt-loop',
+    },
+    {
+      value: 'light',
+      name: t('ui.light'),
+      icon: 'line-md:moon-to-sunny-outline-loop-transition',
+    },
+    { value: 'soft', name: t('ui.soft'), icon: 'line-md:paint-drop' },
+    {
+      value: 'corporate',
+      name: t('ui.corporate'),
+      icon: 'hugeicons:corporate',
+    },
+  ])
+
+  const defaultTheme = ref(availableThemes.value[0])
+
+  const currentTheme = ref(defaultTheme)
+
+  return {
+    availableThemes,
+    breakpoints,
+    currentScreenSize,
+    currentTheme,
+    defaultTheme,
+  }
+})