1. 项目概述
theme.park是一个面向自托管应用的开源主题项目，它允许用户为各种自托管服务（如Plex、Sonarr、Radarr、qBittorrent等）快速应用统一风格的现代化界面。作为一个长期使用自托管服务的用户，我发现很多服务的原生UI设计风格差异很大，切换使用时体验割裂。theme.park通过提供一套精心设计的主题系统，完美解决了这个问题。
这个项目最大的价值在于它的"一站式"特性 - 你不再需要为每个服务单独寻找和配置主题，theme.park提供了统一的解决方案。它支持超过20种流行的自托管应用，并且主题设计遵循现代UI/UX原则，在保持功能完整性的同时大幅提升了视觉体验。
2. 核心功能解析
2.1 多应用主题支持
theme.park目前支持的应用包括但不限于：
- 媒体服务器：Plex、Emby、Jellyfin
- 下载工具：qBittorrent、Transmission
- *arr系列：Sonarr、Radarr、Lidarr等
- 其他工具：Tautulli、Overseerr、Organizr等
每个应用的主题都经过精心适配，确保在改变外观的同时不影响原有功能。例如，Plex主题保留了所有原生功能按钮的位置和交互逻辑，只是通过CSS重新设计了视觉样式。
2.2 主题定制系统
theme.park提供了强大的主题定制能力：
- 预设主题：包含10+精心设计的预设主题，如"Midnight"、"Honeycomb"等
- 颜色定制：通过CSS变量可以轻松修改主色调、辅助色等
- 布局调整：部分主题支持布局微调（如侧边栏位置、卡片大小等）
提示：所有定制都通过CSS变量实现，这意味着你可以直接在浏览器开发者工具中实时预览修改效果，满意后再应用到配置文件中。
3. 安装与配置指南
3.1 基础安装
theme.park支持多种安装方式，推荐使用Docker方式部署：
bash复制docker run -d \
--name=theme.park \
-p 8080:8080 \
-v /path/to/config:/config \
ghcr.io/gilbn/theme.park:latest
安装完成后，访问http://your-server-ip:8080即可看到管理界面。
3.2 应用主题配置
以Plex为例，配置theme.park主题的步骤：
- 在Plex服务器设置中启用"允许自定义CSS"
- 在theme.park界面选择Plex主题并自定义样式
- 复制生成的CSS链接
- 粘贴到Plex的"自定义CSS"设置中并保存
html复制<!-- 示例Plex主题链接 -->
<link rel="stylesheet" href="http://your-theme.park-server/plex/theme.css">
3.3 反向代理配置
为提高安全性，建议通过Nginx配置反向代理：
nginx复制server {
listen 80;
server_name themes.yourdomain.com;
location / {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
4. 高级使用技巧
4.1 主题混合与匹配
theme.park允许混合使用不同主题的元素。例如，你可以：
- 使用Midnight主题的配色方案
- 结合Honeycomb主题的图标风格
- 采用Space主题的字体设置
实现方法是在CSS链接中添加多个参数：
code复制http://your-server/plex/theme.css?preset=midnight&icons=honeycomb&font=space
4.2 动态主题切换
通过简单的JavaScript代码，可以实现基于时间的自动主题切换：
javascript复制const hour = new Date().getHours();
const isNight = hour > 18 || hour < 6;
const theme = isNight ? 'midnight' : 'solar';
document.querySelector('link[rel="stylesheet"]').href =
`http://your-server/plex/theme.css?preset=${theme}`;
5. 常见问题解决
5.1 主题不生效排查
如果应用主题后没有变化，按以下步骤排查：
- 确认服务端已启用自定义CSS支持
- 检查CSS链接是否正确加载（浏览器开发者工具Network面板）
- 清除浏览器缓存后重试
- 确保没有其他扩展程序（如Dark Reader）干扰
5.2 性能优化
对于资源受限的服务器：
- 启用Gzip压缩减少CSS文件大小
- 设置适当的缓存头（如Cache-Control: max-age=86400）
- 考虑使用CDN加速主题文件分发
Nginx配置示例：
nginx复制gzip on;
gzip_types text/css;
location ~* \.css$ {
expires 1d;
add_header Cache-Control "public";
}
6. 主题开发与贡献
6.1 创建自定义主题
theme.park支持用户贡献自己的主题设计。基本流程：
- Fork项目仓库
- 在
src/themes目录下创建新主题文件夹 - 编写SCSS样式文件
- 提交Pull Request
主题文件结构示例：
code复制my-theme/
├── _variables.scss # 主题变量定义
├── plex.scss # Plex专用样式
└── shared.scss # 通用样式
6.2 主题测试与验证
开发过程中可以使用内置的实时预览功能：
- 启动开发服务器：
npm run dev - 访问
localhost:3000/preview - 选择目标应用和主题进行实时调试
注意：修改SCSS文件后会自动重新编译，无需手动刷新页面。
7. 安全最佳实践
7.1 访问控制
建议配置基础认证保护theme.park管理界面：
nginx复制location / {
auth_basic "ThemePark Admin";
auth_basic_user_file /etc/nginx/.htpasswd;
proxy_pass http://localhost:8080;
}
7.2 定期更新
theme.park会定期发布安全更新，建议：
- 订阅项目GitHub的Release通知
- 使用Watchtower自动更新Docker容器
- 定期检查依赖项漏洞（
npm audit）
自动更新命令示例：
bash复制docker run -d \
--name watchtower \
-v /var/run/docker.sock:/var/run/docker.sock \
containrrr/watchtower \
--cleanup \
--interval 3600
8. 与其他工具的集成
8.1 与Organizr整合
Organizr用户可以通过以下步骤深度整合theme.park：
- 在Organizr设置中启用"自定义CSS"
- 使用theme.park的Organizr专用主题
- 配置统一的导航栏样式
整合后的效果：
- 所有服务的界面风格保持一致
- 导航体验无缝衔接
- 统一的暗黑/明亮模式切换
8.2 自动化部署
对于需要管理多台服务器的情况，可以使用Ansible实现自动化部署：
yaml复制- name: Deploy Theme.Park
hosts: media_servers
tasks:
- name: Pull Docker image
docker_image:
name: ghcr.io/gilbn/theme.park
tag: latest
source: pull
- name: Run container
docker_container:
name: theme.park
image: ghcr.io/gilbn/theme.park:latest
ports:
- "8080:8080"
volumes:
- "/opt/theme.park/config:/config"
restart_policy: always
在实际使用中，我发现theme.park最实用的功能是它的"全局暗黑模式"。很多自托管服务的原生暗黑模式要么不完善，要么需要单独设置。通过theme.park，我可以用一个配置为所有服务启用一致的暗黑主题，大大减轻了眼睛疲劳。特别是在夜间管理服务器时，统一的暗黑界面让工作变得更加舒适。