classin无内置暗黑模式,但可通过四种方法实现深色主题:一、系统级联动;二、手动修改css文件;三、网页版devtools注入样式;四、系统显示调节与浏览器扩展辅助。

如果您在使用 ClassIn 时希望降低屏幕亮度、缓解视觉疲劳或适配夜间学习环境,则可能需要启用深色主题。ClassIn 官方客户端未内置全局“暗黑模式”开关,但可通过系统级适配与界面元素局部调整实现深色效果。以下是多种可行的切换方法:
一、启用系统级深色模式联动
ClassIn 桌面端(Windows/macOS)会自动响应操作系统设置。当系统开启深色模式后,ClassIn 的部分界面组件(如侧边栏、弹窗背景、按钮状态)将自动采用深色配色,无需额外操作。
1、在 Windows 系统中,进入「设置」→「个性化」→「颜色」→「选择默认应用模式」,将选项设为深色;
2、在 macOS 系统中,进入「系统设置」→「外观」→ 选择深色;
3、重启 ClassIn 客户端,观察主界面顶部导航栏、课程列表区域及设置面板是否呈现灰黑系背景。
二、手动修改 ClassIn 主题CSS文件(Windows/macOS适用)
ClassIn 桌面客户端使用 Electron 构建,其 UI 样式由本地 CSS 文件控制。通过编辑内置样式表,可强制覆盖为深色主题,适用于无系统联动权限或需深度定制的场景。
1、关闭正在运行的 ClassIn 进程;
2、定位 ClassIn 安装目录下的 CSS 文件路径:
Windows 示例:C:\Program Files\ClassIn\resources\app\renderer\css\main.css
macOS 示例:/Applications/ClassIn.app/Contents/Resources/app/renderer/css/main.css;
3、用文本编辑器(如 VS Code 或记事本)以管理员权限打开该 main.css 文件;
4、在文件末尾新增以下 CSS 规则:
body { background-color: #1e1e1e !important; color: #e0e0e0 !important; }
.sidebar, .header, .course-list-item { background-color: #2d2d2d !important; }
.btn-primary, .btn-default { background-color: #3a3a3a !important; border-color: #555 !important; }
5、保存文件,重新启动 ClassIn,检查主界面是否生效。
三、利用浏览器开发者工具临时注入深色样式(仅限网页版ClassIn)
若使用 ClassIn 网页版(classin.xdf.cn),可通过浏览器 DevTools 注入自定义 CSS 实现即时深色渲染,该方式不修改任何本地文件,刷新页面后需重置,适合快速验证效果。
1、登录 ClassIn 网页版并进入任意课堂或首页;
2、按 F12 打开开发者工具,切换至「Console」标签页;
3、粘贴并执行以下 JavaScript 代码:
const style = document.createElement('style'); style.textContent = 'body { background: #121212 !important; color: #f0f0f0 !important; } .container, .card, .panel { background: #1e1e1e !important; }'; document.head.appendChild(style);
4、页面立即呈现深色背景与高对比文字,此操作仅当前标签页有效。
四、调整系统显示缩放与色彩滤镜辅助降亮(全平台通用)
当无法直接修改 ClassIn 主题时,可借助系统级显示调节手段模拟深色体验,尤其适用于教育机构统一部署、禁止修改客户端文件的场景。
1、Windows 用户:进入「设置」→「辅助功能」→「颜色滤镜」,开启滤镜并选择灰度或深褐色模式;
2、macOS 用户:进入「系统设置」→「辅助功能」→「显示」→ 开启智能反转或经典反转;
3、Chrome 浏览器用户(网页版):安装扩展程序「Dark Reader」,为其指定 classin.xdf.cn 域名启用动态过滤模式。











