Loading ...

说明:本文适用于Alist>=3.31

Info: This article is for Alist>=3.31 .

日夜主题美化

打开alist-header.html,编辑以下内容,将四个引号内的.png换成你的图片连接。

Open alist-header.html and edit it, make sure .png links in thr quote replaced with your own link to the image.

.hope-ui-light {
    background-image:url("白天图片横屏|Daythemehorizontal.png") !important;
    @media (max-aspect-ratio:1) {
        background-image:url("白天图片竖屏|Daythemevertical.png") !important;
    }
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position-x:center
}
.hope-ui-dark {
     background-image:url("黑夜图片横屏|Nightthemehorizontal.png") !important;
    @media (max-aspect-ratio:1) {
        background-image:url("黑夜图片竖屏|Nightthemevertical.png") !important;
    }
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position-x:center
}

然后打开Alist,登录管理员账号并进入管理页面。依次点击:三 > 设置 > 全局 将修改后内容全选,复制粘贴到 自定义头部 中。

Then open Alist, enter manage page and click by the following order: 三 > Settings > Global .Now select thr whole modified file content and copy and paste it into Customize head .

点击 保存 ,大功告成!

Click on the Save button and everything is done!

日夜主题一键切换

日夜切换按钮可以单独引用 ,也可以删除

Day/Night switch button is available for standalone usage or you can delete it.

<!--日夜切换按钮单独使用 | Standalone usage for day/night switch button-->
<script>
    function daynightswitch() {
        if (document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-icHSmvX-css")[0]) {
            document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-icHSmvX-css")[0].$$click();

        } else {
            if (document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-ifkxHPo-css")[1]) {
                if (document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-ifkxHPo-css")[7]) {
                    document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-ifkxHPo-css")[7].$$click();
                } else { document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-ifkxHPo-css")[1].$$click(); }
                document.getElementsByClassName("hope-drawer__content-container hope-c-gLUHnt hope-c-fxrEBZ hope-c-fxrEBZ-llmmsr-placement-right hope-c-PJLV hope-c-PJLV-ijhzIfm-css")[0].style.display = 'None';
                document.getElementsByClassName("hope-drawer__overlay hope-c-ctSAUo hope-c-PJLV hope-c-PJLV-ijhzIfm-css")[0].style.display = 'None';
                document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-icHSmvX-css")[0].$$click();
                document.getElementsByClassName("hope-modal__close-button hope-c-gYVOHl hope-close-button hope-c-iNeqtt hope-c-iNeqtt-feqEsd-size-md hope-c-PJLV hope-c-PJLV-ijhzIfm-css")[0].click();
            } else {
                document.getElementsByClassName("toolbar-toggle hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-ifkxHPo-css")[0].$$click();
                if (document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-ifkxHPo-css")[9]) {
                    document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-ifkxHPo-css")[9].$$click();
                } else { document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-ifkxHPo-css")[1].$$click(); }
                document.getElementsByClassName("hope-drawer__content-container hope-c-gLUHnt hope-c-fxrEBZ hope-c-fxrEBZ-llmmsr-placement-right hope-c-PJLV hope-c-PJLV-ijhzIfm-css")[0].style.display = 'None';
                document.getElementsByClassName("hope-drawer__overlay hope-c-ctSAUo hope-c-PJLV hope-c-PJLV-ijhzIfm-css")[0].style.display = 'None';
                document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-icHSmvX-css")[0].$$click();
                document.getElementsByClassName("hope-modal__close-button hope-c-gYVOHl hope-close-button hope-c-iNeqtt hope-c-iNeqtt-feqEsd-size-md hope-c-PJLV hope-c-PJLV-ijhzIfm-css")[0].click();
                if (document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-ifkxHPo-css")[8]) {
                    document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-ifkxHPo-css")[8].$$click();
                } else { document.getElementsByClassName("hope-icon hope-c-XNyZK hope-c-PJLV hope-c-PJLV-ifkxHPo-css")[2].$$click(); }
            }
        }
        location.reload();
    }
    document.write(`<button
    class="hope-menu__trigger hope-c-bvjbhC hope-c-PJLV hope-c-PJLV-ieTGfmR-css hope-icon-button hope-button hope-c-ivMHWx hope-c-ivMHWx-kcPQpq-variant-subtle hope-c-ivMHWx-cEknLI-size-lg hope-c-ivMHWx-dvmlqS-cv hope-c-ivMHWx-hZistB-cv hope-c-PJLV hope-c-PJLV-iikaotv-css"
    type="button" role="button" id="hope-menu-daynight-switch-trigger" aria-label="switch layout"><svg t="1733225100292"
        class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4397"
        xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
        <path
            d="M512 0c282.7776 0 512 229.2224 512 512s-229.2224 512-512 512S0 794.7776 0 512 229.2224 0 512 0z m0 51.2a460.8 460.8 0 0 0-13.568 921.3952L512 972.8v-256a204.8 204.8 0 1 0 0-409.6V51.2z m0 256v409.6a204.8 204.8 0 1 1 0-409.6z"
            fill="currentColor" p-id="4398"></path>
    </svg></button>`)
    document.getElementById("hope-menu-daynight-switch-trigger").addEventListener("click", daynightswitch);
</script>