-
Notifications
You must be signed in to change notification settings - Fork 0
/
windi.config.ts
65 lines (61 loc) · 1.62 KB
/
windi.config.ts
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
import { defineConfig } from 'windicss/helpers'
import type { Plugin } from 'windicss/types/interfaces'
// colors
import colors from 'windicss/colors'
// plugins
import TypographyPlugin from 'windicss/plugin/typography'
import AspectRatioPlugin from 'windicss/plugin/aspect-ratio'
import FiltersPlugin from 'windicss/plugin/filters'
const MyTheme = {
colors: {
green: {
50: '#f6fbf9',
100: '#ecf8f3',
200: '#d0ede0',
300: '#b3e3cd',
400: '#7bcda8',
500: '#42b883',
600: '#3ba676',
700: '#328a62',
800: '#286e4f',
900: '#205a40',
},
},
}
export default defineConfig({
darkMode: 'class',
attributify: false,
extract: {
include: [
'./components/**/*.{vue,js}',
'./composables/**/*.{js,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./utils/**/*.{js,ts}',
'./app.vue',
],
},
theme: {
extend: {
maxWidth: {
'8xl': '90rem',
},
colors: {
primary: MyTheme.colors.green[500],
green: MyTheme.colors.green,
slate: colors.slate,
},
},
},
shortcuts: {
'light-img': 'block dark:hidden',
'dark-img': 'hidden dark:block',
},
plugins: [
// filters plugin require for navbar blur
FiltersPlugin as Plugin,
TypographyPlugin as Plugin,
AspectRatioPlugin as Plugin,
] as Plugin[],
})