修改 Uptime-Kuma主题样式

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

默认的样式也蛮多的:

Aquamarine Theme

Hotline Theme

Hotpink Theme

Dracula Theme

Dark Theme

Organizr Theme

Space-gray Theme

Overseerr Theme

Plex Theme

支持的安装方法也比较多,我是用的是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

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

示例站点:https://up.obaby.org.cn/status/0

 

☆版权☆

* 网站名称:obaby@mars
* 网址:https://obaby.org.cn/
* 个性:https://oba.by/
* 本文标题: 《修改 Uptime-Kuma主题样式》
* 本文链接:https://obaby.org.cn/2023/03/11595
* 短链接:https://oba.by/?p=11595
* 转载文章请标明文章来源,原文标题以及原文链接。请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。


You may also like

11 comments

    1. 公主 Queen 
      Google Chrome 102 Google Chrome 102 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 移动

      嗯嗯。带的几个默认主题都还可以~~可以试试

    1. 公主 Queen 
      Google Chrome 120 Google Chrome 120 Windows 10 Windows 10 cn中国–山东–青岛 联通

      没用过这个,如果不支持代理那就只能改系统文件了。

    2. Level 1
      Google Chrome 121 Google Chrome 121 Windows 10 Windows 10 cn中国–江西–萍乡 联通

      可以在状态页的自定义CSS中引入
      比如`@import url(“https://theme-park.dev/css/base/sonarr/aquamarine.css”);`

  1. Level 1
    Microsoft Edge 122 Microsoft Edge 122 Mac OS X 11.10 Mac OS X 11.10 cn中国–江西–萍乡 联通

    是的,因为我部署在serv00没给root权限折腾出了这个方法。就是需要每个状态页面都设置下css laugh

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注