feat: 增加定制配色模式

zhangnuoyan

2024-08-24 a1f7104959fcefe9940f849456cda934858c5733

feat: 增加定制配色模式

 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",

 package.json

@@ -14,7 +14,7 @@
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@arco-design/web-vue": "latest",
    "@arco-themes/vue-h3c-router": "^2.0.21",
        "@arco-themes/vue-beisike": "^0.0.1",
    "@easyfe/admin-component": "latest",
    "@easyfe/web-request": "^1.0.1",
    "@skjnldsv/vue-plyr": "^7.4.0",

 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();

 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>

 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";


 src/styles/theme.scss

New file
@@ -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);
    }
}