Alex: Created page with "/* ========================== Extension:CodeMirror syntax highlighting Classes explained here: Colors based on the One Dark syntax theme: ========================== / / -------------------------- COLORS -------------------------- */ // define the following commented vars in the file that is..."

2024-10-16T23:11:24Z

Created page with "========================== 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..."

New page

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

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
}

MediaWiki:Vector-darkmode.less/darksyntax.less - Revision history