Element-Plus自定义主题（scss变量覆盖）

原创已于 2024-01-29 10:47:35 修改 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scss #前端 #Element-Plus

于 2023-07-31 16:23:25 首次发布

Vue 同时被 2 个专栏收录

23 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

文章展示了如何配置element-plus的主题样式，包括primary、success、warning、danger等颜色的base值，以及文本颜色、字体大小、边框颜色等细节设置，用于SCSS中的主题定制。

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #169BFA,
    ),
    'success': (
      'base': #31CF9A,
    ),
    'warning': (
      'base': #FFBC33,
    ),
    'danger': (
      'base': #FF5F5F,
    ),
    'error': (
      'base': #FF5F5F,
    ),
    'info': (
      'base': #909399,
    ),
  ),
  $text-color: (
    'primary': #455A74,
    'regular': #455A74,
  ),
  $font-size: (
    'base': 12px,
  ),
  $border-color: (
    '': #EBEBEB,
  ),
  $input-font-size: (
    'default': 12px,
  ),
  $select: (
    'input-font-size': 12px,
  ),
  $table-font-size: (
    'default': 12px,
  ),
);

@use "element-plus/theme-chalk/src/index.scss" as *;