Joplin自定义CSS主题美化：打造个性化笔记界面

Joplin CSS自定义入门

Joplin作为一款开源的笔记应用，提供了强大的CSS自定义能力。用户可以通过修改用户样式表来完全控制笔记的显示效果，从字体、颜色到布局结构，都能按照个人喜好进行调整。本文将系统讲解Joplin自定义CSS的各种应用场景和实用技巧。

启用自定义CSS

打开用户样式表

Joplin的自定义CSS文件名为userstyle.css，可以通过以下步骤打开：

1. 在Joplin菜单中选择「工具 → 选项」
2. 切换到「外观」标签页
3. 点击「编辑CSS」按钮
4. 在弹出的编辑器中编写CSS代码
5. 保存后立即生效

注意：CSS修改会实时反映在笔记预览中，无需重启Joplin。但Markdown编辑器中的渲染效果可能与预览区略有差异。

CSS文件位置

不同操作系统下userstyle.css的默认路径：

基础样式自定义

字体设置

调整笔记正文字体是最常见的CSS自定义需求：

/* 正文字体 */
body {
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

/* 标题字体 */
h1, h2, h3, h4, h5, h6 {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-weight: 700;
}

标题样式美化

为不同级别的标题添加颜色和间距：

h1 {
    font-size: 1.8em;
    color: #1a73e8;
    border-bottom: 2px solid #1a73e8;
    padding-bottom: 8px;
    margin-top: 1.5em;
}

h2 {
    font-size: 1.5em;
    color: #2c3e50;
    border-left: 4px solid #1a73e8;
    padding-left: 12px;
    margin-top: 1.2em;
}

h3 {
    font-size: 1.25em;
    color: #34495e;
    margin-top: 1em;
}

段落与间距

优化阅读体验的段落间距设置：

p {
    margin-bottom: 1em;
    letter-spacing: 0.02em;
}

/* 首行缩进（可选） */
p {
    text-indent: 2em;
}

代码块样式美化

行内代码

code {
    background-color: #f0f0f0;
    color: #c7254e;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
    font-size: 0.9em;
}

代码块

为代码块添加更美观的样式：

pre {
    background-color: #282c34;
    color: #abb2bf;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
    font-size: 14px;
    line-height: 1.6;
}

pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

表格样式优化

默认的Joplin表格比较朴素，通过CSS可以让表格更加美观：

/* 表格基础样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95em;
}

/* 表头样式 */
th {
    background-color: #1a73e8;
    color: white;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
}

/* 单元格样式 */
td {
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
}

/* 斑马纹效果 */
tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* 悬浮高亮 */
tr:hover {
    background-color: #e3f2fd;
}

引用块与提示框

引用块美化

blockquote {
    border-left: 4px solid #1a73e8;
    background-color: #f8f9fa;
    margin: 1em 0;
    padding: 12px 16px;
    color: #555;
    border-radius: 0 6px 6px 0;
}

blockquote p {
    margin-bottom: 0;
}

列表样式

/* 无序列表项间距 */
ul li, ol li {
    margin-bottom: 0.3em;
}

/* 列表项标记颜色 */
ul li::marker {
    color: #1a73e8;
}

ol li::marker {
    color: #1a73e8;
    font-weight: 700;
}

暗色模式适配

如果你的Joplin使用暗色主题，需要相应调整CSS：

/* 暗色模式变量 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1e1e1e;
        color: #d4d4d4;
    }

    h1 {
        color: #61afef;
        border-bottom-color: #61afef;
    }

    h2 {
        color: #e5c07b;
        border-left-color: #61afef;
    }

    code {
        background-color: #2d2d2d;
        color: #e06c75;
    }

    blockquote {
        background-color: #2d2d2d;
        color: #b0b0b0;
    }

    table tr:nth-child(even) {
        background-color: #2a2a2a;
    }

    td {
        border-bottom-color: #404040;
    }
}

高级CSS技巧

自定义复选框样式

Joplin的待办事项使用复选框，可以通过CSS美化：

/* 复选框样式 */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    accent-color: #1a73e8;
    cursor: pointer;
}

/* 已完成项样式 */
li:has(input[type="checkbox"]:checked) {
    text-decoration: line-through;
    color: #999;
}

链接样式

a {
    color: #1a73e8;
    text-decoration: none;
    border-bottom: 1px dashed #1a73e8;
    transition: color 0.2s;
}

a:hover {
    color: #0d47a1;
    border-bottom-style: solid;
}

分割线美化

hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, #1a73e8, transparent);
    margin: 2em 0;
}

CSS调试技巧

使用开发者工具

1. 在Joplin中按Ctrl+Shift+I打开开发者工具
2. 切换到Elements面板
3. 选中需要修改的元素
4. 在右侧Styles面板中实时调试CSS
5. 将满意的样式复制到userstyle.css中

常见选择器参考

CSS模板分享

以下是一个完整的CSS模板，整合了上述所有美化效果，可以直接复制使用：

/* Joplin 美化主题 v1.0 */
body {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

h1 { font-size: 1.8em; color: #1a73e8; border-bottom: 2px solid #1a73e8; padding-bottom: 8px; }
h2 { font-size: 1.5em; color: #2c3e50; border-left: 4px solid #1a73e8; padding-left: 12px; }
h3 { font-size: 1.25em; color: #34495e; }

code { background: #f0f0f0; color: #c7254e; padding: 2px 6px; border-radius: 3px; }
pre { background: #282c34; color: #abb2bf; padding: 16px; border-radius: 8px; }

table { width: 100%; border-collapse: collapse; }
th { background: #1a73e8; color: white; padding: 10px; }
td { padding: 8px; border-bottom: 1px solid #e0e0e0; }
tr:nth-child(even) { background: #f8f9fa; }

blockquote { border-left: 4px solid #1a73e8; background: #f8f9fa; padding: 12px 16px; border-radius: 0 6px 6px 0; }

总结

Joplin的CSS自定义功能为用户提供了极大的自由度，通过合理的CSS配置，可以让笔记界面既美观又实用。建议从基础的字体和颜色调整开始，逐步添加代码块、表格等高级样式，最终打造出符合个人审美的笔记界面。对于不熟悉CSS的用户，可以直接使用本文提供的CSS模板作为起点，再根据需要进行微调。