自己动手修改 Typora 主题

/ 0评 / 0

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

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

base.user.css

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

        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 主题类似,复制需要覆盖的代码,修改保存收工

: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 就出炉了

相关文章

发表评论

您的电子邮箱地址不会被公开。