Obsidian 主题篇 - 类 Typora 风格的主题设置
来源
- 触发点：原生的 Obsidian 主题外观不忍直视，想要类似 Typora 风格的主题，折腾后记录此笔记
- 首次记录：2025-02-11
- 作者：huan
极简洞见
- 本篇文章适用于 Obsidian 类 Typora GitHub 风格的主题，习惯 Typora 风格的用户可以无缝过渡使用。
- 此主题样式的初版在网络上可以检索搜到的，根据自己的一些需求修改优化后。支持深浅两种主题模式，可以复制粘贴代码直接使用。
- 原文地址：Obsidian主题篇-类Typora风格的主题设置。
详情展开
深浅主题预览
操作步骤
- 复制一下代码内容，本地另存后缀为
.css的文件
/* 浅色模式 */
.theme-light {
--h1-color: #e01616;
--h2-color: #d8701b;
--h3-color: #0f7e0c;
--h4-color: #7f1cc2;
--h5-color: #165cc5;
--h6-color: #7a0e29;
/*
--h1-color: #0f7e0c;
--h2-color: #3c49dc;
--h3-color: #0f7e0c;
--h4-color: #3c49dc;
--h5-color: #0f7e0c;
--h6-color: #3c49dc;
*/
/* list 相关样式 */
--list-spacing: 0.3rem;
--list-marker-color:#696969;
/* 表格颜色交替 */
--table-row-alt-background: #f8f8f8;
/* 代码块颜色 */
--code-normal: var(--text-nornal);
--code-background: #f8f8f8;
/* 链接颜色 */
--link-external-color: #4183c4;
/* 导航栏字体 */
--nav-item-color: black;
--nav-item-weight: 500;
--nav-item-size: 97%;
/* 导航栏图标颜色 */
--nav-collapse-icon-color: #777;
--nav-collapse-icon-color-collapsed: #222;
/* 引用 */
--blockquote-border-thickness: 4px;
--blockquote-border-color: #42b983;
/*--blockquote-border-color: rgb(223, 226, 229); */
/* 选中文字的背景色 */
--text-selection: #7CA4EB;
/* 降低亮度至 85% */
filter: brightness(95%);
/* inline 代码块 */
span.cm-inline-code {
background-color: #f3f4f4 !important;
border: 1px solid #e7eaed;
}
}
/* 深色模式下的调整 */
.theme-dark {
--h1-color: #e01616;
--h2-color: #d8701b;
--h3-color: #0f7e0c;
--h4-color: #7f1cc2;
--h5-color: #165cc5;
--h6-color: #7a0e29;
/* list 相关样式 */
--list-spacing: 0.3rem;
--list-marker-color:#E0FFFF;
/* 表格颜色交替 */
--table-row-alt-background: #363636;
/* 代码块颜色 */
--code-normal: var(--text-nornal);
--code-background:#363636;
/* 链接颜色 */
--link-external-color: #6ccda4;
/* 导航栏字体 */
--nav-item-color: white
--nav-item-weight: 500;
--nav-item-size: 97%;
/* 导航栏图标颜色 */
--nav-collapse-icon-color: #777;
--nav-collapse-icon-color-collapsed: #222;
/* 引用 */
--blockquote-border-thickness: 4px;
--blockquote-border-color: #42b983;
/* 选中文字的背景色 */
--text-selection: #7CA4EB;
/* 降低亮度至 85% */
filter: brightness(100%);
/* inline 代码块 */
span.cm-inline-code {
background-color: #363636 !important;
border: 1px solid #363636;
}
}
/* quiet-outline */
.quiet-outline .n-tree-node-content {
font-weight: 500;
}
/* 标题 */
.HyperMD-header {
padding-bottom: 0.4rem !important;
#border-bottom: 1px solid ＃FA8072;
}
/* 引用 */
.HyperMD-quote {
color: #777;
}
/* 隐藏链接图片 */
.external-link {
padding-right: 0;
background-size: 0;
}
/* 代码块缩进 */
.HyperMD-codeblock {
tab-size: 4;
}
/* list 行首添加空白 */
.HyperMD-list-line > .cm-formatting-list + span:before {
content: ' ';
}
/* list 相关样式 */
/* https://forum.obsidian.md/t/style-bullets-in-lists-by-level/46152 */
.markdown-source-view.mod-cm6 :is(.HyperMD-list-line-1, .HyperMD-list-line-5) .list-bullet:after {
/* Bullet */
height: 5.5px;
width: 5.5px;
border-radius: 50%;
background-color: var(--list-marker-color);
}
.markdown-source-view.mod-cm6 :is(.HyperMD-list-line-2, .HyperMD-list-line-6) .list-bullet:after {
/* Hollow Bullet */
height: 4px;
width: 4px;
background-color: Transparent;
border-color: var(--list-marker-color);
border-style: solid;
border-radius: 50%;
border-width: 1.5px;
}
.markdown-source-view.mod-cm6 :is(.HyperMD-list-line-3, .HyperMD-list-line-7) .list-bullet:after {
/* Solid Square */
height: 5.5px;
width: 5.5px;
border-radius: 0%;
background-color: var(--list-marker-color);
}
.markdown-source-view.mod-cm6 :is(.HyperMD-list-line-4, .HyperMD-list-line-8) .list-bullet:after {
/* Hollow Square */
height: 4px;
width: 4px;
background-color: Transparent;
border-color: var(--list-marker-color);
border-style: solid;
border-radius: 0%;
border-width: 1.5px;
}
/* https://forum.obsidian.md/t/adding-caption-to-images/16431/24 */
/* 图片居中 */
img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
.markdown-source-view.mod-cm6 .cm-content > * {
margin: auto auto !important;
}
/* 图片下面显示 alt text */
.image-embed[alt]:after {
content: attr(alt);
display: block;
margin: 0.2rem 1rem 1rem 1rem;
font-size: 90%;
line-height: 1.4;
color: var(--text-faint);
text-align: center;
}
/* 编辑模式：修改不同级别标题的字体大小和颜色 */
.HyperMD-header-1, .inline-title[data-level='1'], .HyperMD-list-line .cm-header-1 {
font-variant: var(--h1-variant);
letter-spacing: -0.015em;
line-height: var(--h1-line-height);
font-size: var(--h1-size);
color: var(--h1-color);
text-align: center;
font-weight: var(--h1-weight);
font-style: var(--h1-style);
font-family: var(--h1-font);
}
.HyperMD-header-2, .inline-title[data-level='2'], .HyperMD-list-line .cm-header-2 {
font-variant: var(--h2-variant);
letter-spacing: -0.015em;
line-height: var(--h2-line-height);
font-size: var(--h2-size);
color: var(--h2-color);
text-align: center;
font-weight: var(--h2-weight);
font-style: var(--h2-style);
font-family: var(--h2-font);
}
.HyperMD-header-3, .inline-title[data-level='3'], .HyperMD-list-line .cm-header-3 {
font-variant: var(--h3-variant);
letter-spacing: -0.015em;
line-height: var(--h3-line-height);
font-size: var(--h3-size);
color: var(--h3-color);
font-weight: var(--h3-weight);
font-style: var(--h3-style);
font-family: var(--h3-font);
}
.HyperMD-header-4, .inline-title[data-level='4'], .HyperMD-list-line .cm-header-4 {
font-variant: var(--h4-variant);
letter-spacing: -0.015em;
line-height: var(--h4-line-height);
font-size: var(--h4-size);
color: var(--h4-color);
font-weight: var(--h4-weight);
font-style: var(--h4-style);
font-family: var(--h4-font);
}
.HyperMD-header-5, .inline-title[data-level='5'], .HyperMD-list-line .cm-header-5 {
font-variant: var(--h5-variant);
letter-spacing: -0.015em;
line-height: var(--h5-line-height);
font-size: var(--h5-size);
color: var(--h5-color);
font-weight: var(--h5-weight);
font-style: var(--h5-style);
font-family: var(--h5-font);
}
.HyperMD-header-6, .inline-title[data-level='6'], .HyperMD-list-line .cm-header-6 {
font-variant: var(--h6-variant);
letter-spacing: -0.015em;
line-height: var(--h6-line-height);
font-size: var(--h6-size);
color: var(--h6-color);
font-weight: var(--h6-weight);
font-style: var(--h6-style);
font-family: var(--h6-font);
}
/* 阅读模式：修改不同级别标题的字体大小和颜色 */
h1, .markdown-rendered h1 {
font-variant: var(--h1-variant);
letter-spacing: -0.015em;
line-height: var(--h1-line-height);
font-size: var(--h1-size);
color: var(--h1-color);
text-align: center;
font-weight: var(--h1-weight);
font-style: var(--h1-style);
font-family: var(--h1-font);
margin-block-start: var(--p-spacing);
margin-block-end: var(--p-spacing);
}
h2, .markdown-rendered h2 {
font-variant: var(--h2-variant);
letter-spacing: -0.015em;
line-height: var(--h2-line-height);
font-size: var(--h2-size);
color: var(--h2-color);
text-align: center;
font-weight: var(--h2-weight);
font-style: var(--h2-style);
font-family: var(--h2-font);
margin-block-start: var(--p-spacing);
margin-block-end: var(--p-spacing);
}
h3, .markdown-rendered h3 {
font-variant: var(--h3-variant);
letter-spacing: -0.015em;
line-height: var(--h3-line-height);
font-size: var(--h3-size);
color: var(--h3-color);
font-weight: var(--h3-weight);
font-style: var(--h3-style);
font-family: var(--h3-font);
margin-block-start: var(--p-spacing);
margin-block-end: var(--p-spacing);
}
h4, .markdown-rendered h4 {
font-variant: var(--h4-variant);
letter-spacing: -0.015em;
line-height: var(--h4-line-height);
font-size: var(--h4-size);
color: var(--h4-color);
font-weight: var(--h4-weight);
font-style: var(--h4-style);
font-family: var(--h4-font);
margin-block-start: var(--p-spacing);
margin-block-end: var(--p-spacing);
}
h5, .markdown-rendered h5 {
font-variant: var(--h5-variant);
letter-spacing: -0.015em;
line-height: var(--h5-line-height);
font-size: var(--h5-size);
color: var(--h5-color);
font-weight: var(--h5-weight);
font-style: var(--h5-style);
font-family: var(--h5-font);
margin-block-start: var(--p-spacing);
margin-block-end: var(--p-spacing);
}
h6, .markdown-rendered h6 {
font-variant: var(--h6-variant);
letter-spacing: -0.015em;
line-height: var(--h6-line-height);
font-size: var(--h6-size);
color: var(--h6-color);
font-weight: var(--h6-weight);
font-style: var(--h6-style);
font-family: var(--h6-font);
margin-block-start: var(--p-spacing);
margin-block-end: var(--p-spacing);
}
/* 保持Mermaid图容器居中 */
div.mermaid {
text-align: center;
margin: 0 auto; /* 避免容器左右溢出，优化居中效果 */
}- 设置 →外观 →CSS 代码片段中选定样式后刷新就可以。
关联网络
- Obsidian原则篇：分享个人使用 Obsidian 时设立的那些原则。
- Obsidian基础篇-类Typora的个人向快捷键设置：个人对于 Obsidian 快捷键的设置。
演化日志
- v0.1 (2025-02-11)：初始版本，分享主题样式代码
- v0.2 (2025-02-15)：补充总结、操作步骤
- v0.3 (2025-03-08)：补充主题预览图片
- v0.4 (2025-10-20)：补充来源、洞见、关联网络、演化日志，完善笔记结构