Jellium Desktop皮肤开发教程：视频指导

Jellium Desktop皮肤开发教程：视频指导

【免费下载链接】jellium-desktopAn unofficial desktop client for Jellyfin项目地址: https://gitcode.com/GitHub_Trending/je/jellium-desktop

Jellium Desktop是一款非官方的Jellyfin桌面客户端，为用户提供了丰富的媒体播放体验。本教程将指导你如何为Jellium Desktop开发自定义皮肤，通过视频指导的方式，让你轻松掌握皮肤开发的核心技巧。

皮肤开发基础：了解主题结构

Jellium Desktop的皮肤系统基于CSS和JavaScript构建，主要通过以下文件实现主题定制：

• 主题样式核心文件：src/web/overlay.css 该文件定义了客户端的基础样式，包括颜色、布局和动画效果。例如，你可以通过修改--bg-color变量来改变应用的背景色：

  body { background: var(--bg-color); color: #ddd; }

• 主题颜色同步机制：src/web/native-shim.js 客户端通过监听<meta name="theme-color">标签来同步标题栏颜色，当用户切换主题时，Jellyfin Web的themeManager.js会更新该标签：

  // 同步标题栏颜色与theme-color元标签 const meta = document.querySelector('meta[name="theme-color"]'); if (color && window.jmpNative && window.jmpNative.themeColor) { window.jmpNative.themeColor(color); }

视频指导：从零开始创建自定义皮肤

1. 准备开发环境

首先，克隆Jellium Desktop仓库到本地：

git clone https://gitcode.com/GitHub_Trending/je/jellium-desktop

进入项目目录后，安装依赖并启动开发服务器。皮肤开发主要涉及src/web目录下的CSS和JavaScript文件，建议使用VS Code等编辑器进行开发，并安装实时重载插件以提高效率。

2. 修改基础样式

打开src/web/overlay.css文件，你可以修改以下关键样式：

• 颜色方案：通过修改--bg-color等CSS变量定义主题色
• 布局调整：调整.logo、#container等选择器的尺寸和位置
• 动画效果：自定义@keyframes规则实现过渡动画

例如，将按钮颜色修改为绿色主题：

button { background: #4CAF50; /* 绿色 */ } button:hover:not(:disabled) { background: #45a049; /* 深绿色 */ }

3. 同步主题颜色到标题栏

Jellium Desktop支持将主题颜色同步到系统标题栏，通过修改src/web/native-shim.js中的代码实现：

// 自定义主题颜色同步逻辑 function syncThemeColor() { const meta = document.querySelector('meta[name="theme-color"]'); const customColor = '#2E7D32'; // 自定义绿色 meta.content = customColor; if (window.jmpNative && window.jmpNative.themeColor) { window.jmpNative.themeColor(customColor); } } // 在页面加载时调用 window.addEventListener('load', syncThemeColor);

4. 测试与应用皮肤

修改完成后，重新构建应用并运行：

# 根据不同平台选择构建命令 just linux # Linux just macos # macOS just windows # Windows

启动应用后，你将看到自定义的皮肤效果。可以通过修改CSS变量和JavaScript逻辑，进一步调整主题细节，实现个性化的视觉体验。

高级技巧：动态主题切换

Jellium Desktop支持根据不同场景动态切换主题，例如在视频播放时自动切换到深色模式。相关逻辑在src/jfn_cef/src/business_web.rs中实现：

// 根据媒体类型设置视频模式 jfn_theme_color_set_video_mode(meta.media_type == MT_VIDEO);

你可以扩展此功能，添加自定义的主题切换规则，例如根据时间或用户偏好自动切换皮肤。

总结

通过本教程，你已经了解了Jellium Desktop皮肤开发的基本流程和核心文件。通过修改CSS样式和JavaScript逻辑，你可以创建个性化的主题，提升媒体播放体验。希望视频指导能帮助你快速掌握皮肤开发技巧，打造属于自己的Jellium Desktop主题！

Jellium Desktop Logo - 自定义皮肤可修改此图片的显示样式

【免费下载链接】jellium-desktopAn unofficial desktop client for Jellyfin项目地址: https://gitcode.com/GitHub_Trending/je/jellium-desktop