Skip to content

主题与 CSS 变量

NeoBrutal Vue 使用 CSS 变量控制主题,便于覆盖和扩展。

主色与语义色

在 your-app 的全局样式或根元素上覆盖变量即可换肤:

css
:root {
  --neo-primary: #8338ec;
  --neo-secondary: #06d6a0;
  --neo-accent: #ffbe0b;
  --neo-success: #06d6a0;
  --neo-warning: #fb5607;
  --neo-danger: #ef233c;
  --neo-info: #3a86ff;
}

深色主题

通过 data-theme="dark" 切换深色:

html
<html data-theme="dark">

组件库已为 [data-theme="dark"] 定义深色语义色(背景、文字、边框等),无需额外写大量 CSS。

边框与阴影

Neobrutalism 典型变量:

  • --neo-border-width:边框粗细(默认 2px)
  • --neo-border-color:边框颜色
  • --neo-shadow:硬偏移阴影(如 4px 4px 0)

按需覆盖即可微调风格。

MIT License