修改 Uptime-Kuma主题样式

obaby

发布于 2023-03-25 13:15:30

1.5K1

发布于 2023-03-25 13:15:30

文章被收录于专栏：obaby@mars

虽然Uptime-Kuma有自定义css代码的地方，但是作为一个不会前端的全栈工程师，想要修改下样式感觉亚历山大。极其不友好啊，于是就想着看有没有现成的代码可以抄一下，搜索了一下找到了这个网站：https://docs.theme-park.dev/themes/uptime-kuma/

默认的样式也蛮多的：

支持的安装方法也比较多，我是用的是nginx的sub_filter方式安装：

修改nginx代码文件为下面的样式：

 location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;

        proxy_pass http://127.0.0.1:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
proxy_set_header Accept-Encoding "";
    sub_filter
    '</head>'
    '<link rel="stylesheet" type="text/css" href="https://theme-park.dev/css/base/sonarr/hotline.css">
    </head>';
    sub_filter_once on;

}

对应的css文件说明：

https://theme-park.dev/css/base/<APP_NAME>/<THEME_NAME>.css
aquamarine.css
hotline.css
hotpink.css
dracula.css
dark.css
organizr.css
space-gray.css
overseerr.css
plex.css
nord.css
maroon.css
Example: https://theme-park.dev/css/base/sonarr/dark.css

小姐姐当然是用粉色的啊，修改完重启或者重新加载配置文件，就看到效果啦：