当前位置：首页 > news >正文

Jellium Desktop皮肤开发入门：创建自己的个性化界面

news 2026/7/25 21:39:52

Jellium Desktop皮肤开发入门：创建自己的个性化界面

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

Jellium Desktop 是一款非官方的 Jellyfin 桌面客户端，它允许用户通过自定义皮肤来打造独特的界面体验。本指南将带你了解如何开始开发自己的 Jellium Desktop 皮肤，从理解主题系统到应用自定义样式，让你的媒体中心焕发新的生机。

了解Jellium Desktop的主题系统 🎨

Jellium Desktop 的主题系统基于 CSS 和 Rust 后端的颜色管理机制构建。核心的主题颜色处理逻辑位于 src/color/src/theme.rs，它负责跟踪和更新应用的主题颜色，包括窗口标题栏和视频背景等元素的颜色同步。

应用通过监听<meta name="theme-color">标签的变化来响应主题切换，这一机制在 src/web/native-shim.js 中实现。当用户切换主题时，Jellyfin Web 前端会更新该标签，Jellium Desktop 则通过 IPC 通信将颜色变化同步到原生窗口。

皮肤开发的基础文件结构 📂

Jellium Desktop 的前端资源主要集中在src/web/目录下，其中与皮肤开发相关的关键文件包括：

src/web/overlay.css：覆盖层样式表，影响弹出窗口和控件的外观
src/web/csd.js：自定义标题栏逻辑，包含与皮肤相关的样式调整
src/web/client-settings.js：客户端设置页面，涉及皮肤相关的 UI 元素控制

此外，主题 CSS 的注入逻辑位于 src/jfn_cef/src/resource.rs，它负责提供app://resources/theme.css资源，该资源定义了基础的主题变量。

开始创建自定义皮肤的步骤 ✨

1. 准备开发环境

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

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

2. 理解主题颜色系统

Jellium Desktop 使用 RGB 颜色值来管理主题颜色。在 src/color/src/lib.rs 中定义了解析<meta name="theme-color">标签值的函数，支持#RGB和#RRGGBB格式。

你可以通过修改 src/jfn_cef/src/resource.rs 中的theme_css()函数来定义自定义的主题变量，例如：

fn theme_css() -> Vec<u8> { let bg_color = 0x101010; // 深灰色背景 format!(":root {{ --bg-color: #{:06X}; }}", bg_color).into_bytes() }

3. 自定义CSS样式

创建自定义皮肤的主要方式是通过添加或修改 CSS 样式。你可以：

直接编辑 src/web/overlay.css 添加自定义样式
在 src/web/native-shim.js 中通过 JavaScript 动态注入样式

例如，要修改标题栏样式，可以在native-shim.js中添加：

// 自定义标题栏样式 const customCss = ` .skinHeader { background-color: var(--custom-header-bg) !important; color: var(--custom-header-text) !important; } `; const style = document.createElement('style'); style.textContent = customCss; document.head.appendChild(style);

4. 测试你的皮肤

修改完成后，使用项目的构建脚本重新编译应用：

# 根据你的操作系统选择适当的构建命令 just linux # Linux just macos # macOS just windows # Windows

运行编译后的应用，查看你的自定义皮肤效果。你可能需要多次调整样式并重新编译，以达到理想的效果。

皮肤开发的高级技巧 🚀

响应式设计

Jellium Desktop 支持不同尺寸的窗口，你可以使用媒体查询来为不同屏幕尺寸设计不同的样式：

@media (max-width: 768px) { .skinHeader { padding: 8px !important; } }

动态主题切换

你可以通过监听主题变化事件，实现动态的皮肤切换。参考 src/web/native-shim.js 中的主题颜色同步逻辑：

// 监听主题颜色变化 const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.target.nodeName === 'META' && mutation.target.name === 'theme-color') { const newColor = mutation.target.content; // 应用新的主题颜色到自定义元素 applyCustomTheme(newColor); } }); }); observer.observe(document.head, { childList: true, subtree: true });