改变聚焦模式的样式 #

TL;DR

你可以通过添加以下 css 来简化改变非聚焦段落的文本颜色。

:root {
  --blur-text-color: #FFF;
}

如果你想要更高级的样式配置,你可以按照以下方式进行。

/*Following are LESS code for better css structure*/

.on-focus-mode {
  /* under focus mode*/

  .md-end-block:not(.md-focus):not(.md-focus-container) {

    * {
      /* use color close to background for un-focused block */
      color: #C8C8C8 !important;
    }

    img{
      /* make img and element less attractive */
      opacity: 50%;
    }
  }

  .task-list-item:not(.md-focus-container)>input {
    /* make the check mark on task list less attractive*/
    opacity: 50%;
  }

  .md-fences.md-focus .CodeMirror-code>*:not(.CodeMirror-activeline) *,
  .CodeMirror.cm-s-inner:not(.CodeMirror-focused) * {
      /*lines in unfocused code fences, and unfocused lines in focused code fence*/
    color: #C8C8C8 !important;
  }

  li[cid]:not(.md-focus-container) {
    color: #C8C8C8 !important;
  }

  #typora-source .CodeMirror-code>*:not(.CodeMirror-activeline) * {
    /*source code mode under focus mode*/
    color: #C8C8C8 !important;
  }

  .md-focus,
  .md-focus-container {
    /* for text in current focused block */
    color: #111;
  }

}

请注意当聚焦模式被启用时,<body> dom 会有类 on-focus-mode,而聚焦的块级元素会有类 md-focus

可以包含 md-focus 类的块是不能包含子块的块,并且会包含一个 md-end-block 类。例如,<blockquote> 可以包含像 <p> 这样的子块,所以它没有 md-end-block 类,而 h1 会有该类。md-focus-container 类将适用于 li,它包含一个 .md-focus 块。