首先启用开发者模式并开启自定义CSS，接着在customCss笔记中定义亮色与暗色主题的CSS变量，并应用于body和侧边栏等元素，然后创建JavaScript脚本通过修改data-theme属性实现主题切换，最后扩展多套主题如“ocean”并更新脚本支持循环切换，完成界面个性化。
如果您希望在Trilium Notes中实现主题切换，并通过HTML与CSS自定义界面样式以获得更美观的视觉体验，可以通过内置的笔记属性和CSS注入功能来达成个性化目标。以下是具体操作步骤：
本文运行环境：MacBook Pro，macOS Sonoma
一、启用开发者模式并定位样式文件
Trilium Notes允许用户通过注入自定义CSS代码修改界面外观。首先需要确保已开启开发者选项，以便访问高级设置。
1、打开Trilium客户端，进入左侧树状笔记结构中的“控制面板”（Control Panel）。
立即学习“前端免费学习笔记（深入）”；
2、点击“选项”（Options），在右侧配置区域找到“允许自定义CSS”（Allow custom CSS）并将其值设为true。
3、保存更改后，在笔记列表中搜索名为“customCss”的系统笔记，双击打开编辑模式。
二、编写基础主题切换CSS结构
通过定义CSS变量和类名切换机制，可以实现一键更换配色方案。该方法利用根元素上的类名控制不同主题的显示效果。
1、在customCss笔记的代码框内添加以下CSS变量定义，用于存储亮色与暗色主题的颜色值：
:root[data-theme=”light”] {
–bg-primary: #ffffff;
–text-normal: #000000;
–sidebar-bg: #f5f5f5;
}
:root[data-theme=”dark”] {
–bg-primary: #1e1e1e;
–text-normal: #e0e0e0;
–sidebar-bg: #2d2d2d;
}
2、应用这些变量到主要UI组件，例如：
body {
background-color: var(–bg-primary);
color: var(–text-normal);
}
#tree-pane {
background-color: var(–sidebar-bg);
}
三、创建JavaScript触发器实现一键切换
Trilium支持通过脚本笔记（Script Note）执行JavaScript代码片段，可用于动态修改页面根元素的data-theme属性。
1、新建一个笔记，将其类型设置为“script”，语言选择“javascript”。
2、输入以下代码用于切换主题：
const root = document.documentElement;
if (root.getAttribute(‘data-theme’) === ‘dark’) {
root.setAttribute(‘data-theme’, ‘light’);
} else {
root.setAttribute(‘data-theme’, ‘dark’);
}
3、保存脚本，并为其分配一个快捷按钮或通过命令面板运行此脚本。
四、预设多套高颜值主题配色方案
可预先设计多种流行风格的主题，如“极简白”、“深海蓝”、“暮色森林”等，提升学习时的视觉舒适度。
1、扩展CSS中的data-theme属性值，例如新增“ocean”主题：
:root[data-theme=”ocean”] {
–bg-primary: #0f1b29;
–text-normal: #a0d8f1;
–sidebar-bg: #1a3a4f;
}
2、同步更新JavaScript脚本中的判断逻辑，使用循环方式依次切换所有预设主题。
3、每次切换后，界面将根据新的CSS变量重新渲染，立即呈现对应风格。
以上就是Trilium主题切换，HTML+CSS学习模式一键高颜值！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596299.html
微信扫一扫 
支付宝扫一扫 
