diff --git a/cutejava-front/src/assets/styles/variables.arcticaurora.scss b/cutejava-front/src/assets/styles/themes/dark/variables.arcticaurora.scss
similarity index 100%
rename from cutejava-front/src/assets/styles/variables.arcticaurora.scss
rename to cutejava-front/src/assets/styles/themes/dark/variables.arcticaurora.scss
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/variables.profession.scss b/cutejava-front/src/assets/styles/themes/dark/variables.profession.scss
similarity index 100%
rename from cutejava-front/src/assets/styles/variables.profession.scss
rename to cutejava-front/src/assets/styles/themes/dark/variables.profession.scss
diff --git a/cutejava-front/src/assets/styles/variables.solarflare.scss b/cutejava-front/src/assets/styles/themes/dark/variables.solarflare.scss
similarity index 100%
rename from cutejava-front/src/assets/styles/variables.solarflare.scss
rename to cutejava-front/src/assets/styles/themes/dark/variables.solarflare.scss
diff --git a/cutejava-front/src/assets/styles/variables.technology3.scss b/cutejava-front/src/assets/styles/themes/dark/variables.technology3.scss
similarity index 100%
rename from cutejava-front/src/assets/styles/variables.technology3.scss
rename to cutejava-front/src/assets/styles/themes/dark/variables.technology3.scss
diff --git a/cutejava-front/src/assets/styles/variables.technology4.scss b/cutejava-front/src/assets/styles/themes/dark/variables.technology4.scss
similarity index 100%
rename from cutejava-front/src/assets/styles/variables.technology4.scss
rename to cutejava-front/src/assets/styles/themes/dark/variables.technology4.scss
diff --git a/cutejava-front/src/assets/styles/variables.technology5.scss b/cutejava-front/src/assets/styles/themes/dark/variables.technology5.scss
similarity index 100%
rename from cutejava-front/src/assets/styles/variables.technology5.scss
rename to cutejava-front/src/assets/styles/themes/dark/variables.technology5.scss
diff --git a/cutejava-front/src/assets/styles/variables.cloudsky.scss b/cutejava-front/src/assets/styles/themes/light/variables.cloudsky.scss
similarity index 100%
rename from cutejava-front/src/assets/styles/variables.cloudsky.scss
rename to cutejava-front/src/assets/styles/themes/light/variables.cloudsky.scss
diff --git a/cutejava-front/src/assets/styles/variables.mint.scss b/cutejava-front/src/assets/styles/themes/light/variables.mint.scss
similarity index 100%
rename from cutejava-front/src/assets/styles/variables.mint.scss
rename to cutejava-front/src/assets/styles/themes/light/variables.mint.scss
diff --git a/cutejava-front/src/assets/styles/variables.oceanbreeze.scss b/cutejava-front/src/assets/styles/themes/light/variables.oceanbreeze.scss
similarity index 100%
rename from cutejava-front/src/assets/styles/variables.oceanbreeze.scss
rename to cutejava-front/src/assets/styles/themes/light/variables.oceanbreeze.scss
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.scss b/cutejava-front/src/assets/styles/variables.scss
index b5ab3709..cb693ef8 100644
--- a/cutejava-front/src/assets/styles/variables.scss
+++ b/cutejava-front/src/assets/styles/variables.scss
@@ -1 +1 @@
-@import 'variables.cloudsky';
+@import 'themes/light/variables.oceanbreeze';