Theme Configuration
This project provides highly flexible customization options, allowing you to easily modify various aspects according to your needs. From overall layout to detailed styles, you can personalize everything to create a unique user interface and experience.
CSS Theme Variables
CSS variables include theme colors, background colors, text colors, border colors, shadows, and media queries (device sizes). These variables can adapt to both Light and Dark modes.
Path: src/assets/styles/variables.scss
Usage Examples:
bash
# Text
color: var(--art-gray-100);
color: var(--art-gray-900);
# Border
border: 1px solid var(--art-border-color);
border: 1px solid var(--art-border-dashed-color);
# Background color (white | black)
background-color: var(--art-main-bg-color);
# Shadow
box-shadow: var(--art-box-shadow);
box-shadow: var(--art-box-shadow-xs);
box-shadow: var(--art-box-shadow-sm);
box-shadow: var(--art-box-shadow-lg);If you find the colors too dark, you can use the -rgb variables combined with rgba() to adjust them
css
color: rgba(var(--art-gray-800-rgb), 0.6);Theme Colors
You can use var(--main-color) for the opaque primary theme color. Additionally, 9 different levels of theme colors with varying transparency are provided for flexible application in different scenarios:
bash
# Opaque primary color
color: var(--main-color);
# Theme background colors with different transparency levels
background-color: var(--el-color-primary-light-1); # Darkest
background-color: var(--el-color-primary-light-9); # LightestLight Theme Variables
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; // Bottom background color
--art-main-bg-color: #ffffff;
}Dark Theme Variables
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;
}Media Queries - Device Sizes
css
// notebook
$device-notebook: 1600px;
// ipad pro
$device-ipad-pro: 1180px;
// ipad
$device-ipad: 800px;
// ipad - vertical
$device-ipad-vertical: 900px;
// mobile
$device-phone: 500px;