环境确认

为了不出错，保证能够一次就设置成功，需要确认一下项目框架，版本号只要不过高或过低，一般都不会出问题

"vite": "^2.9.0",
"sass": "^1.49.11",
"typescript": "^4.5.4",
"vue": "^3.2.25",
"element-plus": "^2.1.7",

创建主题文件

在项目目录的/src/assets/下创建elementPlusDark.scss、custom.scss两个文件。elementPlusDark.scss用来替换elemengPlus中的变量，custom.scss用来替换elementPlus中写死的部分样式，文件内容具体如下：

elementPlusDark.scss

// 夜间模式
$--colors: (
  'white': #1C1C1E,
    'black': #FFF,
    'primary': (
      'base': #0A84FF,
    ),
    'success': (
      'base': #32D74B,
    ),
    'warning': (
      'base': #FFD60A,
    ),
    'danger': (
      'base': #FF9F0A,
    ),
    'error': (
      'base': #FF453A,
    ),
    'info': (
      'base': #909399,
    ),
);
$--text-color:(
  ('primary': #FFF,
    'regular': #EBEBF0,
    'secondary': #BCBCC0,
    'placeholder': #AEAEB2,
    'disabled': #8E8E93,
  )
);
$--border-color:(
  (
    '': #404042,
    'light': #2C2C2E,
    'lighter': #3A3A3C,
    'extra-light': #545456,
    'dark': #7C7C80,
    'darker': #AEAEB2,
  )
);
$--fill-color:(
  (
    '': #242426,
    'light': #242426,
    'lighter': #242426,
    'extra-light': #242426,
    'dark': #363638,
    'darker': #363638,
    'blank': #363638,
  )
);
$--bg-color:(
  (
    '': #1C1C1E,
    'page': #1C1C1E,
    'overlay': #1C1C1E,
  )
);
$--mask-color:(
  (
    '': rgba(0, 0, 0, 0.8),
    'extra-light': rgba(255, 255, 255, 0.3),
  )
);
@forward "element-plus/theme-chalk/src/common/var.scss" with
  (
    $colors: $--colors,
    $text-color : $--text-color,
    $border-color:$--border-color,
    $fill-color:$--fill-color,
    $bg-color:$--bg-color,
    $mask-color:$--mask-color,
  );
@use "element-plus/theme-chalk/src/index.scss" as *;

custom.scss

body {
margin: 0;
background-color: #1C1C1E;
color: #fff;
}
.el-calendar{
    background-color: #1C1C1E;
}
.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover{
    background-color: #1a2635;
}