add theme

2023-02-06 22:21:46 +08:00
parent 6f769bac0e
commit 967e807243
279 changed files with 16539 additions and 148 deletions
@@ -0,0 +1,50 @@
+import { breakpointsVuetify } from '@vueuse/core'
+
+import { VIcon } from 'vuetify/components'
+
+// ❗ Logo SVG must be imported with ?raw suffix
+import logo from '@/plugins/vuetify/images/logo.svg?raw'
+
+import { defineThemeConfig } from '@/plugins/vuetify/@core'
+import { RouteTransitions, Skins } from '@/plugins/vuetify/@core/enums'
+import { AppContentLayoutNav, ContentWidth, FooterType, NavbarType } from '@layouts/enums'
+
+export const { themeConfig, layoutConfig } = defineThemeConfig({
+  app: {
+    title: 'Ping Dashboard',
+
+    // ❗ if you have SVG logo and want it to adapt according to theme color, you have to apply color as `color: rgb(var(--v-global-theme-primary))`
+    logo: h('div', { innerHTML: logo, style: 'line-height:0; color: rgb(var(--v-global-theme-primary))' }),
+    contentWidth: ContentWidth.Boxed,
+    contentLayoutNav: AppContentLayoutNav.Vertical,
+    overlayNavFromBreakpoint: breakpointsVuetify.md + 16, // 16 for scrollbar. Docs: https://next.vuetifyjs.com/en/features/display-and-platform/
+    enableI18n: false,
+    theme: 'system',
+    isRtl: false,
+    skin: Skins.Default,
+    routeTransition: RouteTransitions.Fade,
+    iconRenderer: VIcon,
+  },
+  navbar: {
+    type: NavbarType.Sticky,
+    navbarBlur: true,
+  },
+  footer: { type: FooterType.Static },
+  verticalNav: {
+    isVerticalNavCollapsed: false,
+    defaultNavItemIconProps: { icon: 'mdi-circle' },
+    isVerticalNavSemiDark: false,
+  },
+  horizontalNav: {
+    type: 'sticky',
+    transition: 'slide-y-reverse-transition',
+  },
+  icons: {
+    chevronDown: { icon: 'mdi-chevron-down' },
+    chevronRight: { icon: 'mdi-chevron-right' },
+    close: { icon: 'mdi-close' },
+    verticalNavPinned: { icon: 'custom-vertical-nav-header-arrow', size: 22 },
+    verticalNavUnPinned: { icon: 'custom-vertical-nav-header-arrow', size: 22 },
+    sectionTitlePlaceholder: { icon: 'mdi-minus' },
+  },
+})