Write the Code. Change the World.

8月 01

多主题,是一个站点的常规配置。至少白天主题和夜晚主题是必须要有的。 element-plus 提供了一个很好的实现多主题的方案。先从修改默认主题色开始。

https://element-plus.org/zh-CN/guide/theming.html

开始

先安装 sass

pnpm add -D sass

再创建覆盖默认主题颜色的 sass 文件

# 创建
touch assets/styles/element.scss

# 填充以下内容
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #003261,
    ),
    'success': (
      'base': #21ba45,
    ),
    'warning': (
      'base': #f2711c,
    ),
    'danger': (
      'base': #db2828,
    ),
    'error': (
      'base': #db2828,
    ),
    'info': (
      'base': #42b8dd,
    ),
  ),
  $button-padding-horizontal: (
    'default': 80px,
  )
);

继续阅读