Trilium主题切换教程，高颜值HTMLCSS教学

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《Trilium主题切换，HTML CSS高颜值教程》，聊聊，我们一起来看看吧！

首先启用开发者模式并开启自定义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主题切换教程，高颜值HTMLCSS教学》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于html的内容请关注golang学习网公众号！