feat(style): 添加多种主题样式配置

- 移除原有 variables.scss 文件中的硬编码颜色变量 - 新增 variables.default.scss 提供默认主题样式 - 新增 variables.profession.scss 提供专业稳重主题 - 新增 variables.technology3.scss 提供科技现代主题（深空极客） - 新增 variables.technology4.scss 提供科技现代主题（赛博蓝光） - 新增 variables.technology5.scss 提供科技现代主题（钛银脉冲） - 通过 @import 机制实现主题切换功能
2026-01-24 09:53:05 +08:00
parent 1618b9fe25
commit 2b0b81f2a7
6 changed files with 176 additions and 36 deletions
@@ -0,0 +1,35 @@
+// 默认风格
+// base color
+$blue: #324157;
+$light-blue: #3A71A8;
+$red: #C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow: #FEC171;
+$panGreen: #30B08F;
+
+// sidebar 默认
+$menuText: #bfcbd9;
+$menuActiveText: #409EFF;
+$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+$menuBg: #304156;
+$menuHover: #263445;
+$subMenuBg: #1f2d3d;
+$subMenuHover: #001528;
+
+// 左侧菜单栏宽度
+$sideBarWidth: 250px;
+
+// 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;
+}
@@ -0,0 +1,35 @@
+// 专业稳重（一般）
+// base color
+$blue: #3A71A8;
+$light-blue: #5A9BDB;
+$red: #D5657A;
+$pink: #E696A5;
+$green: #4AB7BD;
+$tiffany: #6BCFD5;
+$yellow: #FFD166;
+$panGreen: #4AB7BD;
+
+// sidebar
+$menuText: #C0C9D5;
+$menuActiveText: #FFFFFF;
+$subMenuActiveText: #409EFF;
+$menuBg: #234781;
+$menuHover: #1D3A6B;
+$subMenuBg: #152B4F;
+$subMenuHover: #2D5BA6;
+
+// 左侧菜单栏宽度
+$sideBarWidth: 250px;
+
+// 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;
+}
@@ -1,36 +1 @@
-// base color
-$blue:#324157;
-$light-blue:#3A71A8;
-$red:#C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
-$panGreen: #30B08F;
-
-// sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
-
-$menuBg:#304156;
-$menuHover:#263445;
-
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
-
-// 左侧菜单栏宽度
-$sideBarWidth: 250px;
-
-// 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;
-}
+@import 'variables.technology3';
@@ -0,0 +1,35 @@
+// 科技现代：深空极客（好看）
+// base color
+$blue: #4A90E2;
+$light-blue: #66CCFF;
+$red: #FF6B6B;
+$pink: #FF9E9E;
+$green: #66FFCC;
+$tiffany: #81D8D0;
+$yellow: #FFD93D;
+$panGreen: #66FFCC;
+
+// sidebar
+$menuText: #A0AABF;
+$menuActiveText: #66FFCC;
+$subMenuActiveText: #FFFFFF;
+$menuBg: #0F1520;
+$menuHover: #1C2430;
+$subMenuBg: #1A2332;
+$subMenuHover: #2A3B5C;
+
+// 左侧菜单栏宽度
+$sideBarWidth: 250px;
+
+// 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;
+}
@@ -0,0 +1,35 @@
+// 科技现代：赛博蓝光（好看）
+// base color
+$blue: #4FC3F7;
+$light-blue: #81D4FA;
+$red: #FF8A80;
+$pink: #FFB3B8;
+$green: #80DEEA;
+$tiffany: #81D4FA;
+$yellow: #FFD54F;
+$panGreen: #80DEEA;
+
+// sidebar
+$menuText: #B0B8D0;
+$menuActiveText: #4FC3F7;
+$subMenuActiveText: #FFFFFF;
+$menuBg: #0A0E17;
+$menuHover: #151A2A;
+$subMenuBg: #12182D;
+$subMenuHover: #1E3A8A;
+
+// 左侧菜单栏宽度
+$sideBarWidth: 250px;
+
+// 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;
+}
@@ -0,0 +1,35 @@
+// 科技现代：钛银脉冲（好看）
+// base color
+$blue: #393E7C;
+$light-blue: #4A50A0;
+$red: #E84C5B;
+$pink: #FF7B9C;
+$green: #4AB7BD;
+$tiffany: #64D2FF;
+$yellow: #FFD166;
+$panGreen: #4AB7BD;
+
+// sidebar
+$menuText: #CCCCCC;
+$menuActiveText: #00E5FF;
+$subMenuActiveText: #FFFFFF;
+$menuBg: #1A1A2E;
+$menuHover: #222244;
+$subMenuBg: #252545;
+$subMenuHover: #393E7C;
+
+// 左侧菜单栏宽度
+$sideBarWidth: 250px;
+
+// 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;
+}