主题配置
本项目提供了高度灵活的自定义选项，允许您根据需求轻松修改各个方面。从整体布局到细节样式，您都可以进行个性化定制，以打造出独特的用户界面和体验。
css 主题变量
主题变量分为 light 和 dark 两套，使用的是同一个 css 变量名称
路径：src/assets/styles/variables.scss
使用示例：
使用主题变量
bash
color: var(--main-color);使用 CSS 变量
bash
color: var(--art-gray-800);
color: rgba(var(--art-gray-800-rgb), 0.6);Light 主题变量
css
:root {
// Theme color
--art-primary: 93, 135, 255;
--art-secondary: 73, 190, 255;
--art-error: 250, 137, 107;
--art-info: 83, 155, 255;
--art-success: 19, 222, 185;
--art-warning: 255, 174, 31;
--art-danger: 255, 77, 79;
// Theme background color
--art-bg-primary: 236, 242, 255;
--art-bg-secondary: 232, 247, 255;
--art-bg-success: 230, 255, 250;
--art-bg-error: 253, 237, 232;
--art-bg-info: 235, 243, 254;
--art-bg-warning: 254, 245, 229;
--art-bg-danger: 253, 237, 232;
--art-hoverColor: 246, 249, 252;
--art-grey100: 242, 246, 250;
--art-grey200: 234, 239, 244;
--art-color: #ffffff;
--art-light: #f9f9f9;
--art-dark: #1e2129;
// Background color | Hover color
--art-text-muted: #99a1b7;
--art-gray-100: #f9f9f9;
--art-gray-100-rgb: 249, 249, 249;
--art-gray-200: #f1f1f4;
--art-gray-200-rgb: 241, 241, 244;
--art-gray-300: #dbdfe9;
--art-gray-300-rgb: 219, 223, 233;
--art-gray-400: #c4cada;
--art-gray-400-rgb: 196, 202, 218;
--art-gray-500: #99a1b7;
--art-gray-500-rgb: 153, 161, 183;
--art-gray-600: #78829d;
--art-gray-600-rgb: 120, 130, 157;
--art-gray-700: #4b5675;
--art-gray-700-rgb: 75, 86, 117;
--art-gray-800: #252f4a;
--art-gray-800-rgb: 37, 47, 74;
--art-gray-900: #071437;
--art-gray-900-rgb: 7, 20, 55;
// Text color
--art-text-muted: #99a1b7;
--art-text-gray-100: #f9f9f9;
--art-text-gray-200: #f1f1f4;
--art-text-gray-300: #dbdfe9;
--art-text-gray-400: #c4cada;
--art-text-gray-500: #99a1b7;
--art-text-gray-600: #78829d;
--art-text-gray-700: #4b5675;
--art-text-gray-800: #252f4a;
--art-text-gray-900: #071437;
// Border
--art-border-color: #eaebf1;
--art-border-dashed-color: #dbdfe9;
--art-root-card-border-color: #f1f1f4;
// Shadow
--art-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
--art-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
--art-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
--art-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
// Root card box、shadow
--art-root-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
--art-root-card-border-color: #f1f1f4;
// Theme background color
--art-bg-color: #fafbfc; // 最底部背景颜色
--art-main-bg-color: #ffffff;
}Dark 主题变量
css
html.dark {
// Theme color
--art-primary: 93, 135, 255;
--art-secondary: 73, 190, 255;
--art-error: 250, 137, 107;
--art-info: 83, 155, 255;
--art-success: 19, 222, 185;
--art-warning: 255, 174, 31;
--art-danger: 255, 77, 79;
// Theme background color
--art-bg-primary: 37, 54, 98;
--art-bg-secondary: 28, 69, 93;
--art-bg-success: 27, 60, 72;
--art-bg-error: 75, 49, 61;
--art-bg-info: 34, 54, 98;
--art-bg-warning: 77, 58, 42;
--art-bg-danger: 100, 49, 61;
--art-hoverColor: 51, 63, 85;
--art-grey100: 51, 63, 85;
--art-grey200: 70, 86, 112;
--art-color: #000000;
--art-light: #1b1c22;
--art-dark: #272a34;
// Background color | Hover color
--art-text-muted: #636674;
--art-gray-100: #1b1c22;
--art-gray-100-rgb: 27, 28, 34;
--art-gray-200: #26272f;
--art-gray-200-rgb: 38, 39, 47;
--art-gray-300: #363843;
--art-gray-300-rgb: 54, 56, 67;
--art-gray-400: #464852;
--art-gray-400-rgb: 70, 72, 82;
--art-gray-500: #636674;
--art-gray-500-rgb: 99, 102, 116;
--art-gray-600: #808290;
--art-gray-600-rgb: 128, 130, 144;
--art-gray-700: #9a9cae;
--art-gray-700-rgb: 154, 156, 174;
--art-gray-800: #b5b7c8;
--art-gray-800-rgb: 181, 183, 200;
--art-gray-900: #f5f5f5;
--art-gray-900-rgb: 245, 245, 245;
// Text color
--art-text-muted: #636674;
--art-text-gray-100: #1b1c22;
--art-text-gray-200: #26272f;
--art-text-gray-300: #363843;
--art-text-gray-400: #464852;
--art-text-gray-500: #636674;
--art-text-gray-600: #808290;
--art-text-gray-700: #9a9cae;
--art-text-gray-800: #b5b7c8;
--art-text-gray-900: #f5f5f5;
// Border
--art-border-color: #26272f;
--art-border-dashed-color: #363843;
--art-root-card-border-color: #1e2027;
// Shadow
--art-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
--art-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
--art-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
--art-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
// Root card box、shadow
--art-root-card-box-shadow: none;
--art-root-card-border-color: #1e2027;
// Theme background color
--art-bg-color: #070707;
--art-main-bg-color: #161618;
}媒体查询-设备尺寸
css
// notebook
$device-notebook: 1600px;
// ipad pro
$device-ipad-pro: 1180px;
// ipad
$device-ipad: 800px;
// ipad-竖屏
$device-ipad-vertical: 900px;
// mobile
$device-phone: 500px;系统主题配置
系统主题包括菜单样式、顶栏、设置中心、系统主色等，你可以在这里修改他们快速配置想要的主题。
配置文件路径：src/config/setting.ts
ts
import { MenuThemeEnum, SystemThemeEnum } from "@/enums/appEnum";
import { MenuThemeType, SystemThemeTypes } from "@/types/store";
// 默认主题色
export const ElementPlusTheme = {
primary: "#5D87FF",
};
// 系统信息
export const SystemInfo = {
// 系统名称
name: "Art Design Pro",
// 登录默认帐号、密码
login: {
username: "admin",
password: "123456",
},
};
// 系统主题样式（light | dark）
export const SystemThemeStyles: SystemThemeTypes = {
[SystemThemeEnum.LIGHT]: {
className: "",
},
[SystemThemeEnum.DARK]: {
className: SystemThemeEnum.DARK,
},
};
// 设置中心主题列表
export const SettingThemeList = [
{
name: "浅色",
theme: SystemThemeEnum.LIGHT,
color: ["#fff", "#fff"],
leftLineColor: "#EDEEF0",
rightLineColor: "#EDEEF0",
},
{
name: "深色",
theme: SystemThemeEnum.DARK,
color: ["#22252A"],
leftLineColor: "#3F4257",
rightLineColor: "#3F4257",
},
{
name: "系统",
theme: SystemThemeEnum.AUTO,
color: ["#fff", "#22252A"],
leftLineColor: "#EDEEF0",
rightLineColor: "#3F4257",
},
];
// 菜单样式
export const ThemeList: MenuThemeType[] = [
{
theme: MenuThemeEnum.DESIGN,
background: "#FCFCFC",
systemNameColor: "var(--art-text-gray-800)",
iconColor: "#545F73",
textColor: "#545F73",
textActiveColor: "#3F8CFF",
iconActiveColor: "#333333",
tabBarBackground: "#FAFBFC",
systemBackground: "#FAFBFC",
leftLineColor: "#EDEEF0",
rightLineColor: "#EDEEF0",
},
{
theme: MenuThemeEnum.DARK,
background: "#191A23",
systemNameColor: "#BABBBD",
iconColor: "#BABBBD",
textColor: "#BABBBD",
textActiveColor: "#FFFFFF",
iconActiveColor: "#FFFFFF",
tabBarBackground: "#FFFFFF",
systemBackground: "#F8F8F8",
leftLineColor: "#3F4257",
rightLineColor: "#EDEEF0",
},
{
theme: MenuThemeEnum.LIGHT,
background: "#ffffff",
systemNameColor: "#68758E",
iconColor: "#68758E",
textColor: "#68758E",
textActiveColor: "#3F8CFF",
iconActiveColor: "#333333",
tabBarBackground: "#FFFFFF",
systemBackground: "#F8F8F8",
leftLineColor: "#EDEEF0",
rightLineColor: "#EDEEF0",
},
];
// dark 模式下 菜单样式
export const DarkMenuStyles: MenuThemeType[] = [
{
theme: MenuThemeEnum.DARK,
background: "#161618",
systemNameColor: "#DDDDDD",
iconColor: "#BABBBD",
textColor: "rgba(#FFFFFF, 0.7)",
textActiveColor: "",
iconActiveColor: "#FFFFFF",
tabBarBackground: "#FFFFFF",
systemBackground: "#F8F8F8",
leftLineColor: "#3F4257",
rightLineColor: "#EDEEF0",
},
];
// 系统主色
export const SystemMainColor = [
"#5D87FF",
"#B48DF3",
"#1D84FF",
"#60C041",
"#38C0FC",
"#F9901F",
"#FF80C8",
];
// 系统设置中心配置
export const SystemSetting = {
defaultMenuWidth: 252, // 菜单展开宽度默认值
defaultCustomRadius: "0.75", // 圆角默认值
};