标准的自适应主题例子 【JadeView V2】

荼泱

JadeView 主题切换方案文档

JadeView V2 开发文档

一、实现原理

采用 前端下发指令 + 后端控制主题 + 前端监听内核事件 的解耦架构，核心流程如下：

1. 前端仅负责发送主题切换指令（light/dark/system），不直接修改页面样式；
2. 后端（Rust/C++）通过内核 API 修改窗口 PreferredColorScheme；
3. WebView2 内核感知主题变更后，自动触发 prefers-color-scheme 媒体cha询事件；
4. 前端唯一监听该事件，根据内核真实状态同步页面样式，实现全局主题统一。

核心设计：后端控权、前端响应，彻底解耦前后端样式逻辑，避免状态不一致。

二、前端核心 API（IPC 调用）

1. setWindowTheme

功能：设置窗口主题（浅色/深色/跟随系统）
调用方式

await jade.invoke('setWindowTheme', { theme: "Light" | "Dark" | "System" });

参数说明

• theme：字符串，可选值 Light（浅色）、Dark（深色）、System（跟随系统）

2. setTitlebarOverlayStyle

功能：适配主题，设置标题栏覆盖层样式（图标颜色、悬浮背景）
调用方式

await jade.invoke('setTitlebarOverlayStyle', {
  height: -1,
  icon_color: "#FFFFFF" | "#1E1E1E",
  hover_bg: "#33333380" | "#DCDCDC80"
});

参数说明

• height：数字，固定传 -1（自适应）
• icon_color：字符串，图标颜色（深色模式用白色、浅色模式用深色）
• hover_bg：字符串，悬浮背景色（带透明度）

3. 内核事件监听

功能：感知 WebView2 内核真实主题状态，同步页面样式
使用方式

// 初始化媒体cha询对象
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

// 监听主题变更事件
mediaQuery.addEventListener('change', (e) => {
  const isDark = e.matches;
  // 唯一入口：根据内核状态更新页面样式（如添加/移除 .dark 类）
  document.documentElement.classList.toggle('dark', isDark);
});

// 初始化执行一次，同步初始状态
mediaQuery.dispatchEvent(new Event('change'));

三、后端对接要点（Rust/C++）

1. 注册 IPC 处理器

通过 register_ipc_handler 绑定前端调用的 setWindowTheme、setTitlebarOverlayStyle 方法，接收前端指令。

2. 窗口主题设置

调用内核接口 set_window_theme(window_id, theme)，传入窗口 ID 和主题参数（Light/Dark/System），修改系统级窗口主题。

3. 事件转发

确保 JadeView  内核将主题变更事件正常转发到前端，触发前端 prefers-color-scheme 监听回调。

四、关键设计优势

• 解耦清晰：前后端各司其职，无样式逻辑交叉；
• 状态一致：以内核真实状态为唯一标准，避免前后端状态错位；
• 易扩展：新增主题或样式时，仅需修改前端监听逻辑，无需改动后端核心；
• 适配原生：贴合系统原生主题机制，体验一致。

源码下载：

本例子由Ai驱动开发，仅易语言手动适配
Python 与 易语言

游客，如果您要查看本帖隐藏内容请回复

Gm98

6666666666666

bianyuan456

已经顶贴，感谢您对论坛的支持！

By未命名

看不明白，等于说要会写html才行是不

By未命名

看看是啥东东

鱼雨遇玉羽

感谢分享

tiancai88888888

666谢谢分享

alanwoo

  感谢分享

少年包工头

6666666666666661

灿烂的微笑

谢谢分享