Obsidian_个性化主题

Obsidian上的主题样式非常多, 我之前使用了 typora_vue 这个主题, 并且直接修改了下载后的文件,但这样会在升级后被覆盖
其实官方提供了一个设置的地方, 可以让我们覆盖样式, 就是 外观--css代码片段, 把自己的css样式文件放到指定文件夹就行, 不影响原主题的升级, 想取消把开关关闭即可
直接打开开发工具view-Toggle Developer Tools, 按自己的需求写css就行
写的css不是很满意, 但懒得找全局变量和优化了, 不想花太多时间在工具上了

提供下我自己的样式:

给官方的大纲功能添加序号

效果如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
/* container of first layer headings. */
.outline {
  counter-reset: rootCounter;
}

.outline .tree-item .tree-item-self .tree-item-inner::before {
  content: counters(rootCounter, ".") ". ";
  counter-increment: rootCounter;
}

/* container of the ohter headings. */
/* NOTE: It is not .outline anymore. So we need a new counter */
.outline .tree-item-children {
  counter-reset: innerCounter;
}

.outline .tree-item-children .tree-item .tree-item-self .tree-item-inner::before {
  content: counters(rootCounter, ".") "." counters(innerCounter, ".") ". ";
  counter-increment: innerCounter;
}

让typora-vue的h标签提示常驻, 其实就是把原主题的:hover选择器去掉

效果如下:

 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
/*Header BEGIN*/
.markdown-preview-view h1, .markdown-preview-view h2, .markdown-preview-view h3, .markdown-preview-view h4, .markdown-preview-view h5, .markdown-preview-view h6{
  position:relative;
}

.markdown-preview-view h1::before, .HyperMD-header .cm-header-1::before{
    content: 'h1';
    position: absolute;
    font-size: 10px;
    color: rgb(56 132 255);
    font-weight: 400;
    width: auto;
    left: -19px;
    border: 1px solid;
    padding: 0px 2px;
    border-radius: 3px;
    top: 1px;
}

.markdown-preview-view h2::before, .HyperMD-header .cm-header-2::before{
    content: 'h2';
    position: absolute;
    font-size: 10px;
    color: rgb(56 132 255);
    font-weight: 400;
    width: auto;
    margin: 0;
    left: -20px;
    border: 1px solid;
    padding: 0px 2px;
    border-radius: 3px;
    top: -4px;
}

.markdown-preview-view h3::before, .HyperMD-header .cm-header-3::before{
    content: 'h3';
    position: absolute;
    font-size: 10px;
    color: rgb(56 132 255);
    font-weight: 400;
    width: auto;
    margin: 0;
    left: -20px;
    border: 1px solid;
    padding: 0px 2px;
    border-radius: 3px;
    top: -6px;
}

.markdown-preview-view h4::before, .HyperMD-header .cm-header-4::before{
    content: 'h4';
    position: absolute;
    font-size: 10px;
    color: rgb(56 132 255);
    font-weight: 400;
    width: auto;
    margin: 0;
    left: -21px;
    border: 1px solid;
    padding: 0px 2px;
    border-radius: 3px;
    top: -8px;
}

.markdown-preview-view h5::before, .HyperMD-header .cm-header-5::before{
   content: 'h5';
    position: absolute;
    font-size: 10px;
    color: rgb(56 132 255);
    font-weight: 400;
    width: auto;
    margin: 0;
    left: -20px;
    border: 1px solid;
    padding: 0px 2px;
    border-radius: 3px;
    top: -11px;
}

.markdown-preview-view h6::before, .HyperMD-header .cm-header-6::before{
    content: 'h6';
    position: absolute;
    font-size: 10px;
    color: rgb(56 132 255);
    font-weight: 400;
    width: auto;
    margin: 0;
    left: -20px;
    border: 1px solid;
    padding: 0px 2px;
    border-radius: 3px;
    top: -11px;
}
/*Header END*/

更改字体加粗效果, 原主题的加粗看不清. 把无序列表的小圆点改了下外观, 二级三级的和一级的不一样(没四级了). 激活文件的图标高亮颜色.

效果如下:

 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
/* 加粗字体 */

.cm-strong {
    font-weight:800;
}

/* 列表样式 */
.list-bullet:after {
    width:6px;
    height:6px;
    background-color:var(--text-normal);
}

.cm-list-2 .list-bullet:after {
    width:4px;
    height:4px;
    border-radius: 50%;
    background: none; 
    border: 1px solid var(--text-normal);
}

.cm-list-3 .list-bullet:after {
    width:5px;
    height:5px;
    border-radius:0;
    background-color:rgba(0, 0, 0, 0.5);
}

/* 激活文件图标颜色 */
.nav-file-title.is-active .obsidian-icon-folder-icon svg {
    fill: rgb(56 132 255);
}