feat(styles): 更新主题样式变量配置
- 将默认主题从 technology5 替换为 solarflare 主题 - 新增 arcticaurora 主题样式变量文件 - 新增 solarflare 主题样式变量文件，包含全新的配色方案 - 更新导航栏、侧边栏、面包屑等组件的样式变量 - 添加新的颜色配置和渐变效果支持
This commit is contained in:
@@ -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;
|
||||
}
|
||||
@@ -1 +1 @@
|
||||
@import 'variables.technology5';
|
||||
@import 'variables.solarflare';
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user