diff --git a/cutejava-front/src/api/system/menu.js b/cutejava-front/src/api/system/menu.js
index 8a888e68..7de9fdae 100644
--- a/cutejava-front/src/api/system/menu.js
+++ b/cutejava-front/src/api/system/menu.js
@@ -34,6 +34,13 @@ export function listMenuByPid(pid) {
   })
 }
 
+export function listRoleMenuByPid(pid) {
+  return request({
+    url: 'api/menu/listRoleMenuByPid?pid=' + pid,
+    method: 'post'
+  })
+}
+
 export function searchMenu(params) {
   return request({
     url: 'api/menu/searchMenu',
diff --git a/cutejava-front/src/assets/styles/themes/dark/variables.arcticaurora.scss b/cutejava-front/src/assets/styles/themes/dark/variables.arcticaurora.scss
new file mode 100644
index 00000000..5baacdbe
--- /dev/null
+++ b/cutejava-front/src/assets/styles/themes/dark/variables.arcticaurora.scss
@@ -0,0 +1,100 @@
+// 科技现代：极光幻境（梦幻唯美）
+// base color
+$blue: #6C5CE7;
+$light-blue: #A29BFE;
+$red: #FF7675;
+$pink: #FD79A8;
+$green: #00B894;
+$tiffany: #81ECEC;
+$yellow: #FFEAA7;
+$panGreen: #00B894;
+
+// sidebar
+$menuText: #B2BEC3;
+$menuActiveText: #A29BFE;
+$subMenuActiveText: #FFFFFF;
+$menuBg: #0F0F1F;
+$menuHover: #1A1A35;
+$subMenuBg: #14142A;
+$subMenuHover: #2C2C5A;
+
+// 左侧菜单栏宽度
+$sideBarWidth: 250px;
+
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色（从深靛蓝过渡到深紫蓝色）
+$navbarBgStart: $menuBg;
+$navbarBgEnd: #0A0A18;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(162, 155, 254, 0.18);
+$navbarShadowY: 2px;
+$navbarShadowBlur: 8px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(162, 155, 254, 0.25);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: rgba(162, 155, 254, 0.1);
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: $menuText;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: rgba(162, 155, 254, 0.32);
+
+// 头像边框颜色
+$navbarAvatarBorderColor: rgba(162, 155, 254, 0.3);
+$navbarAvatarHoverBorderColor: $menuActiveText;
+$navbarAvatarHoverGlow: rgba(162, 155, 254, 0.42);
+
+// 下拉箭头颜色
+$navbarCaretColor: $menuText;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: $menuText;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: 0 0 6px rgba(162, 155, 254, 0.45);
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #F0F1F8;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #F0F1F8;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: rgba(162, 155, 254, 0.18);
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $menuActiveText;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: 0 0 6px rgba(162, 155, 254, 0.4);
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: rgba(129, 236, 236, 0.55);
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #F7F8FC;
+
+// 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;
+}
diff --git a/cutejava-front/src/assets/styles/themes/dark/variables.cyberorange.scss b/cutejava-front/src/assets/styles/themes/dark/variables.cyberorange.scss
new file mode 100644
index 00000000..05b129cd
--- /dev/null
+++ b/cutejava-front/src/assets/styles/themes/dark/variables.cyberorange.scss
@@ -0,0 +1,100 @@
+// 赛博橙（热情奔放）
+// base color
+$blue: #FF5722;
+$light-blue: #FF7043;
+$red: #FF1744;
+$pink: #FF4081;
+$green: #00E676;
+$tiffany: #69F0AE;
+$yellow: #FFD600;
+$panGreen: #00E676;
+
+// sidebar
+$menuText: #FFCCBC;
+$menuActiveText: #FF6D00;
+$subMenuActiveText: #FFFFFF;
+$menuBg: #261411;
+$menuHover: #3D1F1A;
+$subMenuBg: #1E0D0B;
+$subMenuHover: #502620;
+
+// 左侧菜单栏宽度
+$sideBarWidth: 250px;
+
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色
+$navbarBgStart: $menuBg;
+$navbarBgEnd: #1A0E0C;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(255, 109, 0, 0.25);
+$navbarShadowY: 2px;
+$navbarShadowBlur: 8px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(255, 109, 0, 0.35);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: rgba(255, 109, 0, 0.12);
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: #FFD0BC;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: rgba(255, 109, 0, 0.4);
+
+// 头像边框颜色
+$navbarAvatarBorderColor: rgba(255, 109, 0, 0.4);
+$navbarAvatarHoverBorderColor: $menuActiveText;
+$navbarAvatarHoverGlow: rgba(255, 109, 0, 0.5);
+
+// 下拉箭头颜色
+$navbarCaretColor: #FFCCBC;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: #FFCCBC;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: 0 0 8px rgba(255, 109, 0, 0.5);
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #FFFFFF;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #FFFFFF;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: rgba(255, 109, 0, 0.18);
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $menuActiveText;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: 0 0 8px rgba(255, 109, 0, 0.5);
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: rgba(255, 64, 129, 0.6);
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #FFFFFF;
+
+// 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;
+}
diff --git a/cutejava-front/src/assets/styles/themes/dark/variables.default.scss b/cutejava-front/src/assets/styles/themes/dark/variables.default.scss
new file mode 100644
index 00000000..5f94e67a
--- /dev/null
+++ b/cutejava-front/src/assets/styles/themes/dark/variables.default.scss
@@ -0,0 +1,100 @@
+// 默认风格
+// 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;
+
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝色）
+$navbarBgStart: $menuBg;
+$navbarBgEnd: #263445;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(0, 21, 41, 0.15);
+$navbarShadowY: 1px;
+$navbarShadowBlur: 4px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(0, 21, 41, 0.2);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: rgba(0, 0, 0, 0.025);
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: #5a5e66;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: transparent;
+
+// 头像边框颜色
+$navbarAvatarBorderColor: transparent;
+$navbarAvatarHoverBorderColor: transparent;
+$navbarAvatarHoverGlow: transparent;
+
+// 下拉箭头颜色
+$navbarCaretColor: #5a5e66;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: $menuText;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: transparent;
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #97a8be;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #97a8be;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: transparent;
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $menuActiveText;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: transparent;
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: #97a8be;
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #97a8be;
+
+// 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;
+}
diff --git a/cutejava-front/src/assets/styles/themes/dark/variables.profession.scss b/cutejava-front/src/assets/styles/themes/dark/variables.profession.scss
new file mode 100644
index 00000000..0dcd31e5
--- /dev/null
+++ b/cutejava-front/src/assets/styles/themes/dark/variables.profession.scss
@@ -0,0 +1,101 @@
+// 专业稳重（一般）
+// 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;
+
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝色）
+$navbarBgStart: $menuBg;
+$navbarBgEnd: #1A3055;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(58, 113, 168, 0.2);
+$navbarShadowY: 2px;
+$navbarShadowBlur: 8px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(90, 155, 219, 0.3);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: rgba(90, 155, 219, 0.15);
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: $menuText;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: rgba(90, 155, 219, 0.3);
+
+// 头像边框颜色
+$navbarAvatarBorderColor: rgba(90, 155, 219, 0.3);
+$navbarAvatarHoverBorderColor: $light-blue;
+$navbarAvatarHoverGlow: rgba(90, 155, 219, 0.4);
+
+// 下拉箭头颜色
+$navbarCaretColor: $menuText;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: $menuText;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: 0 0 6px rgba(90, 155, 219, 0.3);
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #F0F4F8;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #F0F4F8;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: rgba(90, 155, 219, 0.2);
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $light-blue;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: 0 0 6px rgba(90, 155, 219, 0.3);
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: rgba(90, 155, 219, 0.4);
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #F5F8FC;
+
+// 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;
+}
+
diff --git a/cutejava-front/src/assets/styles/themes/dark/variables.solarflare.scss b/cutejava-front/src/assets/styles/themes/dark/variables.solarflare.scss
new file mode 100644
index 00000000..d6d7391d
--- /dev/null
+++ b/cutejava-front/src/assets/styles/themes/dark/variables.solarflare.scss
@@ -0,0 +1,100 @@
+// 科技现代：太阳耀斑（热烈活力）
+// base color
+$blue: #FF6B35;
+$light-blue: #FF8C42;
+$red: #E84C5B;
+$pink: #FF7B9C;
+$green: #FFC857;
+$tiffany: #FF9F45;
+$yellow: #FFD93D;
+$panGreen: #FFC857;
+
+// sidebar
+$menuText: #D4A574;
+$menuActiveText: #FF8C42;
+$subMenuActiveText: #FFFFFF;
+$menuBg: #1A1512;
+$menuHover: #2A221D;
+$subMenuBg: #221E1A;
+$subMenuHover: #3D332C;
+
+// 左侧菜单栏宽度
+$sideBarWidth: 250px;
+
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色（从深棕色过渡到炭黑色）
+$navbarBgStart: $menuBg;
+$navbarBgEnd: #15100D;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(255, 140, 66, 0.2);
+$navbarShadowY: 2px;
+$navbarShadowBlur: 8px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(255, 140, 66, 0.25);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: rgba(255, 140, 66, 0.1);
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: $menuText;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: rgba(255, 140, 66, 0.3);
+
+// 头像边框颜色
+$navbarAvatarBorderColor: rgba(255, 140, 66, 0.3);
+$navbarAvatarHoverBorderColor: $menuActiveText;
+$navbarAvatarHoverGlow: rgba(255, 140, 66, 0.45);
+
+// 下拉箭头颜色
+$navbarCaretColor: $menuText;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: $menuText;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: 0 0 6px rgba(255, 140, 66, 0.4);
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #FDF6EC;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #FDF6EC;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: rgba(255, 140, 66, 0.15);
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $menuActiveText;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: 0 0 6px rgba(255, 140, 66, 0.35);
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: rgba(255, 159, 69, 0.5);
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #FFF9F0;
+
+// 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;
+}
diff --git a/cutejava-front/src/assets/styles/themes/dark/variables.technology3.scss b/cutejava-front/src/assets/styles/themes/dark/variables.technology3.scss
new file mode 100644
index 00000000..69e790ba
--- /dev/null
+++ b/cutejava-front/src/assets/styles/themes/dark/variables.technology3.scss
@@ -0,0 +1,101 @@
+// 科技现代：深空极客（好看）
+// 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;
+
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝色）
+$navbarBgStart: $menuBg;
+$navbarBgEnd: #162035;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(74, 144, 226, 0.15);
+$navbarShadowY: 2px;
+$navbarShadowBlur: 8px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(74, 144, 226, 0.2);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: rgba(74, 144, 226, 0.1);
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: $menuText;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: rgba(102, 255, 204, 0.3);
+
+// 头像边框颜色
+$navbarAvatarBorderColor: rgba(102, 255, 204, 0.3);
+$navbarAvatarHoverBorderColor: $menuActiveText;
+$navbarAvatarHoverGlow: rgba(102, 255, 204, 0.4);
+
+// 下拉箭头颜色
+$navbarCaretColor: $menuText;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: $menuText;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: 0 0 6px $menuActiveText;
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #FFFFFF;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #FFFFFF;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: rgba(102, 255, 204, 0.3);
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $menuActiveText;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: 0 0 6px rgba(102, 255, 204, 0.4);
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: rgba(102, 255, 204, 0.5);
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #FFFFFF;
+
+// 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;
+}
+
diff --git a/cutejava-front/src/assets/styles/themes/dark/variables.technology4.scss b/cutejava-front/src/assets/styles/themes/dark/variables.technology4.scss
new file mode 100644
index 00000000..4b8155f1
--- /dev/null
+++ b/cutejava-front/src/assets/styles/themes/dark/variables.technology4.scss
@@ -0,0 +1,101 @@
+// 科技现代：赛博蓝光（好看）
+// 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;
+
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝紫色）
+$navbarBgStart: $menuBg;
+$navbarBgEnd: #0D1422;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(79, 195, 247, 0.15);
+$navbarShadowY: 2px;
+$navbarShadowBlur: 8px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(79, 195, 247, 0.2);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: rgba(79, 195, 247, 0.1);
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: $menuText;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: rgba(79, 195, 247, 0.3);
+
+// 头像边框颜色
+$navbarAvatarBorderColor: rgba(79, 195, 247, 0.3);
+$navbarAvatarHoverBorderColor: $menuActiveText;
+$navbarAvatarHoverGlow: rgba(79, 195, 247, 0.4);
+
+// 下拉箭头颜色
+$navbarCaretColor: $menuText;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: $menuText;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: 0 0 6px $menuActiveText;
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #FFFFFF;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #FFFFFF;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: rgba(79, 195, 247, 0.2);
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $menuActiveText;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: 0 0 6px rgba(79, 195, 247, 0.4);
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: rgba(79, 195, 247, 0.5);
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #FFFFFF;
+
+// 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;
+}
+
diff --git a/cutejava-front/src/assets/styles/themes/dark/variables.technology5.scss b/cutejava-front/src/assets/styles/themes/dark/variables.technology5.scss
new file mode 100644
index 00000000..d1808b86
--- /dev/null
+++ b/cutejava-front/src/assets/styles/themes/dark/variables.technology5.scss
@@ -0,0 +1,101 @@
+// 科技现代：钛银脉冲（好看）
+// 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;
+
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色（从侧边栏颜色过渡到深紫色）
+$navbarBgStart: $menuBg;
+$navbarBgEnd: #141426;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(0, 229, 255, 0.15);
+$navbarShadowY: 2px;
+$navbarShadowBlur: 8px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(0, 229, 255, 0.2);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: rgba(0, 229, 255, 0.1);
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: $menuText;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: rgba(0, 229, 255, 0.3);
+
+// 头像边框颜色
+$navbarAvatarBorderColor: rgba(0, 229, 255, 0.3);
+$navbarAvatarHoverBorderColor: $menuActiveText;
+$navbarAvatarHoverGlow: rgba(0, 229, 255, 0.4);
+
+// 下拉箭头颜色
+$navbarCaretColor: $menuText;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: $menuText;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: 0 0 6px $menuActiveText;
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #FFFFFF;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #FFFFFF;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: rgba(0, 229, 255, 0.2);
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $menuActiveText;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: 0 0 6px rgba(0, 229, 255, 0.4);
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: rgba(0, 229, 255, 0.5);
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #FFFFFF;
+
+// 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;
+}
+
diff --git a/cutejava-front/src/assets/styles/themes/light/variables.cloudsky.scss b/cutejava-front/src/assets/styles/themes/light/variables.cloudsky.scss
new file mode 100644
index 00000000..7fcc5b01
--- /dev/null
+++ b/cutejava-front/src/assets/styles/themes/light/variables.cloudsky.scss
@@ -0,0 +1,100 @@
+// 清新明亮：天空云朵（清新舒适）
+// base color
+$blue: #5BA3F0;
+$light-blue: #7BC4FF;
+$red: #FF6B8A;
+$pink: #FF8FA8;
+$green: #6BCB77;
+$tiffany: #7FD1AE;
+$yellow: #FFD93D;
+$panGreen: #6BCB77;
+
+// sidebar
+$menuText: #2A3A4A;
+$menuActiveText: #2B7BD9;
+$subMenuActiveText: #2B7BD9;
+$menuBg: #FFFFFF;
+$menuHover: #F0F5FF;
+$subMenuBg: #F8FAFC;
+$subMenuHover: #E1E8F5;
+
+// 左侧菜单栏宽度
+$sideBarWidth: 250px;
+
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色（从白色过渡到浅蓝）
+$navbarBgStart: #FFFFFF;
+$navbarBgEnd: #F5F9FF;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(91, 163, 240, 0.15);
+$navbarShadowY: 1px;
+$navbarShadowBlur: 4px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(91, 163, 240, 0.2);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: #F0F5FF;
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: #5A6C7D;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: rgba(91, 163, 240, 0.2);
+
+// 头像边框颜色
+$navbarAvatarBorderColor: rgba(91, 163, 240, 0.25);
+$navbarAvatarHoverBorderColor: $menuActiveText;
+$navbarAvatarHoverGlow: rgba(91, 163, 240, 0.3);
+
+// 下拉箭头颜色
+$navbarCaretColor: #5A6C7D;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: #5A6C7D;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: 0 0 4px rgba(91, 163, 240, 0.3);
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #3A4A5A;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #3A4A5A;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: transparent;
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $menuActiveText;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: transparent;
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: rgba(91, 163, 240, 0.4);
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #2A3A4A;
+
+// 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;
+}
diff --git a/cutejava-front/src/assets/styles/themes/light/variables.mint.scss b/cutejava-front/src/assets/styles/themes/light/variables.mint.scss
new file mode 100644
index 00000000..8192074d
--- /dev/null
+++ b/cutejava-front/src/assets/styles/themes/light/variables.mint.scss
@@ -0,0 +1,100 @@
+// 清新明亮：薄荷清新（清爽自然）
+// base color
+$blue: #5F9EA0;
+$light-blue: #7DD3C0;
+$red: #FF7F7F;
+$pink: #FFA8A8;
+$green: #95E1D3;
+$tiffany: #B8F2E6;
+$yellow: #FFEAA7;
+$panGreen: #95E1D3;
+
+// sidebar
+$menuText: #3A4A5A;
+$menuActiveText: #5F9EA0;
+$subMenuActiveText: #5F9EA0;
+$menuBg: #FAFEFC;
+$menuHover: #F0FAF7;
+$subMenuBg: #FCFDFB;
+$subMenuHover: #E5F5F0;
+
+// 左侧菜单栏宽度
+$sideBarWidth: 250px;
+
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色（从白色过渡到淡薄荷色）
+$navbarBgStart: #FFFFFF;
+$navbarBgEnd: #F5FFFA;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(95, 158, 160, 0.12);
+$navbarShadowY: 1px;
+$navbarShadowBlur: 4px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(95, 158, 160, 0.15);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: #F0FAF7;
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: #5A6B7A;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: rgba(95, 158, 160, 0.2);
+
+// 头像边框颜色
+$navbarAvatarBorderColor: rgba(95, 158, 160, 0.25);
+$navbarAvatarHoverBorderColor: $menuActiveText;
+$navbarAvatarHoverGlow: rgba(95, 158, 160, 0.3);
+
+// 下拉箭头颜色
+$navbarCaretColor: #5A6B7A;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: #5A6B7A;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: 0 0 4px rgba(95, 158, 160, 0.3);
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #3A4A5A;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #3A4A5A;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: transparent;
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $menuActiveText;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: transparent;
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: rgba(90, 107, 122, 0.4);
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #2A3A4A;
+
+// 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;
+}
diff --git a/cutejava-front/src/assets/styles/themes/light/variables.oceanbreeze.scss b/cutejava-front/src/assets/styles/themes/light/variables.oceanbreeze.scss
new file mode 100644
index 00000000..27469e15
--- /dev/null
+++ b/cutejava-front/src/assets/styles/themes/light/variables.oceanbreeze.scss
@@ -0,0 +1,100 @@
+// 清新明亮：海风浅蓝（宁静舒适）
+// base color
+$blue: #4A90E2;
+$light-blue: #6BB3FF;
+$red: #FF7F7F;
+$pink: #FFA3A3;
+$green: #7DD3C0;
+$tiffany: #9CE6DC;
+$yellow: #FFEAA7;
+$panGreen: #7DD3C0;
+
+// sidebar
+$menuText: #3A4A5A;
+$menuActiveText: #4A90E2;
+$subMenuActiveText: #4A90E2;
+$menuBg: #F5FAFF;
+$menuHover: #EBF4FF;
+$subMenuBg: #F8FCFF;
+$subMenuHover: #D9EBFF;
+
+// 左侧菜单栏宽度
+$sideBarWidth: 250px;
+
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色（从白色过渡到浅蓝色）
+$navbarBgStart: #FFFFFF;
+$navbarBgEnd: #F5FAFF;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(74, 144, 226, 0.12);
+$navbarShadowY: 1px;
+$navbarShadowBlur: 4px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(74, 144, 226, 0.15);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: #EBF4FF;
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: #5A6C7D;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: rgba(74, 144, 226, 0.2);
+
+// 头像边框颜色
+$navbarAvatarBorderColor: rgba(74, 144, 226, 0.25);
+$navbarAvatarHoverBorderColor: $menuActiveText;
+$navbarAvatarHoverGlow: rgba(74, 144, 226, 0.3);
+
+// 下拉箭头颜色
+$navbarCaretColor: #5A6C7D;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: #5A6C7D;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: 0 0 4px rgba(74, 144, 226, 0.3);
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #3A4A5A;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #3A4A5A;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: transparent;
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $menuActiveText;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: transparent;
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: rgba(90, 108, 125, 0.4);
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #2A3A4A;
+
+// 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;
+}
diff --git a/cutejava-front/src/assets/styles/variables.default.scss b/cutejava-front/src/assets/styles/variables.default.scss
deleted file mode 100644
index ff2de1c5..00000000
--- a/cutejava-front/src/assets/styles/variables.default.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-// 默认风格
-// 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;
-}
diff --git a/cutejava-front/src/assets/styles/variables.profession.scss b/cutejava-front/src/assets/styles/variables.profession.scss
deleted file mode 100644
index 2069499d..00000000
--- a/cutejava-front/src/assets/styles/variables.profession.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-// 专业稳重（一般）
-// 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;
-}
diff --git a/cutejava-front/src/assets/styles/variables.scss b/cutejava-front/src/assets/styles/variables.scss
index 376d5718..66b3e056 100644
--- a/cutejava-front/src/assets/styles/variables.scss
+++ b/cutejava-front/src/assets/styles/variables.scss
@@ -1 +1 @@
-@import 'variables.technology3';
+@import 'themes/light/variables.cloudsky';
diff --git a/cutejava-front/src/assets/styles/variables.technology3.scss b/cutejava-front/src/assets/styles/variables.technology3.scss
deleted file mode 100644
index d3285335..00000000
--- a/cutejava-front/src/assets/styles/variables.technology3.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-// 科技现代：深空极客（好看）
-// 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;
-}
diff --git a/cutejava-front/src/assets/styles/variables.technology4.scss b/cutejava-front/src/assets/styles/variables.technology4.scss
deleted file mode 100644
index 76379d3d..00000000
--- a/cutejava-front/src/assets/styles/variables.technology4.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-// 科技现代：赛博蓝光（好看）
-// 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;
-}
diff --git a/cutejava-front/src/assets/styles/variables.technology5.scss b/cutejava-front/src/assets/styles/variables.technology5.scss
deleted file mode 100644
index 47515f36..00000000
--- a/cutejava-front/src/assets/styles/variables.technology5.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-// 科技现代：钛银脉冲（好看）
-// 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;
-}
diff --git a/cutejava-front/src/components/Breadcrumb/index.vue b/cutejava-front/src/components/Breadcrumb/index.vue
index 0f47a93e..c0de9a01 100644
--- a/cutejava-front/src/components/Breadcrumb/index.vue
+++ b/cutejava-front/src/components/Breadcrumb/index.vue
@@ -70,15 +70,57 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/assets/styles/variables";
+
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
   line-height: 50px;
   margin-left: 8px;
 
+  ::v-deep .el-breadcrumb__item {
+    .el-breadcrumb__inner {
+      color: $breadcrumbTextColor !important;
+      font-weight: 500;
+      transition: all 0.3s ease;
+
+      &.is-link {
+        color: $breadcrumbLinkColor !important;
+        text-shadow: 0 0 4px $breadcrumbTextGlow;
+
+        &:hover {
+          color: $breadcrumbHoverColor !important;
+          filter: drop-shadow($breadcrumbHoverGlow);
+        }
+      }
+
+      &:hover {
+        color: $breadcrumbHoverColor !important;
+        filter: drop-shadow($breadcrumbHoverGlow);
+      }
+    }
+
+    .el-breadcrumb__separator {
+      color: $breadcrumbSeparatorColor;
+    }
+  }
+
+  a {
+    color: $breadcrumbLinkColor !important;
+    font-weight: 500;
+    text-shadow: 0 0 4px $breadcrumbTextGlow;
+
+    &:hover {
+      color: $breadcrumbHoverColor !important;
+      filter: drop-shadow($breadcrumbHoverGlow);
+    }
+  }
+
   .no-redirect {
-    color: #97a8be;
+    color: $breadcrumbNoRedirectColor !important;
     cursor: text;
+    font-weight: 500;
+    text-shadow: 0 0 4px $breadcrumbTextGlow;
   }
 }
 </style>
diff --git a/cutejava-front/src/components/Hamburger/index.vue b/cutejava-front/src/components/Hamburger/index.vue
index 8c772469..d88021d8 100644
--- a/cutejava-front/src/components/Hamburger/index.vue
+++ b/cutejava-front/src/components/Hamburger/index.vue
@@ -32,15 +32,25 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "~@/assets/styles/variables";
+
 .hamburger {
   display: inline-block;
   vertical-align: middle;
   width: 20px;
   height: 20px;
+  fill: $hamburgerColor;
+  transition: all 0.3s ease;
 }
 
 .hamburger.is-active {
   transform: rotate(180deg);
+  fill: $hamburgerActiveColor;
+  filter: drop-shadow($hamburgerGlow);
+}
+
+.hamburger:hover {
+  fill: $hamburgerActiveColor;
 }
 </style>
diff --git a/cutejava-front/src/layout/components/Navbar.vue b/cutejava-front/src/layout/components/Navbar.vue
index 828ad9bd..db6e12c5 100644
--- a/cutejava-front/src/layout/components/Navbar.vue
+++ b/cutejava-front/src/layout/components/Navbar.vue
@@ -114,19 +114,25 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  background: linear-gradient(90deg, $navbarBgStart 0%, $navbarBgEnd 100%);
+  box-shadow: 0 $navbarShadowY $navbarShadowBlur $navbarShadowSpread $navbarShadowColor;
+  border-bottom: $navbarBorderWidth solid $navbarBorderColor;
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
+    transition: all 0.3s ease;
     -webkit-tap-highlight-color:transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: $navbarHoverBg;
+
+      .hamburger {
+        color: $menuActiveText;
+        filter: drop-shadow($hamburgerGlow);
+      }
     }
   }
 
@@ -153,15 +159,17 @@ export default {
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
+      color: $menuText;
       vertical-align: text-bottom;
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: all 0.3s ease;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: $navbarHoverBg;
+          color: $navbarRightMenuHoverColor;
+          filter: drop-shadow(0 0 8px $navbarRightMenuHoverGlow);
         }
       }
     }
@@ -178,6 +186,13 @@ export default {
           width: 40px;
           height: 40px;
           border-radius: 10px;
+          border: 2px solid $navbarAvatarBorderColor;
+          transition: all 0.3s ease;
+
+          &:hover {
+            border-color: $navbarAvatarHoverBorderColor;
+            box-shadow: 0 0 15px $navbarAvatarHoverGlow;
+          }
         }
 
         .el-icon-caret-bottom {
@@ -186,6 +201,12 @@ export default {
           right: -20px;
           top: 25px;
           font-size: 12px;
+          color: $navbarCaretColor;
+          transition: all 0.3s ease;
+
+          &:hover {
+            color: $menuActiveText;
+          }
         }
       }
     }
diff --git a/cutejava-front/src/views/system/role/index.vue b/cutejava-front/src/views/system/role/index.vue
index 5fcca48f..044b2c3c 100644
--- a/cutejava-front/src/views/system/role/index.vue
+++ b/cutejava-front/src/views/system/role/index.vue
@@ -68,7 +68,7 @@
     </el-dialog>
     <el-row :gutter="15">
       <!--角色管理-->
-      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
+      <el-col span="18" style="margin-bottom: 10px">
         <el-card class="box-card" shadow="never">
           <div slot="header" class="clearfix">
             <span class="role-span">角色列表</span>
@@ -113,7 +113,7 @@
         </el-card>
       </el-col>
       <!-- 菜单授权 -->
-      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
+      <el-col span="6">
         <el-card class="box-card" shadow="never">
           <div slot="header" class="clearfix">
             <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
@@ -153,7 +153,7 @@
 <script>
 import crudRoles from '@/api/system/role'
 import { searchDept, searchDeptTree } from '@/api/system/dept'
-import { listChildMenuSetByMenuId, listMenuByPid } from '@/api/system/menu'
+import { listChildMenuSetByMenuId, listRoleMenuByPid } from '@/api/system/menu'
 import CRUD, { crud, form, header, presenter } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
@@ -197,7 +197,7 @@ export default {
   methods: {
     getMenuDatas(node, resolve) {
       setTimeout(() => {
-        listMenuByPid(node.data.id ? node.data.id : 0).then(res => {
+        listRoleMenuByPid(node.data.id ? node.data.id : 0).then(res => {
           resolve(res)
         })
       }, 100)
diff --git a/cutejava/cutejava-module-system/src/main/java/cn/odboy/system/controller/SystemMenuController.java b/cutejava/cutejava-module-system/src/main/java/cn/odboy/system/controller/SystemMenuController.java
index 18bfd7ee..b0f02ee7 100644
--- a/cutejava/cutejava-module-system/src/main/java/cn/odboy/system/controller/SystemMenuController.java
+++ b/cutejava/cutejava-module-system/src/main/java/cn/odboy/system/controller/SystemMenuController.java
@@ -72,6 +72,14 @@ public class SystemMenuController {
     return ResponseEntity.ok(systemMenuTbs);
   }
 
+  @ApiOperation("返回全部的菜单")
+  @PostMapping(value = "/listRoleMenuByPid")
+  @PreAuthorize("@el.check('menu:list','roles:list')")
+  public ResponseEntity<List<SystemMenuTb>> listRoleMenuByPid(@RequestParam Long pid) {
+    List<SystemMenuTb> systemMenuTbs = systemMenuService.listMenuByPid(pid, true);
+    return ResponseEntity.ok(systemMenuTbs);
+  }
+
   @ApiOperation("根据菜单ID返回所有子节点ID, 包含自身ID")
   @PostMapping(value = "/listChildMenuSetByMenuId")
   @PreAuthorize("@el.check('menu:list','roles:list')")