修改 Uptime-Kuma主题样式

虽然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

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

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

☆版权☆

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

obaby

爱好广泛的火星小妖精，有问题欢迎留言交流啊~(✪ω✪) 爬虫类工具请先点击这个链接查看用法https://oba.by/?p=12240 闺蜜圈APP下载 https://guimiquan.cn

11 comments

网友小宋说道：

2023年3月25日 02:23

Microsoft Edge 110 Android 12 Asia/Shanghai
不错不错，我还在想找找一些样式

回复
小熊说道：

2023年3月25日 11:55

Microsoft Edge 111 Windows 10 四川省雅安市移动
这个样式还挺好看的

回复
1. obaby说道：
  
  2023年3月25日 13:39
  
  Google Chrome 102 Mac OS X 10.15 山东省青岛市移动
  嗯嗯。带的几个默认主题都还可以~~可以试试
  
  回复
TeacherDu说道：

2023年3月29日 17:27

Microsoft Edge 111 Windows 10 Beijing Beijing
默认的就很好看了！

回复
1. obaby说道：
  
  2023年3月29日 17:30
  
  Google Chrome 102 Mac OS X 10.15 山东省济南市移动
  不够粉嫩，喜欢粉腻腻
  
  回复
Overbye说道：

2024年3月23日 09:49

Microsoft Edge 122 Windows 11 山东省青岛市联通
好看的，但部署在HuggingFace的这种应该如何修改样式呢 https://linux.do/t/topic/31141

回复
1. obaby说道：
  
  2024年3月23日 15:31
  
  Google Chrome 120 Windows 10 山东省青岛市联通
  没用过这个，如果不支持代理那就只能改系统文件了。
  
  回复
2. 瓶说道：
  
  2024年4月16日 14:24
  
  Google Chrome 121 Windows 10 江西省萍乡市联通
  可以在状态页的自定义CSS中引入
  比如`@import url(“https://theme-park.dev/css/base/sonarr/aquamarine.css”);`
  
  回复
  1. obaby说道：
    
    2024年4月16日 15:00
    
    Google Chrome 118 Mac OS X 10.15 山东省青岛市联通
    酱紫的吗，那这个方法的确更简单呢
    
    回复
瓶说道：

2024年4月20日 16:22

Microsoft Edge 122 Mac OS X 11.10 江西省萍乡市联通
是的，因为我部署在serv00没给root权限折腾出了这个方法。就是需要每个状态页面都设置下css

回复
1. obaby说道：
  
  2024年4月20日 16:47
  
  Google Chrome 120 Windows 10 山东省青岛市胶州市联通
  嗯嗯，不过这个方法更简单
  
  回复