优选字体与typora主题颜色

tips
, , ,

搜集一些养眼的颜色值, 注意不同的环境下搭配也是很重要的, 比如豆沙绿配黑色 ,其实并不舒服. 我自己发现了豆沙绿配上深绿, 意外的适合Linux/shell环境.

0x00.颜色表

Color RGB HEX
米黄色 (247,238,214) #F7EED6
豆沙绿(推荐) (199,237,204) #CCE8CF
秋麒麟黄 (250,250,210) #FAFAD2
米白色(推荐) (247,245,240) #F7F5F0
淡乳白(推荐,可配合米白) (243, 239, 226) #F3EFE2
书卷黄 (245,222,179) #F5DEB3
淡灰色 (220,220,220)T #DCDCDC
蛋壳色 (252,230,201) #FCE6C9

0x01.搭配组合

优先考虑色温中Blue少的,减少蓝光损伤.
其次选择缓和的颜色,纯白,鲜红/黄/等亮色均避免.
个人总结:(bg:背景色 front:字体色)

  1. bg-豆沙绿 front-纯黑

  2. bg-豆沙绿 front-深绿 ->rgb(0,128,0)(这种意外不错且适合xshell)

0x02.typora主题设置

更新于: 2018.08.15

首先Typora最推荐的默认主题肯定是Themes --> Whitey . 因为其他的1~5级标题实在太同调化. 且没有LaTex的简洁大气感觉. 但是默认的设置或者长期的黑白搭配可能也不太舒适. 需要DIY一下. 其次推荐个人写的Solarized , 但是需要稍微改改CSS样式和背景色

Typora非常人性的在于主题css是非常好修改调整的~ 这是我常用调整

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/*注释行都是我修改过的地方,不是原本值*/
html {
 font-size: 19px; /*整体字大小,看个人情况修改*/
}

html, body {
 margin: auto;
 background: #F7F5F0;  /*Whitey是修改这个,其他注意一般名字是bg-color.自己找一下*/
}

#write {
 max-width: 960px;  /*整个主题的宽度,默认的比较窄会导致代码段显示总是不太合适.*/
 margin: 0 auto;
 margin-bottom: 2em;
 line-height: 1.53;
}

code,
pre {
 font-family: "Consolas", "Menlo", "Monaco", monospace, serif;
 font-size: .9em;
    /*↓ 这是`code`的颜色,默认是用的白色,建议修改为其他颜色,pink意外不错 */
 background: #DCDCDC; 
}

table {
 margin-bottom: 1.333333rem;
 background-color: #f3efe2; /*这个淡白是我在取色板调了很久出来的...*/
}

/*ctrl+f搜索background-color,background,h2等,然后修改*/
h1, 
h2, 
h3{
 text-align: center;  /*这是默认值,其他主题可以自己改*/
}

h2:after{ /* 特有的下划线或者css可通过f12顶位. */
 border-bottom: 1px solid #3b3939; 
    content: '';
    width: 100px;
    display: block;
    margin: 0 auto;
    height: 1px;
}

/*最后修改顶部meta的颜色,注意这有三个(两个boder),统一为好*/
#write pre.md-meta-block {
 white-space: pre;
 background: #f3f1ec;
 border: 0px;
 color: #999;
 
 width: 100vw;
 max-width: calc(100% + 60px);
 margin-left: -30px;
 border-left: 30px #f3f1ec  solid;
 border-right: 30px #f3f1ec solid;

 margin-bottom: 2em;
 margin-top: -1.3333333333333rem;
 padding-top: 26px;
 padding-bottom: 10px;
 line-height: 1.8em;
 font-size: 0.9em;
 font-size: 0.76em;
 padding-left: 0;
}

调整完无需重启Typora, 直接ctrl+n 新打开一个就能看到修改后的效果了. 当然, 更快的做法是打开一个文档后, 关闭然后 ctrl+shift+t 快速打开, ctrl+w 关闭~

特别注意 : typora目前更新的时候貌似会更新覆盖原本的主题css 文件. 所以如果你直接修改的原本主题,记得备份,以免覆盖后重新配置…

8.21更新: typora已经很人性的检测主题修改, 并会自动保存在主题目录下的old-Themes 中. 但是要注意如果你连续多个版本没有替换, 可能还是会被覆盖的. 所以建议还是自己备份到其他文件夹

0x03.字体收集

  1. Microsoft YaHei(移动端适合)
  2. DengXian
  3. Courier New
  4. Lucida Sans Typewriter (适合Linux)
  5. Gill Sans MT

后话

有觉得不错的搭配组合也可以在这补充一下.

保护一下眼睛,也为自己构建一个完整的theme做铺垫.