MediaWiki:Vector-darkmode.less/darksyntax.less

/* ==========================

Extension:CodeMirror syntax highlighting

Classes explained here: <https://meta.wikimedia.org/wiki/Community_Tech/Wikitext_editor_syntax_highlighting> Colors based on the One Dark syntax theme: <https://github.com/atom/atom/tree/master/packages/one-dark-syntax>

  ========================== */

/* --------------------------

           COLORS
  -------------------------- */

// define the following commented vars in the file that is importing /darksyntax.less //@codemirror-background: ; //@codemirror-text-color: ; //@codemirror-selection-color: ; //@codemirror-bracket-matcher-background: ; @codemirror-red: #df6c75; @codemirror-orange: #ca9564; @codemirror-yellow: #e5c07b; @codemirror-green: #98c379; @codemirror-cyan: #56b6c2; @codemirror-blue: #61afef; @codemirror-purple: #c678dd;

.codemirror-lighten(@codemirror-color) { color: desaturate( lighten( @codemirror-color, 7% ), 5% ); }

.codemirror-darken(@codemirror-color) { color: saturate( darken( @codemirror-color, 7% ), 5% ); }

/* --------------------------

           EDITOR
  -------------------------- */

.CodeMirror { background: @codemirror-background; caret-color: @codemirror-blue; // cursor color

// text color pre { color: @codemirror-text-color; }

}

// for visedit source editor - need to reapply because of wgl-darkmode specificity .ve-init-mw-desktopArticleTarget .CodeMirror { background: transparent; }

// cursor color (again??) .CodeMirror-cursor { border-left-color: @codemirror-blue; }

/* --------------------------

           HEADINGS
  -------------------------- */

pre.cm-mw-section- {

&1, &2, &3, &4, &5, &6 { color: @white; }

&1 { font-size: 1.7em; }

&2 { font-size: 1.35em; }

&3 { font-size: 1.1em; }

}

// equals signs .cm-mw-section-header { .codemirror-darken( @codemirror-green ); }

/* --------------------------

         PUNCTUATION
  -------------------------- */

.cm-mw-apostrophes-bold, .cm-mw-apostrophes-italic, .cm-mw-doubleUnderscore, .cm-mw-indenting, .cm-mw-signature, .cm-mw-hr, .cm-mw-list { .codemirror-darken( @codemirror-blue ); }

.cm-mw-doubleUnderscore, .cm-mw-indenting, .cm-mw-signature, .cm-mw-hr, .cm-mw-list { background: fade( @codemirror-blue, 10% ); }

.cm-mw-skipformatting { background: fade( @codemirror-blue, 50% ); }

.cm-mw-mnemonic { color: @codemirror-green; }

.cm-mw-comment { color: @codemirror-text-color; opacity: .7; }

/* --------------------------

            LINKS
  -------------------------- */

.cm-mw-link-pagename, .cm-mw-link, .cm-mw-extlink, .cm-mw-free-extlink { color: @codemirror-blue; }

.cm-mw-link-tosection, .cm-mw-extlink-protocol, .cm-mw-free-extlink-protocol { .codemirror-lighten( @codemirror-blue ); }

.cm-mw-link-bracket, .cm-mw-link-delimiter, .cm-mw-extlink-bracket { .codemirror-darken( @codemirror-blue ); }

/* --------------------------

          TEMPLATES
  -------------------------- */

.cm-mw-template-bracket, .cm-mw-template-delimiter { .codemirror-darken( @codemirror-orange ); }

.cm-mw-template-name, .cm-mw-template-argument-name { color: @codemirror-orange; }

.cm-mw-template { .codemirror-lighten( @codemirror-orange ); }

/* --------------------------

           TABLES
  -------------------------- */

.cm-mw-table-bracket, .cm-mw-table-delimiter { .codemirror-darken( @codemirror-cyan ); }

.cm-mw-table-definition { color: @codemirror-cyan; }

/* --------------------------

          VARIABLES
  -------------------------- */

.cm-mw-templatevariable-bracket, .cm-mw-templatevariable-delimiter { .codemirror-darken( @codemirror-purple ); }

.cm-mw-templatevariable-name, .cm-mw-templatevariable { color: @codemirror-purple; }

/* --------------------------

       PARSER FUNCTIONS
  -------------------------- */

.cm-mw-parserfunction-bracket { .codemirror-darken( @codemirror-red ); }

.cm-mw-parserfunction-name, .cm-mw-parserfunction-delimiter { color: @codemirror-red; }

/* --------------------------

        TEXT SELECTION
  -------------------------- */

// selected text .CodeMirror-selected { background-color: fade( @codemirror-selection-color, 10% );

.CodeMirror-focused & { background-color: fade( @codemirror-selection-color, 20% ); }

}

// don't combine these two groups .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: fade( @codemirror-selection-color, 20% ); }

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: fade( @codemirror-selection-color, 20% ); }

/* --------------------------

          HTML TAGS
  -------------------------- */

.cm-mw-htmltag-bracket, .cm-mw-exttag-bracket { .codemirror-darken( @codemirror-green ); }

.cm-mw-htmltag-name, .cm-mw-htmltag-attribute, .cm-mw-exttag-name, .cm-mw-exttag-attribute { color: @codemirror-green; }

pre.cm-mw-exttag { background: fade( @white, 5% ); }

/* --------------------------

       BRACKET MATCHING
  -------------------------- */

.cm-mw-matchingbracket { background-color: @codemirror-bracket-matcher-background; box-shadow: inset 0 0 1px 0 @codemirror-blue; // original is 0 0 1px 1px, no spread so it wont eat the cursor }