diff --git a/cutejava-front/src/assets/styles/variables.arcticaurora.scss b/cutejava-front/src/assets/styles/variables.arcticaurora.scss
new file mode 100644
index 00000000..5baacdbe
--- /dev/null
+++ b/cutejava-front/src/assets/styles/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/variables.scss b/cutejava-front/src/assets/styles/variables.scss
index 88112e17..7653d280 100644
--- a/cutejava-front/src/assets/styles/variables.scss
+++ b/cutejava-front/src/assets/styles/variables.scss
@@ -1 +1 @@
-@import 'variables.technology5';
+@import 'variables.solarflare';
diff --git a/cutejava-front/src/assets/styles/variables.solarflare.scss b/cutejava-front/src/assets/styles/variables.solarflare.scss
new file mode 100644
index 00000000..d6d7391d
--- /dev/null
+++ b/cutejava-front/src/assets/styles/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;
+}