自用哪吒监控面板ServerStatus主题的自定义美化【紧凑(强迫症)风格】【V3】

<link rel="preconnect" href="https://registry.npmmirror.com" />
    <link rel="stylesheet" href="https://registry.npmmirror.com/lxgw-wenkai-screen-web/latest/files/lxgwwenkaiscreen/result.css" />
<style>
    .solid-contextmenu__theme--light .solid-contextmenu__item:not(.solid-contextmenu__item--disabled):hover>.solid-contextmenu__item__content, .solid-contextmenu__theme--light .solid-contextmenu__item:not(.solid-contextmenu__item--disabled):focus>.solid-contextmenu__item__content {
        background-color: #e0eefd00;
    }

 .solid-contextmenu__item:not(.solid-contextmenu__item--disabled):hover>.solid-contextmenu__item__content, .solid-contextmenu__item:not(.solid-contextmenu__item--disabled):focus>.solid-contextmenu__item__content {
    background-color: #4393e600 !important;
}


.hope-c-ivMHWx-hZistB-cv.hope-icon-button, .hope-c-PJLV-iglejTx-css {
    border-radius: 10px;
}

.hope-c-PJLV-iglejTx-css:active, .hope-c-PJLV-iglejTx-css [data-active] {
    transform: scale(0.95);
    transition: 0.2s;
}

.hope-c-PJLV-ifiEvmt-css {
    z-index: 1000;
}

    /* 背景样式 */
    .hope-c-PJLV.hope-c-PJLV-ihWgyFw-css,
    .hope-c-PJLV-ibiABng-css {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23ff9d00' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23fb8d17' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23f47d24' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23ed6e2d' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23e35f34' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23d85239' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23cc453e' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23be3941' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23b02f43' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23a02644' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23901e44' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23801843' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%236f1341' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%235e0f3d' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%234e0c38' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%233e0933' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%232e062c' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23210024' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E") !important;
        background-attachment: fixed !important;
        background-size: cover !important;
        background-repeat: repeat !important;
    }

    /* 全局样式 */
    body {
        font-family: "LXGW WenKai Screen";
        /* 设置字体 */
        font-weight: normal;
        /* 设置字体粗细 */
        font-size: 0.9rem;
        /* 设置字体大小 */
        margin: 0;
        /* 移除边距 */
        padding: 0;
        /* 移除内边距 */
        min-height: 100vh;
        /* 设置最小高度为视口高度 */
        display: flex;
        /* 使用弹性布局 */
        flex-direction: column;
        /* 设置主轴方向为垂直 */
        padding-bottom: 70px;
        /* 底部添加内边距 */
    }

    /* 隐藏滚动条 */
    ::-webkit-scrollbar {
        display: none !important;
    }

    /* 透明背景带模糊效果 */
    .hope-c-PJLV-ijgzmFG-css {
        border-radius: 11px !important;
        padding: 2px !important;
        backdrop-filter: blur(4px) !important;
        background-color: rgba(255, 255, 255, 0) !important;
        border: 2px solid var(--button-border-color) !important;
    }

    .hope-c-PJLV-iftgMKT-css,
    .hope-c-PJLV-iebGlNE-css {
        padding-bottom: 2px;
        padding-top: 2px;
        border: 1px solid var(--button-border-color) !important;
    }

    /* 为各种元素设置边框样式 */
    .hope-c-PJLV-ihczzOn-css,
    .hope-c-PJLV-ibSUzdo-css,
    .hope-c-PJLV-ijAlqzK-css,
    .hope-c-PJLV-ieJmgtS-css,
    .hope-c-PJLV-icEmwRw-css,
    .hope-c-PJLV-ihEOdWn-css,
    .hope-c-PJLV-iMhiGQ-css,
    .hope-c-PJLV-izcUlr-css {
        padding-bottom: 2px;
        padding-top: 2px;
        border: 1px solid var(--button-border-color) !important;
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(6px) !important;
    }

    .hope-c-PJLV-ifPLAZU-css {
        padding-bottom: 2px;
        padding-top: 2px;
        border: 1px solid var(--button-border-color) !important;
        background-color: rgba(166, 166, 166, 0.3);
        backdrop-filter: blur(6px) !important;
    }

    .hope-c-mHASU-kFfbLQ-colorScheme-info {
        color: rgb(96, 125, 139);
    }

    .aplayer .aplayer-lrc:after,
    .aplayer .aplayer-lrc:before {
        height: 7%;
        background: rgb(171 187 194);
        border-radius: var(--hope-radii-lg);
    }

    .hope-c-PJLV-idusLCn-css {
        padding-bottom: 2px;
        padding-top: 2px;
        border: 1px solid var(--button-border-color) !important;
        background-color: rgba(166, 166, 166, 0.3);
        backdrop-filter: blur(6px) !important;
    }

    .solid-contextmenu,
    .hope-c-PJLV-igOZEoG-css,
    .art-video-player,
    .hope-c-dHzJn {
        border: 2px solid var(--button-border-color) !important;
        border-radius: var(--hope-radii-lg);
    }

    .solid-contextmenu {
        position: fixed;
        user-select: none;
        background-color: var(--hope-colors-background);
        box-sizing: border-box;
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        padding: 0px 0;
        min-width: 200px;
        z-index: 100;
    }

    .hope-c-PJLV-igOZEoG-css {
        column-gap: var(--hope-space-3);
        padding: var(--hope-space-1);
    }

    .hope-c-PJLV-igOZEoG-css svg {
        width: var(--hope-sizes-8) !important;   /* 使用 !important 覆盖内联样式 */
        height: var(--hope-sizes-8) !important;  /* 使用 !important 覆盖内联样式 */
    }
    
    /* 深色主题样式 */
    [data-theme="dark"] .solid-contextmenu,
    .hope-ui-dark .solid-contextmenu {
        background-color: rgba(40, 40, 40, 1);
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
    }

    /* 浅色主题样式 */
    [data-theme="light"] .solid-contextmenu,
    .hope-ui-light .solid-contextmenu{
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2);
    }

    .solid-contextmenu__item {
        margin: 4px 4px;
        position: relative;
        cursor: pointer;
        font-size: 15px;
        color: var(--hope-colors-neutral-800);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
    }

    /* 悬停效果 */
    .solid-contextmenu__item:hover {
        border-radius: 10px;
        margin: 4px 4px;
        background-color: rgba(96, 125, 139, 0.15);
        border-color: rgba(96, 125, 139, 0.3);
    }

    .hope-ui-dark .hope-c-PJLV-igOZEoG-css{
        border-radius: 10px;
        background-color: rgba(40, 40, 40, 1);
    }

    .hope-ui-light .hope-c-PJLV-igOZEoG-css{
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 1);
    }


    /* 深色主题 */
    .hope-ui-dark .solid-contextmenu__item {
        color: var(--hope-colors-neutral-200);
    }

    .hope-ui-dark .solid-contextmenu__item:hover {
        background-color: rgba(96, 125, 139, 0.25);
        border-color: rgba(96, 125, 139, 0.4);
    }



    .hope-c-PJLV-ibtHApG-css,
    .hope-c-PJLV-ijSQbqe-css {
        border: 1.5px solid var(--button-border-color) !important;
    }

    .aplayer .aplayer-lrc p {
        font-size: 14px;
        line-height: 28px !important;
        height: 16px !important;
        color: #235063;
    }

    .art-video-player * {
        border-radius: 10.5px;
    }

    .hope-c-PJLV-iktMgsV-css,
    .hope-c-PJLV-iSMXDf-css,
    .hope-c-PJLV-iiBaxsN-css {
        border: 2px solid var(--button-border-color) !important;
    }

    .hope-c-PJLV-iglejTx-css {
        height: var(--hope-sizes-8);
    }

    /* 圆角效果 */
    .hope-c-PJLV-iktMgsV-css {
        border-radius: 30px;
    }

    /* 隐藏特定元素 */
    .hope-c-PJLV.hope-c-PJLV-ifJliWT-css,
    .hope-c-PJLV.hope-c-PJLV-igjRXTJ-css,
    .hope-c-PJLV-ikmVjeJ-css,
    .footer,
    .aplayer .aplayer-info .aplayer-music .aplayer-author,
    .aplayer .aplayer-list ol li .aplayer-list-author {
        display: none !important;
    }

    /* 透明背景带圆角 */
    .hope-c-PJLV-ifdXShc-css,
    .hope-c-PJLV-ifdXShc-css::after {
        background-color: rgba(0, 0, 0, 0) !important;
        border-radius: 7px;
    }

    /* 按钮容器样式 */
    .button-container {
        pointer-events: none;
        position: fixed;
        bottom: 6px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        padding: 10px;
        z-index: 0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(0);
    }

    .button-container.hidden {
        transform: translateY(100%);
        /* 隐藏时向下移动 */
    }

    /* 自定义按钮样式 */
    .custom-button {
        -webkit-user-drag: none;
        display: inline-block;
        padding: 4px 13px;
        background-color: var(--button-bg-color);
        /* 背景颜色 */
        color: var(--button-text-color);
        /* 文字颜色 */
        text-decoration: none;
        border-radius: 9px;

        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        /* 过渡效果 */
        border: 2px solid var(--button-border-color);
        /* 边框 */
        box-shadow: 0 0 0px var(--button-shadow);
        /* 阴影 */
        margin: 0 3px;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(4px);
        /* 背景模糊 */
        letter-spacing: 0.5px;
        /* 字间距 */
        pointer-events: auto;
    }

    .custom-button:hover {
        background-color: var(--button-hover-bg);
        /* 悬停时背景色 */
        transform: scale(1.06);
        /* 悬停时放大 */
        border-color: var(--button-hover-border);
        /* 悬停时边框色 */
        box-shadow: 0 0 8px var(--button-hover-shadow);
        /* 悬停时阴影 */
    }

    .custom-button:active {
        transform: translateY(2px);
        /* 点击时向下移动 */
    }

    .custom-button:focus {
        outline: none;
        box-shadow: 0 0 14px var(--button-hover-shadow);
        /* 聚焦时阴影 */
    }

    /* 其他样式调整 */
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css,
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css,
    .hope-breadcrumb__list.hope-c-cPYwgm.hope-c-PJLV.hope-c-PJLV-iehpHsP-css,
    .hope-c-ivMHWx-hZistB-cv.hope-icon-button,
    .hope-c-PJLV-iglejTx-css,
    .hope-c-PJLV-ikSuVsl-css,
    .hope-c-PJLV-ikvBale-css,
    #audio-player {
        font-family: "LXGW WenKai Screen";
        border: 2px solid var(--button-border-color);
        /* 边框 */
        background-color: rgba(0, 0, 0, 0) !important;
        /* 透明背景 */
        backdrop-filter: blur(2px);
        /* 背景模糊 */
    }

    .hope-c-PJLV-iehpHsP-css {
        border-radius: 10px;
    }

    .hope-c-PJLV-ikaMhsQ-css,
    .hope-c-PJLV-idaeksS-css {
        background-color: transparent !important;
        /* 透明背景 */
    }

    .nav-separator.hope-breadcrumb__separator.hope-c-iIOWzi.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css {
        display: none;
        /* 隐藏导航分隔符 */
    }

    /* 按钮容器和粒子画布的淡入动画 */
    .button-container,
    #particleCanvas {
        opacity: 0;
        /* 初始透明度为0 */
        transition: opacity 0.5s ease-in-out;
        /* 过渡效果 */
    }

    .button-container.loaded,
    #particleCanvas.loaded {
        opacity: 1;
        /* 加载后透明度为1 */
    }

    .hope-c-PJLV-ijnUyRB-css {
        height: 60px;
    }

    .hope-c-PJLV-ijFVKTB-css {
        height: 60px;
        width: 60px;
    }

    .lg-show-in .lg-toolbar {
        background-color: rgba(0, 0, 0, 0) !important;
        backdrop-filter: blur(5px);
    }

    .hope-c-PJLV-ikSuVsl-css {
        padding: 8px;
    }

    .hope-c-PJLV-ipqyVI-css {
        padding-top: 0px;
        padding-bottom: var(--hope-space-2);
        padding-left: var(--hope-space-2);
        padding-right: var(--hope-space-2);
    }

    .hope-c-PJLV-ibMsOCJ-css {
        border: 0px solid var(--button-border-color);
        cursor: pointer;
        /* 鼠标指针样式 */
        padding: var(--hope-space-1);
        border-radius: var(--hope-radii-lg);
        word-break: break-all;
        /* 文字换行 */
    }

    .hope-c-kyJmIJ:focus {
        box-shadow: unset;
    }

    .hope-c-PJLV-ibMsOCJ-css:hover,
    .hope-c-PJLV-ibMsOCJ-css[data-hover] {
        outline: 1px solid var(--button-border-color);
        background-color: rgba(132, 133, 141, 0.18);
        color: unset;
    }

    .aplayer.aplayer-withlrc .aplayer-pic {
        border-right: 3px solid rgb(96 125 139);
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        height: 90px;
        width: 90px;
    }

    .aplayer .aplayer-info .aplayer-music .aplayer-title {
    font-size: 17px;
    }

</style>
<footer>
    <div class="button-container" id="buttonContainer"></div>
</footer>
<script>
    // 全局配置对象
    const CONFIG = {
        loadDelay: 500,
        // 加载延迟,单位为毫秒
        particles: {
            count: 230, // 粒子数量
            opacity: 0.55, // 粒子不透明度
            zIndex: -1, // 粒子层级
            size: 1, // 粒子大小
            speed: 0.5, // 粒子速度
            connectionDistance: 10000, // 粒子连接距离
            attractionForce: 0.07, // 吸引力强度
            attractionDistance: 100, // 吸引力作用距离
            collisionDistance: 10, // 碰撞检测距离
            minMouseDistance: 20, // 鼠标最小距离
            randomness: 0.3, // 随机性
        },
        mouse: {
            attractionDelay: 1500, // 鼠标吸引延迟
            maxDistance: 40000, // 最大连接距离
        },
        colors: {
            r: null, // 红色分量范围,null表示完全随机
            g: null, // 绿色分量范围,null表示完全随机
            b: null, // 蓝色分量范围,null表示完全随机
        },
        buttons: [
            {
                href: "https://github.com/alist-org/alist",
                text: "版权",
            },
            {
                href: "https://dsuk.top",
                text: "关于",
            },
            {
                href: `${window.location.origin}/@manage`,
                text: "管理",
            },
            {
                href: "https://up.dsuk.top",
                text: "监控",
            },
        ],
    };
    // 获取背景亮度
    function getBackgroundBrightness() {
        const rgb = getComputedStyle(document.body).backgroundColor.match(/\d+/g);

        if (rgb) {
            return (
                (parseInt(rgb[0]) * 299 +
                    parseInt(rgb[1]) * 587 +
                    parseInt(rgb[2]) * 114) /
                1000
            );
        }

        return 128; // 默认中等亮度
    }

    // 设置按钮主题
    function setButtonTheme() {
        const brightness = getBackgroundBrightness();
        const isDark = brightness < 128;
        document.documentElement.style.setProperty(
            "--button-bg-color",
            isDark ? "rgba(40, 40, 40, 0.5)" : "rgba(255, 255, 255, 0.5)"
        );
        document.documentElement.style.setProperty(
            "--button-hover-bg",
            isDark ? "rgba(40, 40, 40, 0.85)" : "rgba(255, 255, 255, 0.85)"
        );
        document.documentElement.style.setProperty(
            "--button-border-color",
            isDark ? "rgba(96, 125, 139, 0.5)" : "rgba(96, 125, 139, 0.5)"
        );
        document.documentElement.style.setProperty(
            "--button-hover-border",
            isDark ? "rgba(96, 125, 139, 1)" : "rgba(96, 125, 139, 1)"
        );
        document.documentElement.style.setProperty(
            "--button-hover-shadow",
            isDark ? "rgba(96, 125, 139, 1)" : "rgba(96, 125, 139, 1)"
        );
        document.documentElement.style.setProperty(
            "--button-text-color",
            isDark ? "#ffffff" : "#000000"
        );
    }

    // 粒子系统类
    class ParticleSystem {
        constructor(options = {}) {
            this.canvas = document.createElement("canvas");
            this.ctx = this.canvas.getContext("2d");
            this.particles = [];

            this.mouse = {
                x: null,
                y: null,
                max: CONFIG.mouse.maxDistance,
            };

            this.options = {
                ...CONFIG.particles,
                ...options,
            };
            this.mouseStationaryTime = 0;

            this.lastMousePosition = {
                x: null,
                y: null,
            };
            this.isAttracting = false;
            this.initCanvas();
            this.calculateParticleCount();
            this.initParticles();
            this.bindEvents();
            this.animate();
        }

        // 获取随机颜色
        getRandomColor() {
            const getColorComponent = (range) => {
                if (Array.isArray(range)) {
                    return (
                        Math.floor(Math.random() * (range[1] - range[0] + 1)) + range[0]
                    );
                }

                return Math.floor(Math.random() * 256);
            };

            return {
                r: getColorComponent(CONFIG.colors.r),
                g: getColorComponent(CONFIG.colors.g),
                b: getColorComponent(CONFIG.colors.b),
            };
        }

        // 初始化画布
        initCanvas() {
            this.canvas.id = "particleCanvas";
            this.canvas.style.cssText = `position: fixed;
    top: 0;
    left: 0;
    z-index:${this.options.zIndex};
    opacity:${this.options.opacity};
    `;
            document.body.appendChild(this.canvas);
            this.resize();
        }

        // 计算粒子数量
        calculateParticleCount() {
            const screenArea = window.innerWidth * window.innerHeight;
            const baseDensity = this.options.count / (1920 * 1080);
            this.options.count = Math.floor(screenArea * baseDensity);
            this.options.count = Math.max(20, Math.min(this.options.count, 200));
        }

        // 调整画布大小
        resize() {
            this.canvas.width = window.innerWidth;
            this.canvas.height = window.innerHeight;
            this.calculateParticleCount();
            this.initParticles();
        }

        // 初始化粒子
        initParticles() {
            this.particles = [];

            for (let i = 0; i < this.options.count; i++) {
                this.particles.push({
                    x: Math.random() * this.canvas.width,
                    y: Math.random() * this.canvas.height,
                    xa: (2 * Math.random() - 1) * this.options.speed,
                    ya: (2 * Math.random() - 1) * this.options.speed,
                    max: this.options.connectionDistance,
                    color: this.getRandomColor(),
                });
            }
        }

        // 绑定事件
        bindEvents() {
            window.addEventListener("resize", () => this.resize());

            window.addEventListener("mousemove", (e) => {
                if (this.mouse.x !== e.clientX || this.mouse.y !== e.clientY) {
                    this.mouse.x = e.clientX;
                    this.mouse.y = e.clientY;

                    this.lastMousePosition = {
                        x: e.clientX,
                        y: e.clientY,
                    };
                    this.mouseStationaryTime = 0;
                    this.isAttracting = true;
                }
            });

            window.addEventListener("mouseout", () => {
                this.mouse.x = null;
                this.mouse.y = null;
                this.isAttracting = false;
            });
        }

        // 混合颜色
        mixColors(color1, color2, weight) {
            return {
                r: Math.floor(color1.r * weight + color2.r * (1 - weight)),
                g: Math.floor(color1.g * weight + color2.g * (1 - weight)),
                b: Math.floor(color1.b * weight + color2.b * (1 - weight)),
            };
        }

        // 绘制粒子
        drawParticles() {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
            const points = [...this.particles, this.mouse];

            // 检查鼠标是否静止
            if (this.mouse.x !== null && this.mouse.y !== null) {
                if (
                    this.mouse.x === this.lastMousePosition.x &&
                    this.mouse.y === this.lastMousePosition.y
                ) {
                    this.mouseStationaryTime += 16;

                    if (this.mouseStationaryTime >= CONFIG.mouse.attractionDelay) {
                        this.isAttracting = false;
                    }
                } else {
                    this.mouseStationaryTime = 0;

                    this.lastMousePosition = {
                        x: this.mouse.x,
                        y: this.mouse.y,
                    };
                    this.isAttracting = true;
                }
            }

            // 更新和绘制每个粒子
            points.forEach((point, i) => {
                if (point === this.mouse) return;
                let newX = point.x + point.xa;
                let newY = point.y + point.ya;
                // 碰撞检测
                let collision = false;

                for (let j = 0; j < points.length; j++) {
                    if (i !== j) {
                        const otherPoint = points[j];
                        const dx = newX - otherPoint.x;
                        const dy = newY - otherPoint.y;
                        const distance = Math.sqrt(dx * dx + dy * dy);

                        if (distance < this.options.collisionDistance) {
                            collision = true;
                            break;
                        }
                    }
                }

                // 处理碰撞或移动
                if (collision) {
                    point.xa = -point.xa;
                    point.ya = -point.ya;
                } else {
                    point.x = newX;
                    point.y = newY;
                }

                // 边界检查
                point.xa *= point.x > this.canvas.width || point.x < 0 ? -1 : 1;
                point.ya *= point.y > this.canvas.height || point.y < 0 ? -1 : 1;

                // 鼠标吸引效果
                if (
                    this.isAttracting &&
                    this.mouse.x !== null &&
                    this.mouse.y !== null
                ) {
                    const dx = this.mouse.x - point.x;
                    const dy = this.mouse.y - point.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);

                    if (
                        dist < this.options.attractionDistance &&
                        dist > this.options.minMouseDistance
                    ) {
                        const targetDist = Math.max(
                            this.options.minMouseDistance,
                            dist * (1 - this.options.attractionForce)
                        );
                        const targetX = this.mouse.x - (dx / dist) * targetDist;
                        const targetY = this.mouse.y - (dy / dist) * targetDist;
                        const randomAngle = Math.random() * Math.PI * 2;
                        const randomDist =
                            Math.random() *
                            this.options.randomness *
                            this.options.minMouseDistance;
                        const randomX = Math.cos(randomAngle) * randomDist;
                        const randomY = Math.sin(randomAngle) * randomDist;
                        point.x +=
                            (targetX - point.x + randomX) * this.options.attractionForce;
                        point.y +=
                            (targetY - point.y + randomY) * this.options.attractionForce;
                    }
                }

                // 绘制粒子
                this.ctx.fillStyle = `rgb(${point.color.r}, ${point.color.g}, ${point.color.b})`;
                this.ctx.fillRect(
                    point.x - this.options.size / 2,
                    point.y - this.options.size / 2,
                    this.options.size,
                    this.options.size
                );

                // 绘制连接线
                points.forEach((p2, j) => {
                    if (i === j) return;
                    const dx = point.x - p2.x;
                    const dy = point.y - p2.y;
                    const dist = dx * dx + dy * dy;

                    if (dist < point.max) {
                        const ratio = (point.max - dist) / point.max;
                        const mixedColor = this.mixColors(
                            point.color,
                            p2.color || point.color,
                            ratio
                        );
                        this.ctx.beginPath();
                        this.ctx.lineWidth = ratio / 2;
                        this.ctx.strokeStyle = `rgba(${mixedColor.r}, ${mixedColor.g}

                    , ${mixedColor.b}, ${ratio + 0.2})`;
                        this.ctx.moveTo(point.x, point.y);
                        this.ctx.lineTo(p2.x, p2.y);
                        this.ctx.stroke();
                    }
                });
            });
        }

        // 动画循环
        animate() {
            this.drawParticles();
            requestAnimationFrame(() => this.animate());
        }
    }

    // 按钮管理类
    class ButtonManager {
        constructor(containerId, buttons) {
            this.container = document.getElementById(containerId);
            this.buttons = buttons;
            this.lastScrollTop = 0;
            this.scrollThreshold = 5;
            this.isHidden = false;
            this.init();
            this.initScrollListener();
            this.setTheme();
            this.initThemeObserver();
        }

        init() {
            if (!this.container) {
                console.error("Button container not found");
                return;
            }

            this.buttons.forEach(({ href, text }) => {
                const button = document.createElement("a");
                button.href = href;
                button.target = "_blank";
                button.className = "custom-button";
                button.textContent = text;
                this.container.appendChild(button);
            });
            this.container.style.transition = "transform 0.3s ease-out";
        }

        initScrollListener() {
            let lastScrollY = window.scrollY;
            let ticking = false;

            window.addEventListener("scroll", () => {
                if (!ticking) {
                    window.requestAnimationFrame(() => {
                        this.handleScroll(window.scrollY, lastScrollY);
                        lastScrollY = window.scrollY;
                        ticking = false;
                    });
                    ticking = true;
                }
            });
        }

        handleScroll(currentScrollY, lastScrollY) {
            if (Math.abs(currentScrollY - lastScrollY) > this.scrollThreshold) {
                if (currentScrollY > lastScrollY && !this.isHidden) {
                    this.hideButtons();
                } else if (currentScrollY < lastScrollY && this.isHidden) {
                    this.showButtons();
                }
            }

            if (currentScrollY <= 0) {
                this.showButtons();
            }
        }

        hideButtons() {
            this.container.style.transform = "translateY(100%)";
            this.isHidden = true;
        }

        showButtons() {
            this.container.style.transform = "translateY(0)";
            this.isHidden = false;
        }

        setTheme() {
            setButtonTheme();
            // 更新所有按钮的样式
            const buttons = this.container.querySelectorAll(".custom-button");

            buttons.forEach((button) => {
                button.style.backgroundColor = getComputedStyle(
                    document.documentElement
                ).getPropertyValue("--button-bg-color");
                button.style.color = getComputedStyle(
                    document.documentElement
                ).getPropertyValue("--button-text-color");
                button.style.borderColor = getComputedStyle(
                    document.documentElement
                ).getPropertyValue("--button-border-color");
            });
        }

        initThemeObserver() {
            const observer = new MutationObserver(() => {
                this.setTheme();
            });

            observer.observe(document.body, {
                attributes: true,
                attributeFilter: ["class"],
            });
        }
    }

    // 页面加载完成后初始化
    window.addEventListener("load", () => {
        const loadingIndicator = document.getElementById("loadingIndicator");
        const buttonContainer = document.getElementById("buttonContainer");

        setTimeout(
            () => {
                setTheme();
                window.buttonManager = new ButtonManager(
                    "buttonContainer",
                    CONFIG.buttons
                );
                const particleSystem = new ParticleSystem();
                // 添加 'loaded' 类以触发淡入效果
                buttonContainer.classList.add("loaded");
                particleSystem.canvas.classList.add("loaded");

                // 隐藏加载指示器
                if (loadingIndicator) {
                    loadingIndicator.style.display = "none";
                }
            },

            CONFIG.loadDelay
        );
    });

    function setTheme() {
        const isDarkMode = window.matchMedia(
            "(prefers-color-scheme: dark)"
        ).matches;
        document.body.className = isDarkMode ? "hope-ui-dark" : "hope-ui-light";

        // 创建样式字符串
        const darkStyle = `
        background-color: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(4px) !important;
    `;
        const lightStyle = `
        background-color: rgba(255, 255, 255, 0.7) !important;
        backdrop-filter: blur(10px) !important;
    `;

        // 使用更具体的选择器并应用样式
        const styleElement = document.createElement("style");
        styleElement.textContent = `
        body${isDarkMode ? ".hope-ui-dark" : ".hope-ui-light"
            } .hope-c-PJLV-iubUra-css,
        body${isDarkMode ? ".hope-ui-dark" : ".hope-ui-light"
            } .hope-c-PJLV-ifjOQLV-css {
            ${isDarkMode ? darkStyle : lightStyle}
        }
    `;

        // 移除旧的样式元素(如果存在)
        const oldStyle = document.getElementById("dynamic-theme-style");
        if (oldStyle) {
            oldStyle.remove();
        }

        // 添加新的样式元素
        styleElement.id = "dynamic-theme-style";
        document.head.appendChild(styleElement);

        // 直接设置内联样式作为备份
        const elements = document.querySelectorAll(
            ".hope-c-PJLV-iubUra-css, .hope-c-PJLV-ifjOQLV-css"
        );
        elements.forEach((element) => {
            element.setAttribute("style", isDarkMode ? darkStyle : lightStyle);
        });

        if (window.buttonManager) {
            window.buttonManager.setTheme();
        }
    }

    // 初始设置主题
    setTheme();

    // 监听系统主题变化
    window.matchMedia("(prefers-color-scheme: dark)").addListener(setTheme);

    // 在页面加载完成后再次设置主题,以确保正确应用
    window.addEventListener("load", setTheme);
</script>

用上了感谢我佬!

前排围观支持一下----怎么自定义背景?以及图标,ico

自定义背景可以设置:body[theme]这个元素的:background-image
但有大色块的前提下效果并不好,可以设置卡片透明模糊
头像可以调整:.navbar-brand>img 这个元素

1 Like

body[theme] {
font-family: “MiSans”, “Microsoft YaHei”, Arial, Helvetica, sans-serif;
background-image: url(https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/img/cute-anime-girls-fireworks-festival-lanterns-kimono-apple-candy-blushes-anime-44178.webp)

打开主页一闪而过 还是默认背景

加!important了吗?

1 Like

加没加都试了


我这里是正常的,你可以把网址发我看看

1 Like

破案了 缓存 ,就剩下大黑块了