gongyeyitiji4-web/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;


  --hj-red-3: #ff4d4d;
  --hj-orange-3: #fa8c16;
  --hj-yellow-3: #fadb14;
  --hj-green-3: #a0d911;
  --hj-cyan-3: #00b96b;
  --hj-blue-3: #096dd9;
  --hj-purple-3: #531dab;
  --hj-white-3: #d9d9d9;
  --hj-black-3: #303030;

  --hj-red-2: #ff7a7a;
  --hj-orange-2: #faa31a;
  --hj-yellow-2: #ffe518;
  --hj-green-2: #b2e440;
  --hj-cyan-2: #00d87a;
  --hj-blue-2: #0a85d8;
  --hj-purple-2: #622ebc;

  --hj-red-1: #ffb2b2;
  --hj-orange-1: #fbad58;
  --hj-yellow-1: #fff168;
  --hj-green-1: #c8e677;
  --hj-cyan-1: #00ec9a;
  --hj-blue-1: #1098d8;
  --hj-purple-1: #7339b8;

  --hj-white-1: #ffffff;
  --hj-white-2: #f0f0f0;

  --hj-black-1: #1a1a1a;
  --hj-black-2: #303030;

  --hj-bg: #fff;
}

/** 暗黑主题 */
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%);

  --hj-red-3: #822c2c;
  --hj-orange-3: #8a590f;
  --hj-yellow-3: #8a7000;
  --hj-green-3: #426e32;
  --hj-cyan-3: #005f43;
  --hj-blue-3: #003d7a;
  --hj-purple-3: #3b005c;
  --hj-white-3: #7a7a7a;
  --hj-black-3: #1a1a1a;

  --hj-red-2: #a14141;
  --hj-orange-2: #b26a10;
  --hj-yellow-2: #b28200;
  --hj-green-2: #57854a;
  --hj-cyan-2: #007655;
  --hj-blue-2: #005199;
  --hj-purple-2: #4b0072;

  --hj-red-1: #c15a5a;
  --hj-orange-1: #c27a10;
  --hj-yellow-1: #c29000;
  --hj-green-1: #68995c;
  --hj-cyan-1: #008e6a;
  --hj-blue-1: #006ac2;
  --hj-purple-1: #5a178b;

  --hj-white-1: #f0f0f0;
  --hj-white-2: #d9d9d9;

  --hj-black-1: #303030;
  --hj-black-2: #424242;

  --hj-bg: #000;
}

$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: 50px; // 导航栏高度
$tags-view-height: 34px; // TagsView 高度

//二级页面上面的header的高度
$child-header-height: 116px;

$hj-bg: var(--hj-bg);
$hj-red-1: var(--hj-red-1);
$hj-orange-1: var(--hj-orange-1);
$hj-yellow-1: var(--hj-yellow-1);
$hj-green-1: var(--hj-green-1);
$hj-cyan-1: var(--hj-cyan-1);
$hj-blue-1: var(--hj-blue-1);
$hj-purple-1: var(--hj-purple-1);
$hj-white-1: var(--hj-white-1);
$hj-black-1: var(--hj-black-1);

$hj-red-2: var(--hj-red-2);
$hj-orange-2: var(--hj-orange-2);
$hj-yellow-2: var(--hj-yellow-2);
$hj-green-2: var(--hj-green-2);
$hj-cyan-2: var(--hj-cyan-2);
$hj-blue-2: var(--hj-blue-2);
$hj-purple-2: var(--hj-purple-2);
$hj-white-2: var(--hj-white-2);
$hj-black-2: var(--hj-black-2);

$hj-red-3: var(--hj-red-3);
$hj-orange-3: var(--hj-orange-3);
$hj-yellow-3: var(--hj-yellow-3);
$hj-green-3: var(--hj-green-3);
$hj-cyan-3: var(--hj-cyan-3);
$hj-blue-3: var(--hj-blue-3);
$hj-purple-3: var(--hj-purple-3);
$hj-white-3: var(--hj-white-3);
$hj-black-3: var(--hj-black-3);