修改Joplin主题样式

Tools , , 评论

Joplin主题

直接在设置中的“插件”选项中搜索 “macos theme”安装，然后重启后打开macos theme 这个插件，打开该插件对应的设置页面，将样式调成_light_模式，同时Joplin本身的外观设置也需要保持_亮色_模式。再次重启Joplin，发现全局主题已经改变。此外，该插件主题也同时支持暗色主题和自定义主题颜色。

Markdown渲染样式

将源码复制至Joplin配置中的_userstyle.css_中即可，该配置文件可以从_工具_——>_选项_——>_外观_——>_显示高级选项_——>_适用于已渲染Markdown的自定义样式表_中找到。Mac 下路径为

~/.config/joplin-desktop/userstyle.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

pre, code {
  font-size: 14px;
  font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace;
  margin: auto 5px;
}

code {
  white-space: pre-wrap;
  border-radius: 2px;
  display: inline;
}

pre {
  font-size: 15px;
  line-height: 1.4em;
  display: block; !important;
}

pre code {
  white-space: pre;
  overflow: auto;
  border-radius: 3px;
  padding: 1px 1px;
  display: block !important;
}

strong, b{
  color: #BF360C;
}

em, i {
  color: #009688;
}

hr {
  border: 1px solid #BF360C;
  margin: 1.5em auto;
}

p {
  margin: 1.5em 5px !important;
}

table, pre, dl, blockquote, q, ul, ol {
  margin: 10px 5px;
}

ul, ol {
  padding-left: 15px;
}

li {
  margin: 10px;
}

li p {
  margin: 10px 0 !important;
}

ul ul, ul ol, ol ul, ol ol {
  margin: 0;
  padding-left: 10px;
}

ul {
  list-style-type: circle;
}

dl {
  padding: 0;
}

dl dt {
  font-size: 1em;
  font-weight: bold;
  font-style: italic;
}

dl dd {
  margin: 0 0 10px;
  padding: 0 10px;
}

blockquote, q {
  border-left: 2px solid #009688;
  padding: 0 10px;
  color: #777;
  quotes: none;
  margin-left: 1em;
}

blockquote::before, blockquote::after, q::before, q::after {
  content: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-style: bold !important;
  color: #009688 !important;
  text-align: center !important;
  margin: 1.5em 5px !important;
  padding: 0.5em 1em !important;
}

h1 {
  font-size: 24px !important;
}

h2 {
  font-size: 20px !important;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}


table {
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1em;
  font: inherit;
  border: 0;
  margin: 0 auto;
}

tbody {
  margin: 0;
  padding: 0;
  border: 0;
}

table tr {
  border: 0;
  border-top: 1px solid #CCC;
  background-color: white;
  margin: 0;
  padding: 0;
}

table tr:nth-child(2n) {
  background-color: #F8F8F8;
}

table tr th, table tr td {
  font-size: 16px;
  border: 1px solid #CCC;
  margin: 0;
  padding: 5px 10px;
}

table tr th {
  font-weight: bold;
  color: #eee;
  border: 1px solid #009688;
  background-color: #009688;
}

复制完成后保存，重启Joplin即可。

问题及解决方法

当使用_macos theme_的插件主题之后，插件中的主题样式会覆盖部分的_自定义CSS样式_，可以通过在_自定义CSS样式_后添上!important强制使用自定义的样式。
对上文中的 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168


pre, code {
  font-size: 14px !important;
  font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace !important;
  margin: auto 5px !important;
}

code {
  white-space: pre-wrap !important;
  border-radius: 2px !important;
  display: inline !important;
}

pre {
  font-size: 15px !important;
  line-height: 1.4em !important;
  display: block; !important;
}

pre code {
  white-space: pre !important;
  overflow: auto !important;
  border-radius: 3px !important;
  padding: 1px 1px !important;
  display: block !important;
}

strong, b{
  color: #BF360C !important;
}

em, i {
  color: #009688 !important;
}

hr {
  border: 1px solid #BF360C !important;
  margin: 1.5em auto !important;
}

p {
  margin: 1.5em 5px !important;
}

table, pre, dl, blockquote, q, ul, ol {
  margin: 10px 5px !important;
}

ul, ol {
  padding-left: 15px !important;
}

li {
  margin: 10px !important;
}

li p {
  margin: 10px 0 !important;
}

ul ul, ul ol, ol ul, ol ol {
  margin: 0 !important;
  padding-left: 10px !important;
}

ul {
  list-style-type: circle !important;
}

dl {
  padding: 0 !important;
}

dl dt {
  font-size: 1em !important;
  font-weight: bold !important;
  font-style: italic !important;
}

dl dd {
  margin: 0 0 10px !important;
  padding: 0 10px !important;
}

blockquote, q {
  border-left: 2px solid #009688 !important;
  padding: 0 10px !important;
  color: #777 !important;
  quotes: none !important;
  margin-left: 1em !important;
}

blockquote::before, blockquote::after, q::before, q::after {
  content: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px !important;
  padding: 0 !important;
  font-style: bold !important;
  color: #009688 !important;
  text-align: center !important;
  margin: 1.5em 5px !important;
  padding: 0.5em 1em !important;
}

h1 {
  font-size: 24px !important;
  border-bottom: 1px solid #ddd !important;
}

h2 {
  font-size: 20px !important;
  border-bottom: 1px solid #eee !important;
}

h3 {
  font-size: 18px !important;
}

h4 {
  font-size: 16px !important;
}


table {
  padding: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  font-size: 1em !important;
  font: inherit !important;
  border: 0 !important;
  margin: 0 auto !important;
}

tbody {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

table tr {
  border: 0 !important;
  border-top: 1px solid #CCC !important;
  background-color: white !important;
  margin: 0 !important;
  padding: 0 !important;
}

table tr:nth-child(2n) {
  background-color: #F8F8F8 !important;
}

table tr th, table tr td {
  font-size: 16px !important;
  border: 1px solid #CCC !important;
  margin: 0 !important;
  padding: 5px 10px !important;
}

table tr th {
  font-weight: bold !important;
  color: #eee !important;
  border: 1px solid #009688 !important;
  background-color: #009688 !important;
}

更改后发现自定义的CSS样式不再会被插件主题样式覆盖。