themeConfig.ts
2.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import { breakpointsVuetifyV3 } from '@vueuse/core'
import { VIcon } from 'vuetify/components/VIcon'
import { defineThemeConfig } from '@core'
import { Skins } from '@core/enums'
// ❗ Logo SVG must be imported with ?raw suffix
import logo from '@images/logo.svg?raw'
import { AppContentLayoutNav, ContentWidth, FooterType, NavbarType } from '@layouts/enums'
export const { themeConfig, layoutConfig } = defineThemeConfig({
app: {
title: 'materio',
// ❗ 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: breakpointsVuetifyV3.lg - 1, // 1 for matching with vuetify breakpoint. Docs: https://next.vuetifyjs.com/en/features/display-and-platform/
i18n: {
enable: true,
defaultLocale: 'en',
langConfig: [
{
label: 'English',
i18nLang: 'en',
isRTL: false,
},
{
label: 'French',
i18nLang: 'fr',
isRTL: false,
},
{
label: 'Arabic',
i18nLang: 'ar',
isRTL: true,
},
],
},
theme: 'system',
skin: Skins.Default,
iconRenderer: VIcon,
},
navbar: {
type: NavbarType.Sticky,
navbarBlur: true,
},
footer: { type: FooterType.Static },
verticalNav: {
isVerticalNavCollapsed: false,
defaultNavItemIconProps: { icon: 'ri-circle-line' },
isVerticalNavSemiDark: false,
},
horizontalNav: {
type: 'sticky',
transition: 'slide-y-reverse-transition',
popoverOffset: 4,
},
/*
// ℹ️ In below Icons section, you can specify icon for each component. Also you can use other props of v-icon component like `color` and `size` for each icon.
// Such as: chevronDown: { icon: 'ri-arrow-down-s-line', color:'primary', size: '24' },
*/
icons: {
chevronDown: { icon: 'ri-arrow-down-s-line' },
chevronRight: { icon: 'ri-arrow-right-s-line' },
close: { icon: 'ri-close-line', size: '20' },
verticalNavPinned: { icon: 'ri-radio-button-line', size: '20' },
verticalNavUnPinned: { icon: 'ri-circle-line', size: '20' },
sectionTitlePlaceholder: { icon: 'ri-subtract-line' },
},
})