Typora主题修改、VScode主题

Greate AUK

已于 2022-04-14 21:08:14 修改

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css html css3

于 2022-02-07 22:54:53 首次发布

本文链接：https://blog.youkuaiyun.com/wxkhturfun/article/details/122815957

本文介绍了如何为VScode和Typora编辑器下载及修改主题，推荐了如Dracula、Mlike等优美主题，并分享了个人定制的Dark主题合集，包括对标题样式、侧边栏高亮和代码块颜色等方面的修改，提供了丰富的主题下载链接供读者选择和自定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VScode主题直接去看下面这个网址就行了

https://vscodethemes.com/

前言

https://theme.typora.io/
https://github.com/topics/typora-theme
在官网和github上均可找到相关的主题，自己下载就行了。比较优美的主题有：Dracula、Mlike、Mo Dark、Mint Dark

截止2022-2-7，本人查阅了Dark主题.css，将其下载打包，并进行了少许修改，合集：https://download.youkuaiyun.com/download/wxkhturfun/79602533

修改：基于Mo Dark和Dracula进行了修改，添加了标题下的双下划线、侧边大纲栏的高亮、边距等内容

1.1 标题

/* h1-h6 */
#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;/*修改下划线到下面文字的距离*/
  line-height: 1em;
  padding-top: 0.3em;
}

#write h1 {
  font-size: 2.5em;
  padding-bottom: 0.5em;
  border-bottom: 3px double var(--text-color5);

}

#write h2 {
  font-size: 2em;
  padding-bottom: 0.5em;
  border-bottom: 3px double var(--text-color5);
}

#write h3 {
  font-size: 1.75em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--text-color5);
}

#write h4 {
  font-size: 1.55em;
}

#write h5 {
  font-size: 1.35em;
}

#write h6 {
  font-size: 1.2em;
}

/* horizontal divider */
hr {
  height: 1px;
  background-color: var(--text-color5);
  border: 0px;
}

1.2 sidebar

/* sidebar outline item hover and active */
.outline-item:hover {
  color: var(--hover-text-color);
}

.outline-label:hover {
  text-decoration: none;
}

.pin-outline .outline-active {
  color: var(--hover-text-color);
}

/* sidebar title hover */
.info-panel-tab:hover {
  color: var(--hover-text-color) !important;
}

1.3 代码块颜色

/* code fences */
.md-fences {
  font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #222526;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  margin-bottom: 2.5rem;
  border: none;
  border-radius: 6px;
}

1.4文件

因为时不时折腾，所以给自己留了个备份：
https://download.youkuaiyun.com/download/wxkhturfun/79602533
dracula.css
github-night-high-contrast.css
github-night.css
github.css
gothic.css
han.css
mint-dark.css
mint.css
mlike-light.css
mlike.css
mo-dark.css
mo.css
newsprint.css
night.css
notes-dark.css
onedark.css
pixyll.css
whitey.css
xydark.css
xydarkfocus.css
xylight.css