init

src/assets/css/variables.scss

+/* 改变主题色变量 */
+/* Color
+-------------------------- */
+/// color|1|Brand Color|0
+$--color-primary: #3182FF;
+/// color|1|Background Color|4
+$--color-white: #f9f9f9;
+/// color|1|Background Color|4
+$--color-black: #333333;
+$--color-primary-light-1: mix(
+  $--color-white,
+  $--color-primary,
+  10%
+); /* 53a8ff */
+$--color-primary-light-2: mix(
+  $--color-white,
+  $--color-primary,
+  20%
+); /* 66b1ff */
+$--color-primary-light-3: mix(
+  $--color-white,
+  $--color-primary,
+  30%
+); /* 79bbff */
+$--color-primary-light-4: mix(
+  $--color-white,
+  $--color-primary,
+  40%
+); /* 8cc5ff */
+$--color-primary-light-5: mix(
+  $--color-white,
+  $--color-primary,
+  50%
+); /* a0cfff */
+$--color-primary-light-6: mix(
+  $--color-white,
+  $--color-primary,
+  60%
+); /* b3d8ff */
+$--color-primary-light-7: mix(
+  $--color-white,
+  $--color-primary,
+  70%
+); /* c6e2ff */
+$--color-primary-light-8: mix(
+  $--color-white,
+  $--color-primary,
+  80%
+); /* d9ecff */
+$--color-primary-light-9: mix(
+  $--color-white,
+  $--color-primary,
+  90%
+); /* ecf5ff */
+/// color|1|Functional Color|1
+$--color-success: #67c23a;
+/// color|1|Functional Color|1
+$--color-warning: #FF8D1A;
+/// color|1|Functional Color|1
+$--color-danger: #f56c6c;
+/// color|1|Functional Color|1
+$--color-info: #dddfd4;
+
+$--color-success-light: mix($--color-white, $--color-success, 80%);
+$--color-warning-light: mix($--color-white, $--color-warning, 80%);
+$--color-danger-light: mix($--color-white, $--color-danger, 80%);
+$--color-info-light: mix($--color-white, $--color-info, 80%);
+
+$--color-success-lighter: mix($--color-white, $--color-success, 90%);
+$--color-warning-lighter: mix($--color-white, $--color-warning, 90%);
+$--color-danger-lighter: mix($--color-white, $--color-danger, 90%);
+$--color-info-lighter: mix($--color-white, $--color-info, 90%);
+/// color|1|Font Color|2
+$--color-text-primary: #303133;
+/// color|1|Font Color|2
+$--color-text-regular: #666666;
+/// color|1|Font Color|2
+$--color-text-secondary: #909399;
+/// color|1|Font Color|2
+$--color-text-placeholder: #c0c4cc;
+/// color|1|Border Color|3
+$--border-color-base: #dcdfe6;
+/// color|1|Border Color|3
+$--border-color-light: #e4e7ed;
+/// color|1|Border Color|3
+$--border-color-lighter: #ebeef5;
+/// color|1|Border Color|3
+$--border-color-extra-light: #f2f6fc;
+
+// Background
+/// color|1|Background Color|4
+$--background-color-base: #f5f7fa;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
+
+
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+  'Liberation Mono', 'Courier New', monospace;
+
+$dialog-content-max-height: 70vh;
+
+$app-header-height: 40px;
+$app-router-view-margin: 6px;
+$app-router-view-padding: 20px;
+/* $app-header-height + router-view margin-top & margin-bottom 20px */
+$router-view-offset-height: $app-header-height + $app-router-view-margin * 2;
+
+
+$--color-text-primary: #333333;
+
+// base color
+$blue: #173e43;
+$light-blue: #3a71a8;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;
+
+$--color-blue: #1da1f2 !default;
+$--color-purple: #6c5ce7 !default;
+$--color-green: #0ad300 !default;
+$--color-blue-light: mix($--color-white, $--color-blue, 80%) !default;
+$--color-purple-light: mix($--color-white, $--color-purple, 80%) !default;
+$--color-blue-lighter: mix($--color-white, $--color-blue, 90%) !default;
+$--color-purple-lighter: mix($--color-white, $--color-purple, 90%) !default;
+
+// sidebar
+$menuText: $--color-text-primary;
+$menuActiveText: #ffffff;
+$subMenuActiveText: $--color-primary; // https://github.com/ElemeFE/element/issues/12951
+
+$menuBg: #fff;
+// $menuHover: $--color-primary-light-9;
+$menuHover: #0AB2C1;
+
+$subMenuBg: rgba(0, 0, 0, 0.03);
+$subMenuHover: $--color-primary-light-9;
+
+$sideBarWidth: 130px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+  primary: $--color-primary;
+  primaryLight: $--color-primary-light-8;
+  primaryLighter: $--color-primary-light-9;
+  success: $--color-success;
+  successLight: $--color-success-light;
+  successLighter: $--color-success-lighter;
+  warning: $--color-warning;
+  warningLight: $--color-warning-light;
+  warningLighter: $--color-warning-lighter;
+  danger: $--color-danger;
+  dangerLight: $--color-danger-light;
+  dangerLighter: $--color-danger-lighter;
+  info: $--color-info;
+  infoLight: $--color-info-light;
+  infoLighter: $--color-info-lighter;
+  blue: $--color-blue;
+  blueLight: $--color-blue-light;
+  blueLighter: $--color-blue-lighter;
+  purple: $--color-purple;
+  purpleLight: $--color-purple-light;
+  purpleLighter: $--color-purple-lighter;
+  bottomOffset: $app-router-view-margin + $app-router-view-padding;
+}
\ No newline at end of file