自己动手修改 Typora 主题

Posted on | In

一入 dark 深似海？……入了深色模式的大坑，发现各种应用主题的适配成为一个头痛的问题，这边才把 Logseq 摆平（话说安利我深色模式的还是 Obsidian……），那边 Typora 的问题就出来了，找了一圈主题各种不满意，自己写吧姿势水平又不够，还是老办法，找个模板改改

找的过程仔细看了下 Typora 的官网，才发现开发者高瞻远瞩，早就把我们这类眼高手低的补丁控安排的明明白白

base.user.css

先在 theme 文件夹里新建一个 base.user.css，里面的规则会对所有 theme 生效（懒但又爱折腾用户福音），这里可以放一些通用规则，例如字体风格和字体大小、标题样式之类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        body {
        font-family:"xhei believe";
        font-size: 22px;
        line-height: 2;
        }

        #write{
        max-width: 900px;
            margin: 0 auto;
            padding: 20px 30px 40px 30px;
            padding-top: 20px;
        }

        h1,h2,h3,h4,h5,h6 {line-height: 2.2;}

        h1 {font-size: 1.6em; font-weight: 900;margin: 1.8em 0 1em;}
        h2 {font-size: 1.4em; font-weight: 500;margin: 1.8em 0 0;}
        h3 {font-size: 1.2em; font-weight: 500;margin: 1.8em 0 0;}
        h4 {font-size: 1.1em; font-weight: 400;margin: 1.8em 0 0;}

night.user.css

接着再在 theme 文件夹里新建一个 night.user.css（night 是需要打补丁的 css 名称，反正都是要改，所以选择更稳定的默认主题），这里放一些针对 ngiht 的特殊规则，例如颜色、颜色还有颜色什么的……具体操作和 自己动手修改 Logseq 主题类似，复制需要覆盖的代码，修改保存收工

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
:root {
    --bg-color:  #0D1117;
    --side-bar-bg-color: #171C23;
    --text-color: rgb(235, 235, 235) !important;

    --select-text-bg-color:#4a89dc;

    --item-hover-bg-color: #0a0d16;
    --control-text-color: #b7b7b7;
    --control-text-hover-color: #eee;
    --window-border: 1px solid #555;

    --active-file-bg-color: rgb(34, 34, 34);
    --active-file-border-color: #8d8df0;

    --primary-color: #a3d5fe;

    --active-file-text-color: white;
    --item-hover-bg-color: #70717d;
    --item-hover-text-color: white;
    --primary-color: #6dc1e7;

    --rawblock-edit-panel-bd: #333;

    --search-select-bg-color: #428bca;
}

html,
body,
button,
input,
select,
textarea,
div.code-tooltip-content {
    color: var(--text-color);
    border-color: transparent;
}

pre.md-fences {background: #171C23;}

其他

Typora 的调试和 Logseq 有些区别，一方面软件本身可以呼出开发者工具（需要先在 偏好设置 通用 高级设置 中开启调试模式，再在正文中右键检查元素）更方便，一方面 css 的修改不是实时更新需要重启软件，但总的来说大同小异
顺便，Win10 碍眼的标题栏又要立功了，在偏好设置 外观 窗口样式 中选择一体化就可以眼不见为净了
至此，一款个人深度定制的 Logseq 同款 Typora 就出炉了