diff --git a/cutejava-front/src/assets/styles/variables.profession.scss b/cutejava-front/src/assets/styles/variables.profession.scss
index 2069499d..0dcd31e5 100644
--- a/cutejava-front/src/assets/styles/variables.profession.scss
+++ b/cutejava-front/src/assets/styles/variables.profession.scss
@@ -21,6 +21,71 @@ $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 {
@@ -33,3 +98,4 @@ $sideBarWidth: 250px;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
 }
+
diff --git a/cutejava-front/src/assets/styles/variables.scss b/cutejava-front/src/assets/styles/variables.scss
index 376d5718..88112e17 100644
--- a/cutejava-front/src/assets/styles/variables.scss
+++ b/cutejava-front/src/assets/styles/variables.scss
@@ -1 +1 @@
-@import 'variables.technology3';
+@import 'variables.technology5';
diff --git a/cutejava-front/src/assets/styles/variables.technology4.scss b/cutejava-front/src/assets/styles/variables.technology4.scss
index 76379d3d..4b8155f1 100644
--- a/cutejava-front/src/assets/styles/variables.technology4.scss
+++ b/cutejava-front/src/assets/styles/variables.technology4.scss
@@ -21,6 +21,71 @@ $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 {
@@ -33,3 +98,4 @@ $sideBarWidth: 250px;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
 }
+
diff --git a/cutejava-front/src/assets/styles/variables.technology5.scss b/cutejava-front/src/assets/styles/variables.technology5.scss
index 47515f36..d1808b86 100644
--- a/cutejava-front/src/assets/styles/variables.technology5.scss
+++ b/cutejava-front/src/assets/styles/variables.technology5.scss
@@ -21,8 +21,73 @@ $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
+// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass
 :export {
   menuText: $menuText;
   menuActiveText: $menuActiveText;
@@ -33,3 +98,4 @@ $sideBarWidth: 250px;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
 }
+