JG-CLIENT-TEMP/src/styles/variables.scss

/** 全局SCSS变量 */

:root {
  --menu-background: #304156;
  --menu-text: #bfcbd9;
  --menu-active-text: var(--el-menu-active-color);
  --menu-hover: #263445;
  --sidebar-logo-background: #2d3748;
  --el-mask-color: #f1f3f5;
  //ohos 颜色样式更改
  --ohos-bg: #000;
  --ohos-text: #ffffff;
  --ohos-area-bg: #191919;
  --ohos-box-bg: #ffffff20;
  --ohos-area-active-bg: #e5e5e5;
  --ohos-text-green: #3d0158;
}

/** 暗黑主题 */
html.dark {
  --menu-background: var(--el-bg-color-overlay);
  --menu-text: #fff;
  --menu-active-text: var(--el-menu-active-color);
  --menu-hover: rgb(0 0 0 / 20%);
  --sidebar-logo-background: rgb(0 0 0 / 20%);
}

$menu-background: var(--menu-background); // 菜单背景色
$menu-text: var(--menu-text); // 菜单文字颜色
$menu-active-text: var(--menu-active-text); // 菜单激活文字颜色
$menu-hover: var(--menu-hover); // 菜单悬停背景色
$sidebar-logo-background: var(--sidebar-logo-background); // 侧边栏 Logo 背景色

$sidebar-width: 210px; // 侧边栏宽度
$sidebar-width-collapsed: 54px; // 侧边栏收缩宽度
$navbar-height: 80px; // 导航栏高度
$tags-view-height: 34px; // TagsView 高度

$animation-duration: 1.5s;
$select-hover: #0a59f7; //选中主题色
$font-default-black: #303030; //字体默认黑
$font-default-60: #00000060; //黑字体透明60%
$font-default-80: #00000080;
$font-default-90: #00000080;
//字体大小
$f10: 10px;
$f12: 12px;
$f14: 14px;
$f16: 16px;
$f20: 20px;
$f24: 24px;
$f38: 38px;
$f60: 60px;

//字重
$Medium: 500;

//间隔距离
$p5: 5px;
$p10: 10px;
$p15: 15px;
$p20: 20px;

@mixin flex() {
  display: flex;
  justify-content: center;
  align-items: center;
}