jinghu-moon / typora-see-yue-theme

See Yue 系列主题是一个自定义样式极多、简约、充满细节的 Typora 主题。(The See Yue series theme is a Typora theme with a plethora of custom styles, minimalism, and full of details.)
https://theme.typora.io/theme/see-yue/
207 stars 20 forks source link

定制代码块配色问题 #66

Closed lllllmaster-lulllll closed 7 months ago

lllllmaster-lulllll commented 7 months ago

作者你好,首先感谢你的这个项目,我才能搞到满意的typora主题,现在有个问题,我想使用codemirror中的mignight代码块主题色,但是,你说的以Nord为例我没有看明白,能再稍微详细点儿吗?

未命名
jinghu-moon commented 7 months ago

方法

  1. 访问 CodeMirror: Theme Demo ,选择符合自己的主题。
  2. 下载主题代码文件 https://codemirror.net/5/codemirror.zip
  3. 解压 codemirror.zip,进入 codemirror\codemirror-5.65.16\theme\ 路径,打开 midnight.css
  4. 将代码内关键字 midnight 替换为 inner
  5. midnight 是暗黑主题,则打开 SeeYue\CSS\code-block\dark-theme.css 文件。
  6. 修改后midnight.css 内容复制到 dark-theme.css,重启 Typora,即可。

如果无法下载 codemirror.zip,就复制以下内容,覆盖 dark-theme.css,效果一样。

/* Based on the theme at http://bonsaiden.github.com/JavaScript-Garden */

/*<!--activeline-->*/
.cm-s-inner .CodeMirror-activeline-background {
  background: #253540;
}

.cm-s-inner.CodeMirror {
  background: #0F192A;
  color     : #D1EDFF;
}

.cm-s-inner div.CodeMirror-selected {
  background: #314D67;
}

.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line>span::selection,
.cm-s-inner .CodeMirror-line>span>span::selection {
  background: rgba(49, 77, 103, .99);
}

.cm-s-inner .CodeMirror-line::-moz-selection,
.cm-s-inner .CodeMirror-line>span::-moz-selection,
.cm-s-inner .CodeMirror-line>span>span::-moz-selection {
  background: rgba(49, 77, 103, .99);
}

.cm-s-inner .CodeMirror-gutters {
  background  : #0F192A;
  border-right: 1px solid;
}

.cm-s-inner .CodeMirror-guttermarker {
  color: white;
}

.cm-s-inner .CodeMirror-guttermarker-subtle {
  color: #d0d0d0;
}

.cm-s-inner .CodeMirror-linenumber {
  color: #D0D0D0;
}

.cm-s-inner .CodeMirror-cursor {
  border-left: 1px solid #F8F8F0;
}

.cm-s-inner span.cm-comment {
  color: #428BDD;
}

.cm-s-inner span.cm-atom {
  color: #AE81FF;
}

.cm-s-inner span.cm-number {
  color: #D1EDFF;
}

.cm-s-inner span.cm-property,
.cm-s-inner span.cm-attribute {
  color: #A6E22E;
}

.cm-s-inner span.cm-keyword {
  color: #E83737;
}

.cm-s-inner span.cm-string {
  color: #1DC116;
}

.cm-s-inner span.cm-variable {
  color: #FFAA3E;
}

.cm-s-inner span.cm-variable-2 {
  color: #FFAA3E;
}

.cm-s-inner span.cm-def {
  color: #4DD;
}

.cm-s-inner span.cm-bracket {
  color: #D1EDFF;
}

.cm-s-inner span.cm-tag {
  color: #449;
}

.cm-s-inner span.cm-link {
  color: #AE81FF;
}

.cm-s-inner span.cm-error {
  background: #F92672;
  color     : #F8F8F0;
}

.cm-s-inner .CodeMirror-matchingbracket {
  text-decoration: underline;
  color          : white !important;
}
lllllmaster-lulllll commented 7 months ago

image image 感谢 现在好看多了 等过两天想提个增加主题的mr 如果可以的话 感谢