unocss + naive-ui
MIT License
WIP
This preset will help you make naive-ui and unocss work together. Based on unocss-preset-theme.
npm i -D unocss-preset-naive-ui
We use uno.config.ts
as an example below.
import { defineConfig, presetUno } from 'unocss';
import { presetNaiveUi } from 'unocss-preset-naive-ui';
export default defineConfig({
presets: [
presetUno(),
// place after other presets, since it overrides some values by default
presetNaiveUi({ ... }),
],
});
We recommend you to use tailwind compat reset if you are facing style conflicts.
You can a options object to the preset.
import { defineConfig, presetUno } from 'unocss';
import { presetNaiveUi } from 'unocss-preset-naive-ui';
export default defineConfig({
presets: [
presetUno(),
presetNaiveUi({
// top-level options
prefix: '--un-preset-n',
preferCssVariables: true,
namespace: '',
// theme options
primary: '#18a058',
light: {
primary: '#18a058',
},
dark: {
primary: '#63e2b7',
},
}),
],
});
Top-level Option
This option is extended from unocss-preset-theme. Defaults to --un-preset-n
.
Top-level Option
This option is extended from unocss-preset-theme and use its default value.
You may need to update this field when you are developing with uni-app
, taro
, etc.
Top-level Option
Prefer existed css variables or not. Defaults to true
.
If true, use naive-ui
css variables and you have to follow naive-ui
design standards.
If false, use generated variables and you can use more variables away from naive-ui
design standards.
You may need to set this field to false
when you are developing with uni-app
, taro
, etc.
Top-level Option
The namespace used to find css variables. Used when preferCssVariables is true. Defaults to ``.
Top-level Option
Breakpoints. Defaults to { xs: '0px', s: '640px', m: '1024px', l: '1280px', xl: '1536px', xxl: '1920px' }
.
Base primary color. Used when preferCssVariables
is false.
By default #18a058
for light theme and #63e2b7
for dark theme.
Hover primary color. Used when preferCssVariables
is false.
By default #36ad6a
for light theme and #7fe7c4
for dark theme.
Pressed primary color. Used when preferCssVariables
is false.
By default #0c7a43
for light theme and #5acea7
for dark theme.
Supplement(?) primary color. Used when preferCssVariables
is false.
By default #36ad6a
for light theme and rgb(42, 148, 125)
for dark theme.
Base info color. Used when preferCssVariables
is false.
By default #2080f0
for light theme and #70c0e8
for dark theme.
Hover info color. Used when preferCssVariables
is false.
By default #4098fc
for light theme and #8acbec
for dark theme.
Pressed info color. Used when preferCssVariables
is false.
By default #1060c9
for light theme and #66afd3
for dark theme.
Supplement(?) info color. Used when preferCssVariables
is false.
By default #4098fc
for light theme and rgb(56, 137, 197)
for dark theme.
Base success color. Used when preferCssVariables
is false.
By default #18a058
for light theme and #63e2b7
for dark theme.
Hover success color. Used when preferCssVariables
is false.
By default #36ad6a
for light theme and #7fe7c4
for dark theme.
Pressed success color. Used when preferCssVariables
is false.
By default #0c7a43
for light theme and #5acea7
for dark theme.
Supplement(?) success color. Used when preferCssVariables
is false.
By default #36ad6a
for light theme and rgb(42, 148, 125)
for dark theme.
Base warning color. Used when preferCssVariables
is false.
By default #f0a020
for light theme and #f2c97d
for dark theme.
Hover warning color. Used when preferCssVariables
is false.
By default #fcb040
for light theme and #f5d599
for dark theme.
Pressed warning color. Used when preferCssVariables
is false.
By default #c97c10
for light theme and #e6c260
for dark theme.
Supplement(?) warning color. Used when preferCssVariables
is false.
By default #fcb040
for light theme and rgb(240, 138, 0)
for dark theme.
Base error color. Used when preferCssVariables
is false.
By default #d03050
for light theme and #e88080
for dark theme.
Hover error color. Used when preferCssVariables
is false.
By default #de576d
for light theme and #e98b8b
for dark theme.
Pressed error color. Used when preferCssVariables
is false.
By default #ab1f3f
for light theme and #e57272
for dark theme.
Supplement(?) error color. Used when preferCssVariables
is false.
By default #de576d
for light theme and rgb(208, 58, 82)
for dark theme.
Base danger color. Used when preferCssVariables
is false.
By default #d03050
for light theme and #e88080
for dark theme.
Hover danger color. Used when preferCssVariables
is false.
By default #de576d
for light theme and #e98b8b
for dark theme.
Pressed danger color. Used when preferCssVariables
is false.
By default #ab1f3f
for light theme and #e57272
for dark theme.
Supplement(?) danger color. Used when preferCssVariables
is false.
By default #de576d
for light theme and rgb(208, 58, 82)
for dark theme.