c/docs/.vitepress/theme/style/rainbow.css

/* 彩虹动画 */
@keyframes rainbow {
    0% {
        --rainbow-prev: #009ff7;
        --rainbow-next: #c76dd1;
    }

    1.25% {
        --rainbow-prev: #009dfa;
        --rainbow-next: #cf69c9;
    }

    2.5% {
        --rainbow-prev: #009bfc;
        --rainbow-next: #d566c2;
    }

    3.75% {
        --rainbow-prev: #0098fd;
        --rainbow-next: #dc63ba;
    }

    5% {
        --rainbow-prev: #0096fd;
        --rainbow-next: #e160b3;
    }

    6.25% {
        --rainbow-prev: #0093fd;
        --rainbow-next: #e65eab;
    }

    7.5% {
        --rainbow-prev: #2e90fc;
        --rainbow-next: #e95ca2;
    }

    8.75% {
        --rainbow-prev: #4d8dfa;
        --rainbow-next: #ed5a9a;
    }

    10% {
        --rainbow-prev: #638af8;
        --rainbow-next: #ef5992;
    }

    11.25% {
        --rainbow-prev: #7587f5;
        --rainbow-next: #f15989;
    }

    12.5% {
        --rainbow-prev: #8583f1;
        --rainbow-next: #f25981;
    }

    13.75% {
        --rainbow-prev: #9280ed;
        --rainbow-next: #f25a79;
    }

    15% {
        --rainbow-prev: #9f7ce9;
        --rainbow-next: #f25c71;
    }

    16.25% {
        --rainbow-prev: #aa78e3;
        --rainbow-next: #f15e69;
    }

    17.5% {
        --rainbow-prev: #b574dd;
        --rainbow-next: #ef6061;
    }

    18.75% {
        --rainbow-prev: #be71d7;
        --rainbow-next: #ed635a;
    }

    20% {
        --rainbow-prev: #c76dd1;
        --rainbow-next: #eb6552;
    }

    21.25% {
        --rainbow-prev: #cf69c9;
        --rainbow-next: #e8694b;
    }

    22.5% {
        --rainbow-prev: #d566c2;
        --rainbow-next: #e46c44;
    }

    23.75% {
        --rainbow-prev: #dc63ba;
        --rainbow-next: #e06f3d;
    }

    25% {
        --rainbow-prev: #e160b3;
        --rainbow-next: #db7336;
    }

    26.25% {
        --rainbow-prev: #e65eab;
        --rainbow-next: #d77630;
    }

    27.5% {
        --rainbow-prev: #e95ca2;
        --rainbow-next: #d17a2a;
    }

    28.75% {
        --rainbow-prev: #ed5a9a;
        --rainbow-next: #cc7d24;
    }

    30% {
        --rainbow-prev: #ef5992;
        --rainbow-next: #c6811e;
    }

    31.25% {
        --rainbow-prev: #f15989;
        --rainbow-next: #bf8418;
    }

    32.5% {
        --rainbow-prev: #f25981;
        --rainbow-next: #b98713;
    }

    33.75% {
        --rainbow-prev: #f25a79;
        --rainbow-next: #b28a0f;
    }

    35% {
        --rainbow-prev: #f25c71;
        --rainbow-next: #ab8d0c;
    }

    36.25% {
        --rainbow-prev: #f15e69;
        --rainbow-next: #a3900b;
    }

    37.5% {
        --rainbow-prev: #ef6061;
        --rainbow-next: #9c920d;
    }

    38.75% {
        --rainbow-prev: #ed635a;
        --rainbow-next: #949510;
    }

    40% {
        --rainbow-prev: #eb6552;
        --rainbow-next: #8b9715;
    }

    41.25% {
        --rainbow-prev: #e8694b;
        --rainbow-next: #83991b;
    }

    42.5% {
        --rainbow-prev: #e46c44;
        --rainbow-next: #7a9b21;
    }

    43.75% {
        --rainbow-prev: #e06f3d;
        --rainbow-next: #719d27;
    }

    45% {
        --rainbow-prev: #db7336;
        --rainbow-next: #679e2e;
    }

    46.25% {
        --rainbow-prev: #d77630;
        --rainbow-next: #5da035;
    }

    47.5% {
        --rainbow-prev: #d17a2a;
        --rainbow-next: #51a13c;
    }

    48.75% {
        --rainbow-prev: #cc7d24;
        --rainbow-next: #44a244;
    }

    50% {
        --rainbow-prev: #c6811e;
        --rainbow-next: #34a44b;
    }

    51.25% {
        --rainbow-prev: #bf8418;
        --rainbow-next: #1ba553;
    }

    52.5% {
        --rainbow-prev: #b98713;
        --rainbow-next: #00a65b;
    }

    53.75% {
        --rainbow-prev: #b28a0f;
        --rainbow-next: #00a663;
    }

    55% {
        --rainbow-prev: #ab8d0c;
        --rainbow-next: #00a76c;
    }

    56.25% {
        --rainbow-prev: #a3900b;
        --rainbow-next: #00a874;
    }

    57.5% {
        --rainbow-prev: #9c920d;
        --rainbow-next: #00a87d;
    }

    58.75% {
        --rainbow-prev: #949510;
        --rainbow-next: #00a985;
    }

    60% {
        --rainbow-prev: #8b9715;
        --rainbow-next: #00a98e;
    }

    61.25% {
        --rainbow-prev: #83991b;
        --rainbow-next: #00a996;
    }

    62.5% {
        --rainbow-prev: #7a9b21;
        --rainbow-next: #00a99f;
    }

    63.75% {
        --rainbow-prev: #719d27;
        --rainbow-next: #00a9a7;
    }

    65% {
        --rainbow-prev: #679e2e;
        --rainbow-next: #00a9b0;
    }

    66.25% {
        --rainbow-prev: #5da035;
        --rainbow-next: #00a9b8;
    }

    67.5% {
        --rainbow-prev: #51a13c;
        --rainbow-next: #00a9c0;
    }

    68.75% {
        --rainbow-prev: #44a244;
        --rainbow-next: #00a8c7;
    }

    70% {
        --rainbow-prev: #34a44b;
        --rainbow-next: #00a8cf;
    }

    71.25% {
        --rainbow-prev: #1ba553;
        --rainbow-next: #00a7d5;
    }

    72.5% {
        --rainbow-prev: #00a65b;
        --rainbow-next: #00a6dc;
    }

    73.75% {
        --rainbow-prev: #00a663;
        --rainbow-next: #00a6e2;
    }

    75% {
        --rainbow-prev: #00a76c;
        --rainbow-next: #00a4e7;
    }

    76.25% {
        --rainbow-prev: #00a874;
        --rainbow-next: #00a3ec;
    }

    77.5% {
        --rainbow-prev: #00a87d;
        --rainbow-next: #00a2f1;
    }

    78.75% {
        --rainbow-prev: #00a985;
        --rainbow-next: #00a0f4;
    }

    80% {
        --rainbow-prev: #00a98e;
        --rainbow-next: #009ff7;
    }

    81.25% {
        --rainbow-prev: #00a996;
        --rainbow-next: #009dfa;
    }

    82.5% {
        --rainbow-prev: #00a99f;
        --rainbow-next: #009bfc;
    }

    83.75% {
        --rainbow-prev: #00a9a7;
        --rainbow-next: #0098fd;
    }

    85% {
        --rainbow-prev: #00a9b0;
        --rainbow-next: #0096fd;
    }

    86.25% {
        --rainbow-prev: #00a9b8;
        --rainbow-next: #0093fd;
    }

    87.5% {
        --rainbow-prev: #00a9c0;
        --rainbow-next: #2e90fc;
    }

    88.75% {
        --rainbow-prev: #00a8c7;
        --rainbow-next: #4d8dfa;
    }

    90% {
        --rainbow-prev: #00a8cf;
        --rainbow-next: #638af8;
    }

    91.25% {
        --rainbow-prev: #00a7d5;
        --rainbow-next: #7587f5;
    }

    92.5% {
        --rainbow-prev: #00a6dc;
        --rainbow-next: #8583f1;
    }

    93.75% {
        --rainbow-prev: #00a6e2;
        --rainbow-next: #9280ed;
    }

    95% {
        --rainbow-prev: #00a4e7;
        --rainbow-next: #9f7ce9;
    }

    96.25% {
        --rainbow-prev: #00a3ec;
        --rainbow-next: #aa78e3;
    }

    97.5% {
        --rainbow-prev: #00a2f1;
        --rainbow-next: #b574dd;
    }

    98.75% {
        --rainbow-prev: #00a0f4;
        --rainbow-next: #be71d7;
    }

    100% {
        --rainbow-prev: #009ff7;
        --rainbow-next: #c76dd1;
    }
}

/* 彩虹色卡 */
:root,.dark {
    animation: rainbow 8s linear infinite;
}

:root {
    /* hero标题渐变色 */
    --vp-home-hero-name-color: transparent;
    --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--rainbow-prev) 30%, var(--rainbow-next));

    /*hero logo背景渐变色 */
    --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--rainbow-prev) 30%, var(--rainbow-next));
    --vp-home-hero-image-filter: blur(80px);
}

/* h1 标题 */
h1 {
  background: -webkit-linear-gradient(10deg, var(--rainbow-prev) 5%, var(--rainbow-next) 15%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


@media (min-width: 640px) {
    :root {
        --vp-home-hero-image-filter: blur(120px);
    }
}

@media (min-width: 960px) {
    :root {
        --vp-home-hero-image-filter: blur(120px);
    }
}

/* Safari has a very bad performance on gradient and filter */
.browser-safari,
.browser-firefox {
    --vp-home-hero-image-background-image: transparent;
    --vp-home-hero-image-filter: '';
}