styles.scss

@use "sass:selector";

@mixin codeAndFrontmatter($child) {
  #{selector.unify(".cm-hmd-frontmatter", $child)},
  #{selector.unify(".cm-math", $child)},
  pre.HyperMD-codeblock #{$child} {
    @content;
  }
}

.cm-s-obsidian pre.HyperMD-codeblock span.cm-formatting-code-block {
  color: var(--text-muted);
}

.cm-s-obsidian pre.HyperMD-codeblock .cm-keyword {
  font-weight: normal;
}

.cm-s-obsidian {
  .theme-dark & {
    /*

    Name:       yoncé
    Author:     Thomas MacLean (http://github.com/thomasmaclean)

    Original yoncé color scheme by Mina Markham (https://github.com/minamarkham)

    */
    .cm-hmd-frontmatter,
    pre.HyperMD-codeblock {
      color: #d4d4d4;
    }

    @include codeAndFrontmatter(".cm-keyword") {
      color: #00A7AA;
      font-weight: normal;
    }

    @include codeAndFrontmatter(".cm-atom") {
      color: #F39B35;
    }
    
    @include codeAndFrontmatter(".cm-number") {
      color: #A06FCA;
    }
    @include codeAndFrontmatter("span.cm-type") {
      color: #A06FCA;
    }
    
    /**/
    @include codeAndFrontmatter(".cm-def") {
      color: #98E342;
    }
    
    @include codeAndFrontmatter(".cm-property") {
      color: #D4D4D4;
    }
    @include codeAndFrontmatter("span.cm-variable") {
      color: #D4D4D4;
    }
    
    @include codeAndFrontmatter("span.cm-variable-2") {
      color: #da7dae;
    }
    
    @include codeAndFrontmatter("span.cm-variable-3") {
      color: #A06FCA;
    }
    
    @include codeAndFrontmatter(".cm-type.cm-def") {
      color: #FC4384;
    }
    
    @include codeAndFrontmatter(".cm-property.cm-def") {
      color: #FC4384;
    }
    
    @include codeAndFrontmatter(".cm-callee") {
      color: #FC4384;
    }
    
    @include codeAndFrontmatter(".cm-operator") {
      color: #FC4384;
    }
    
    @include codeAndFrontmatter(".cm-qualifier") {
      color: #FC4384;
    }
    @include codeAndFrontmatter(".cm-tag") {
      color: #FC4384;
    }
    
    @include codeAndFrontmatter(".cm-tag.cm-bracket") {
      color: #D4D4D4;
    }
    
    @include codeAndFrontmatter(".cm-attribute") {
      color: #A06FCA;
    }
    
    @include codeAndFrontmatter(".cm-comment") {
      color: #696d70;
    }
    
    @include codeAndFrontmatter(".cm-comment.cm-tag") {
      color: #FC4384
    }
    
    @include codeAndFrontmatter(".cm-comment.cm-attribute") {
      color: #D4D4D4;
    }
    
    @include codeAndFrontmatter(".cm-string") {
      color: #E6DB74;
    }
    
    @include codeAndFrontmatter(".cm-string-2") {
      color: #F39B35;
    }
    
    @include codeAndFrontmatter(".cm-meta") {
      color: #D4D4D4;
      background: inherit;
    }
    
    @include codeAndFrontmatter(".cm-builtin") {
      color: #FC4384;
    }
    
    @include codeAndFrontmatter(".cm-header") {
      color: #da7dae;
    }
    
    @include codeAndFrontmatter(".cm-hr") {
      color: #98E342;
    }
    
    @include codeAndFrontmatter(".cm-link") {
      color: #696d70;
    }
    
    @include codeAndFrontmatter(".cm-error") {
      border-bottom: 1px solid #C42412;
    }
    
    @include codeAndFrontmatter(".CodeMirror-activeline-background") {
      background: #272727;
    }
    
    @include codeAndFrontmatter(".CodeMirror-matchingbracket") {
      outline: 1px solid grey;
      color: #D4D4D4 !important;
    }
  }
}