From a1f7104959fcefe9940f849456cda934858c5733 Mon Sep 17 00:00:00 2001
From: zhangnuoyan <9354631+zhangnuoyan@user.noreply.gitee.com>
Date: 星期六, 24 八月 2024 14:53:17 +0800
Subject: [PATCH] feat: 增加定制配色模式
---
src/styles/theme.scss | 247 ++++++++++++++++++++++++++++++
package-lock.json | 27 ++
package.json | 182 +++++++++++-----------
src/hooks/useTheme.ts | 7
src/layout/components/app-header-right/index.vue | 1
src/main.ts | 3
6 files changed, 366 insertions(+), 101 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 6839e35..3d95361 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@arco-design/web-vue": "latest",
+ "@arco-themes/vue-beisike": "^0.0.1",
"@easyfe/admin-component": "latest",
"@easyfe/web-request": "^1.0.1",
"@skjnldsv/vue-plyr": "^7.4.0",
@@ -131,9 +132,9 @@
}
},
"node_modules/@arco-design/web-vue": {
- "version": "2.56.0",
- "resolved": "https://registry.npmmirror.com/@arco-design/web-vue/-/web-vue-2.56.0.tgz",
- "integrity": "sha512-LsrTE1vL54a/DVQCZ4c2F5LDA1r2mcWF2AHrM+fKEi5hzE63/awZVIOQ6P8yGaYRAP9eqUNj60uNI1Jz0UvGlA==",
+ "version": "2.56.1",
+ "resolved": "https://registry.npmjs.org/@arco-design/web-vue/-/web-vue-2.56.1.tgz",
+ "integrity": "sha512-RHIG7DXpCJrpxCKXdxZMzsGvMPCUott57soXW3aHJfxOcf+I2rdX8/UTAt2ka5MyRLUZ4B90B1LKyUgLChGklg==",
"dependencies": {
"@arco-design/color": "^0.4.0",
"b-tween": "^0.3.3",
@@ -167,6 +168,14 @@
"resolved": "https://registry.npmmirror.com/@types/node/-/node-16.18.105.tgz",
"integrity": "sha512-w2d0Z9yMk07uH3+Cx0N8lqFyi3yjXZxlbYappPj+AsOlT02OyxyiuNoNHdGt6EuiSm8Wtgp2YV7vWg+GMFrvFA==",
"dev": true
+ },
+ "node_modules/@arco-themes/vue-beisike": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/@arco-themes/vue-beisike/-/vue-beisike-0.0.1.tgz",
+ "integrity": "sha512-XktcJ0do8YkyadwosoEdIJEDqJfKYtwc1o8phNH8EIfmve3tLj/rp4oJIfHMZTOnYIEmijiq/vGOrVSrIN5Lqw==",
+ "peerDependencies": {
+ "@arco-design/web-vue": "^2.56.1"
+ }
},
"node_modules/@arco-themes/vue-easyfe": {
"version": "0.0.5",
@@ -13700,9 +13709,9 @@
}
},
"@arco-design/web-vue": {
- "version": "2.56.0",
- "resolved": "https://registry.npmmirror.com/@arco-design/web-vue/-/web-vue-2.56.0.tgz",
- "integrity": "sha512-LsrTE1vL54a/DVQCZ4c2F5LDA1r2mcWF2AHrM+fKEi5hzE63/awZVIOQ6P8yGaYRAP9eqUNj60uNI1Jz0UvGlA==",
+ "version": "2.56.1",
+ "resolved": "https://registry.npmjs.org/@arco-design/web-vue/-/web-vue-2.56.1.tgz",
+ "integrity": "sha512-RHIG7DXpCJrpxCKXdxZMzsGvMPCUott57soXW3aHJfxOcf+I2rdX8/UTAt2ka5MyRLUZ4B90B1LKyUgLChGklg==",
"requires": {
"@arco-design/color": "^0.4.0",
"b-tween": "^0.3.3",
@@ -13736,6 +13745,12 @@
}
}
},
+ "@arco-themes/vue-beisike": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/@arco-themes/vue-beisike/-/vue-beisike-0.0.1.tgz",
+ "integrity": "sha512-XktcJ0do8YkyadwosoEdIJEDqJfKYtwc1o8phNH8EIfmve3tLj/rp4oJIfHMZTOnYIEmijiq/vGOrVSrIN5Lqw==",
+ "requires": {}
+ },
"@arco-themes/vue-easyfe": {
"version": "0.0.5",
"resolved": "https://registry.npmmirror.com/@arco-themes/vue-easyfe/-/vue-easyfe-0.0.5.tgz",
diff --git a/package.json b/package.json
index 2acf358..cc1c3d9 100644
--- a/package.json
+++ b/package.json
@@ -1,93 +1,93 @@
{
- "name": "project-template",
- "version": "0.0.1",
- "scripts": {
- "start": "vite --mode development",
- "build": "npm run build:prod",
- "build:test": "vite build --mode test",
- "build:prod": "vite build --mode production",
- "lint": "eslint --fix \"src/**/*.{js,vue,ts}\"",
- "lint:error": "eslint --fix --quiet \"src/**/*.{js,vue,ts}\"",
- "svgo": "svgo -f src/assets/svg --config=src/config/svgo.js",
- "prepare": "husky install"
- },
- "dependencies": {
- "@amap/amap-jsapi-loader": "^1.0.1",
- "@arco-design/web-vue": "latest",
- "@arco-themes/vue-h3c-router": "^2.0.21",
- "@easyfe/admin-component": "latest",
- "@easyfe/web-request": "^1.0.1",
- "@skjnldsv/vue-plyr": "^7.4.0",
- "@types/dush": "~3.0.1",
- "@vueuse/components": "~10.2.1",
- "@vueuse/core": "~10.2.1",
- "big.js": "~6.2.1",
- "cos-js-sdk-v5": "~1.4.18",
- "crypto-js": "^4.2.0",
- "custom-vue-scrollbar": "~0.0.7",
- "dayjs": "~1.11.9",
- "dush": "~3.0.5",
- "echarts": "~5.5.0",
- "fast-deep-equal": "~3.1.3",
- "html2canvas": "~1.4.1",
- "intro.js": "~7.0.1",
- "js-cookie": "~3.0.5",
- "lodash-es": "~4.17.21",
- "nanoid": "~4.0.2",
- "nprogress": "~0.2.0",
- "numeral": "~2.0.6",
- "pinia": "~2.1.4",
- "qrcode": "~1.5.3",
- "qs": "~6.11.2",
- "screenfull": "~6.0.2",
- "swiper": "~8.3.2",
- "tailwindcss": "~3.3.2",
- "vue": "~3.4.27",
- "vue-awesome-swiper": "~5.0.1",
- "vue-clipboard3": "~2.0.0",
- "vue-countup-v3": "^1.3.0",
- "vue-i18n": "^9.7.0",
- "vue-router": "~4.2.2",
- "vuedraggable": "~4.1.0"
- },
- "devDependencies": {
- "@amap/amap-jsapi-types": "^0.0.15",
- "@arco-plugins/vite-vue": "~1.4.5",
- "@arco-themes/vue-easyfe": "~0.0.5",
- "@commitlint/cli": "~17.6.6",
- "@commitlint/config-conventional": "~17.6.6",
- "@easyfe/eslint-config-vue3ts": "~0.0.4",
- "@easyfe/vite-plugin-upload": "^1.0.2",
- "@syyfe/eslint-plugin": "~0.0.2",
- "@types/big.js": "~6.1.6",
- "@types/crypto-js": "^4.2.2",
- "@types/intro.js": "~5.1.1",
- "@types/js-cookie": "~3.0.3",
- "@types/lodash-es": "~4.17.7",
- "@types/node": "~20.3.3",
- "@types/nprogress": "~0.2.0",
- "@types/numeral": "~2.0.2",
- "@types/qs": "~6.9.7",
- "@vitejs/plugin-vue": "~4.6.2",
- "@vue/compiler-sfc": "~3.3.4",
- "autoprefixer": "~10.4.14",
- "husky": "~8.0.3",
- "less": "~4.1.3",
- "lint-staged": "~13.2.3",
- "postcss": "~8.4.24",
- "postcss-pxtorem": "~6.0.0",
- "rollup-plugin-visualizer": "~5.9.2",
- "sass": "~1.63.6",
- "svgo": "~3.0.2",
- "terser": "~5.18.2",
- "tslib": "~2.6.0",
- "typescript": "4.5.2",
- "unplugin-auto-import": "~0.16.5",
- "unplugin-vue-components": "~0.25.1",
- "vite": "~4.5.3",
- "vite-plugin-compression": "~0.5.1",
- "vite-plugin-restart": "~0.3.1",
- "vite-plugin-svg-icons": "~2.0.1",
- "vite-plugin-vue-setup-extend-plus": "~0.1.0"
- }
+ "name": "project-template",
+ "version": "0.0.1",
+ "scripts": {
+ "start": "vite --mode development",
+ "build": "npm run build:prod",
+ "build:test": "vite build --mode test",
+ "build:prod": "vite build --mode production",
+ "lint": "eslint --fix \"src/**/*.{js,vue,ts}\"",
+ "lint:error": "eslint --fix --quiet \"src/**/*.{js,vue,ts}\"",
+ "svgo": "svgo -f src/assets/svg --config=src/config/svgo.js",
+ "prepare": "husky install"
+ },
+ "dependencies": {
+ "@amap/amap-jsapi-loader": "^1.0.1",
+ "@arco-design/web-vue": "latest",
+ "@arco-themes/vue-beisike": "^0.0.1",
+ "@easyfe/admin-component": "latest",
+ "@easyfe/web-request": "^1.0.1",
+ "@skjnldsv/vue-plyr": "^7.4.0",
+ "@types/dush": "~3.0.1",
+ "@vueuse/components": "~10.2.1",
+ "@vueuse/core": "~10.2.1",
+ "big.js": "~6.2.1",
+ "cos-js-sdk-v5": "~1.4.18",
+ "crypto-js": "^4.2.0",
+ "custom-vue-scrollbar": "~0.0.7",
+ "dayjs": "~1.11.9",
+ "dush": "~3.0.5",
+ "echarts": "~5.5.0",
+ "fast-deep-equal": "~3.1.3",
+ "html2canvas": "~1.4.1",
+ "intro.js": "~7.0.1",
+ "js-cookie": "~3.0.5",
+ "lodash-es": "~4.17.21",
+ "nanoid": "~4.0.2",
+ "nprogress": "~0.2.0",
+ "numeral": "~2.0.6",
+ "pinia": "~2.1.4",
+ "qrcode": "~1.5.3",
+ "qs": "~6.11.2",
+ "screenfull": "~6.0.2",
+ "swiper": "~8.3.2",
+ "tailwindcss": "~3.3.2",
+ "vue": "~3.4.27",
+ "vue-awesome-swiper": "~5.0.1",
+ "vue-clipboard3": "~2.0.0",
+ "vue-countup-v3": "^1.3.0",
+ "vue-i18n": "^9.7.0",
+ "vue-router": "~4.2.2",
+ "vuedraggable": "~4.1.0"
+ },
+ "devDependencies": {
+ "@amap/amap-jsapi-types": "^0.0.15",
+ "@arco-plugins/vite-vue": "~1.4.5",
+ "@arco-themes/vue-easyfe": "~0.0.5",
+ "@commitlint/cli": "~17.6.6",
+ "@commitlint/config-conventional": "~17.6.6",
+ "@easyfe/eslint-config-vue3ts": "~0.0.4",
+ "@easyfe/vite-plugin-upload": "^1.0.2",
+ "@syyfe/eslint-plugin": "~0.0.2",
+ "@types/big.js": "~6.1.6",
+ "@types/crypto-js": "^4.2.2",
+ "@types/intro.js": "~5.1.1",
+ "@types/js-cookie": "~3.0.3",
+ "@types/lodash-es": "~4.17.7",
+ "@types/node": "~20.3.3",
+ "@types/nprogress": "~0.2.0",
+ "@types/numeral": "~2.0.2",
+ "@types/qs": "~6.9.7",
+ "@vitejs/plugin-vue": "~4.6.2",
+ "@vue/compiler-sfc": "~3.3.4",
+ "autoprefixer": "~10.4.14",
+ "husky": "~8.0.3",
+ "less": "~4.1.3",
+ "lint-staged": "~13.2.3",
+ "postcss": "~8.4.24",
+ "postcss-pxtorem": "~6.0.0",
+ "rollup-plugin-visualizer": "~5.9.2",
+ "sass": "~1.63.6",
+ "svgo": "~3.0.2",
+ "terser": "~5.18.2",
+ "tslib": "~2.6.0",
+ "typescript": "4.5.2",
+ "unplugin-auto-import": "~0.16.5",
+ "unplugin-vue-components": "~0.25.1",
+ "vite": "~4.5.3",
+ "vite-plugin-compression": "~0.5.1",
+ "vite-plugin-restart": "~0.3.1",
+ "vite-plugin-svg-icons": "~2.0.1",
+ "vite-plugin-vue-setup-extend-plus": "~0.1.0"
+ }
}
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 9ecfb84..01f981c 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -3,13 +3,14 @@
const themeModeOptions = [
{ label: "浜壊妯″紡", value: "light" },
{ label: "鏆楄壊妯″紡", value: "dark" },
+ { label: "瀹氬埗妯″紡", value: "custom" },
{ label: "璺熼殢绯荤粺", value: "auto" }
];
const defaultTheme: any = localStorage.getItem("arco-theme") || "auto";
const currentTheme = ref<"light" | "dark">(defaultTheme);
-const currentThemeMode = ref<"light" | "dark" | "auto">(defaultTheme);
+const currentThemeMode = ref<"light" | "dark" | "auto" | "custom">(defaultTheme);
export const useTheme = () => {
//璁剧疆鑷姩涓婚妯″紡
@@ -23,7 +24,7 @@
};
//璁剧疆鎵嬪姩涓婚妯″紡
- const setManualTheme = (v: "light" | "dark") => {
+ const setManualTheme = (v: "light" | "dark" | "custom") => {
localStorage.setItem("arco-theme", v);
currentThemeMode.value = v;
currentTheme.value = v;
@@ -35,7 +36,7 @@
darkModeQuery.addListener(setAutoTheme);
//鐢ㄤ簬澶勭悊鎵嬪姩鍒囨崲涓婚
- const handleThemeChange = (v: "light" | "dark" | "auto") => {
+ const handleThemeChange = (v: "light" | "dark" | "auto" | "custom") => {
if (v === "auto") {
currentThemeMode.value = "auto";
setAutoTheme();
diff --git a/src/layout/components/app-header-right/index.vue b/src/layout/components/app-header-right/index.vue
index 0286840..e6b6478 100644
--- a/src/layout/components/app-header-right/index.vue
+++ b/src/layout/components/app-header-right/index.vue
@@ -28,6 +28,7 @@
<template #icon>
<icon-moon-fill v-if="currentThemeMode === 'dark'" />
<icon-sun-fill v-if="currentThemeMode === 'light'" />
+ <icon-cloud v-if="currentThemeMode === 'custom'" />
<icon-desktop v-if="currentThemeMode === 'auto'" />
</template>
</a-button>
diff --git a/src/main.ts b/src/main.ts
index d729a17..6678ac3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,9 +6,10 @@
import "virtual:svg-icons-register";
//寮曞叆鍏ㄥ眬鏍峰紡
import "@/styles/index.scss";
+import "@/styles/theme.scss";
import ArcoVueIcon from "@arco-design/web-vue/es/icon";
import "@easyfe/admin-component/dist/style.css";
-import "@arco-themes/vue-h3c-router/index.less";
+import "@arco-themes/vue-beisike/index.less";
import i18n from "./locales";
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
new file mode 100644
index 0000000..f8f8a41
--- /dev/null
+++ b/src/styles/theme.scss
@@ -0,0 +1,247 @@
+body[arco-theme="custom"] {
+ --color-black: #000000;
+ --color-border: #333335;
+ --color-bg-1: #17171a;
+ --color-bg-2: #1f2935;
+ --color-bg-3: #2a2a2b;
+ --color-bg-4: #313132;
+ --color-bg-5: #373739;
+ --color-bg-white: #f6f6f6;
+ --color-text-1: rgba(255, 255, 255, 0.9);
+ --color-text-2: rgba(255, 255, 255, 0.7);
+ --color-text-3: rgba(255, 255, 255, 0.5);
+ --color-text-4: rgba(255, 255, 255, 0.3);
+ --color-fill-1: rgba(255, 255, 255, 0.04);
+ --color-fill-2: rgba(255, 255, 255, 0.08);
+ --color-fill-3: rgba(255, 255, 255, 0.12);
+ --color-fill-4: rgba(255, 255, 255, 0.16);
+ --color-border-1: #2e2e30;
+ --color-border-2: #484849;
+ --color-border-3: #5f5f60;
+ --color-border-4: #929293;
+ --color-primary-light-1: rgba(var(--primary-6), 0.2);
+ --color-primary-light-2: rgba(var(--primary-6), 0.35);
+ --color-primary-light-3: rgba(var(--primary-6), 0.5);
+ --color-primary-light-4: rgba(var(--primary-6), 0.65);
+ --color-secondary: rgba(var(--gray-9), 0.08);
+ --color-secondary-hover: rgba(var(--gray-8), 0.16);
+ --color-secondary-active: rgba(var(--gray-7), 0.24);
+ --color-secondary-disabled: rgba(var(--gray-9), 0.08);
+ --color-danger-light-1: rgba(var(--danger-6), 0.2);
+ --color-danger-light-2: rgba(var(--danger-6), 0.35);
+ --color-danger-light-3: rgba(var(--danger-6), 0.5);
+ --color-danger-light-4: rgba(var(--danger-6), 0.65);
+ --color-success-light-1: rgb(var(--success-6), 0.2);
+ --color-success-light-2: rgb(var(--success-6), 0.35);
+ --color-success-light-3: rgb(var(--success-6), 0.5);
+ --color-success-light-4: rgb(var(--success-6), 0.65);
+ --color-warning-light-1: rgb(var(--warning-6), 0.2);
+ --color-warning-light-2: rgb(var(--warning-6), 0.35);
+ --color-warning-light-3: rgb(var(--warning-6), 0.5);
+ --color-warning-light-4: rgb(var(--warning-6), 0.65);
+ --color-link-light-1: rgba(var(--link-6), 0.2);
+ --color-link-light-2: rgba(var(--link-6), 0.35);
+ --color-link-light-3: rgba(var(--link-6), 0.5);
+ --color-link-light-4: rgba(var(--link-6), 0.65);
+ --color-tooltip-bg: #373739;
+ --color-spin-layer-bg: rgba(51, 51, 51, 0.6);
+ --color-menu-dark-bg: #232324;
+ --color-menu-light-bg: linear-gradient(180deg, #1d4765 0%, #425365 100%);
+ --color-menu-dark-hover: var(--color-fill-2);
+ --color-mask-bg: rgba(23, 23, 26, 0.6);
+ --red-1: 77, 0, 10;
+ --red-2: 119, 6, 17;
+ --red-3: 161, 22, 31;
+ --red-4: 203, 46, 52;
+ --red-5: 245, 78, 78;
+ --red-6: 247, 105, 101;
+ --red-7: 249, 141, 134;
+ --red-8: 251, 176, 167;
+ --red-9: 253, 209, 202;
+ --red-10: 255, 240, 236;
+ --orangered-1: 77, 14, 0;
+ --orangered-2: 119, 30, 5;
+ --orangered-3: 162, 55, 20;
+ --orangered-4: 204, 87, 41;
+ --orangered-5: 247, 126, 69;
+ --orangered-6: 249, 146, 90;
+ --orangered-7: 250, 173, 125;
+ --orangered-8: 252, 198, 161;
+ --orangered-9: 253, 222, 197;
+ --orangered-10: 255, 244, 235;
+ --orange-1: 77, 27, 0;
+ --orange-2: 121, 48, 4;
+ --orange-3: 166, 75, 10;
+ --orange-4: 210, 105, 19;
+ --orange-5: 255, 141, 31;
+ --orange-6: 255, 150, 38;
+ --orange-7: 255, 179, 87;
+ --orange-8: 255, 205, 135;
+ --orange-9: 255, 227, 184;
+ --orange-10: 255, 247, 232;
+ --gold-1: 77, 45, 0;
+ --gold-2: 119, 75, 4;
+ --gold-3: 162, 111, 15;
+ --gold-4: 204, 150, 31;
+ --gold-5: 247, 192, 52;
+ --gold-6: 249, 204, 68;
+ --gold-7: 250, 220, 108;
+ --gold-8: 252, 233, 149;
+ --gold-9: 253, 244, 190;
+ --gold-10: 255, 252, 232;
+ --yellow-1: 77, 56, 0;
+ --yellow-2: 120, 94, 7;
+ --yellow-3: 163, 134, 20;
+ --yellow-4: 207, 179, 37;
+ --yellow-5: 250, 225, 60;
+ --yellow-6: 251, 233, 75;
+ --yellow-7: 252, 243, 116;
+ --yellow-8: 253, 250, 157;
+ --yellow-9: 254, 254, 198;
+ --yellow-10: 254, 255, 240;
+ --lime-1: 42, 77, 0;
+ --lime-2: 68, 112, 6;
+ --lime-3: 98, 148, 18;
+ --lime-4: 132, 183, 35;
+ --lime-5: 168, 219, 57;
+ --lime-6: 184, 226, 75;
+ --lime-7: 203, 233, 112;
+ --lime-8: 222, 241, 152;
+ --lime-9: 238, 248, 194;
+ --lime-10: 253, 255, 238;
+ --green-1: 0, 77, 28;
+ --green-2: 4, 102, 37;
+ --green-3: 10, 128, 45;
+ --green-4: 18, 154, 55;
+ --green-5: 29, 180, 64;
+ --green-6: 39, 195, 70;
+ --green-7: 80, 210, 102;
+ --green-8: 126, 225, 139;
+ --green-9: 178, 240, 183;
+ --green-10: 235, 255, 236;
+ --cyan-1: 0, 66, 77;
+ --cyan-2: 6, 97, 108;
+ --cyan-3: 17, 131, 139;
+ --cyan-4: 31, 166, 170;
+ --cyan-5: 48, 201, 201;
+ --cyan-6: 63, 212, 207;
+ --cyan-7: 102, 223, 215;
+ --cyan-8: 144, 233, 225;
+ --cyan-9: 190, 244, 237;
+ --cyan-10: 240, 255, 252;
+ --blue-1: 0, 26, 77;
+ --blue-2: 5, 47, 120;
+ --blue-3: 19, 76, 163;
+ --blue-4: 41, 113, 207;
+ --blue-5: 70, 154, 250;
+ --blue-6: 90, 170, 251;
+ --blue-7: 125, 193, 252;
+ --blue-8: 161, 213, 253;
+ --blue-9: 198, 232, 254;
+ --blue-10: 234, 248, 255;
+ --arcoblue-1: 0, 13, 77;
+ --arcoblue-2: 4, 27, 121;
+ --arcoblue-3: 14, 50, 166;
+ --arcoblue-4: 29, 77, 210;
+ --arcoblue-5: 48, 111, 255;
+ --arcoblue-6: 60, 126, 255;
+ --arcoblue-7: 104, 159, 255;
+ --arcoblue-8: 147, 190, 255;
+ --arcoblue-9: 190, 218, 255;
+ --arcoblue-10: 234, 244, 255;
+ --purple-1: 22, 0, 77;
+ --purple-2: 39, 6, 110;
+ --purple-3: 62, 19, 143;
+ --purple-4: 90, 37, 176;
+ --purple-5: 123, 61, 209;
+ --purple-6: 142, 81, 218;
+ --purple-7: 169, 116, 227;
+ --purple-8: 197, 154, 237;
+ --purple-9: 223, 194, 246;
+ --purple-10: 247, 237, 255;
+ --pinkpurple-1: 66, 0, 77;
+ --pinkpurple-2: 101, 3, 112;
+ --pinkpurple-3: 138, 13, 147;
+ --pinkpurple-4: 176, 27, 182;
+ --pinkpurple-5: 217, 46, 217;
+ --pinkpurple-6: 225, 61, 219;
+ --pinkpurple-7: 232, 102, 223;
+ --pinkpurple-8: 240, 146, 230;
+ --pinkpurple-9: 247, 193, 240;
+ --pinkpurple-10: 255, 242, 253;
+ --magenta-1: 77, 0, 52;
+ --magenta-2: 119, 8, 80;
+ --magenta-3: 161, 23, 108;
+ --magenta-4: 203, 43, 136;
+ --magenta-5: 245, 69, 166;
+ --magenta-6: 247, 86, 169;
+ --magenta-7: 249, 122, 184;
+ --magenta-8: 251, 158, 200;
+ --magenta-9: 253, 195, 219;
+ --magenta-10: 255, 232, 241;
+ --gray-1: 23, 23, 26;
+ --gray-2: 20, 20, 21;
+ --gray-3: 72, 72, 73;
+ --gray-4: 95, 95, 96;
+ --gray-5: 120, 120, 122;
+ --gray-6: 146, 146, 147;
+ --gray-7: 171, 171, 172;
+ --gray-8: 197, 197, 197;
+ --gray-9: 223, 223, 223;
+ --gray-10: 246, 246, 246;
+ --primary-1: var(--arcoblue-1);
+ --primary-2: var(--arcoblue-2);
+ --primary-3: var(--arcoblue-3);
+ --primary-4: var(--arcoblue-4);
+ --primary-5: var(--arcoblue-5);
+ --primary-6: var(--arcoblue-6);
+ --primary-7: var(--arcoblue-7);
+ --primary-8: var(--arcoblue-8);
+ --primary-9: var(--arcoblue-9);
+ --primary-10: var(--arcoblue-10);
+ --link-1: var(--arcoblue-1);
+ --link-2: var(--arcoblue-2);
+ --link-3: var(--arcoblue-3);
+ --link-4: var(--arcoblue-4);
+ --link-5: var(--arcoblue-5);
+ --link-6: var(--arcoblue-6);
+ --link-7: var(--arcoblue-7);
+ --link-8: var(--arcoblue-8);
+ --link-9: var(--arcoblue-9);
+ --link-10: var(--arcoblue-10);
+ --success-1: var(--green-1);
+ --success-2: var(--green-2);
+ --success-3: var(--green-3);
+ --success-4: var(--green-4);
+ --success-5: var(--green-5);
+ --success-6: var(--green-6);
+ --success-7: var(--green-7);
+ --success-8: var(--green-8);
+ --success-9: var(--green-9);
+ --success-10: var(--green-10);
+ --danger-1: var(--red-1);
+ --danger-2: var(--red-2);
+ --danger-3: var(--red-3);
+ --danger-4: var(--red-4);
+ --danger-5: var(--red-5);
+ --danger-6: var(--red-6);
+ --danger-7: var(--red-7);
+ --danger-8: var(--red-8);
+ --danger-9: var(--red-9);
+ --danger-10: var(--red-10);
+ --warning-1: var(--orange-1);
+ --warning-2: var(--orange-2);
+ --warning-3: var(--orange-3);
+ --warning-4: var(--orange-4);
+ --warning-5: var(--orange-5);
+ --warning-6: var(--orange-6);
+ --warning-7: var(--orange-7);
+ --warning-8: var(--orange-8);
+ --warning-9: var(--orange-9);
+ --warning-10: var(--orange-10);
+ .arco-card {
+ background: rgba(0, 0, 10, 0.8);
+ border: 1px solid #0e9cff;
+ box-shadow: inset 0px 0px 87px 0px rgba(1, 194, 255, 0.4);
+ }
+}
--
Gitblit v1.8.0