code highlighting colors vary with theme
This commit is contained in:
parent
bab2a8c602
commit
04977374f0
2 changed files with 38 additions and 16 deletions
|
@ -1,11 +1,11 @@
|
||||||
.chroma {
|
.chroma {
|
||||||
margin: .5em 0;
|
margin: .5em 0;
|
||||||
background-color: #222222;
|
background-color: var(--code-back);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chroma code {
|
.chroma code {
|
||||||
color: #d4d4d4;
|
color: var(--code-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LineTableTD */
|
/* LineTableTD */
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
|
|
||||||
/* LineNumbersTable */
|
/* LineNumbersTable */
|
||||||
.chroma .lnt {
|
.chroma .lnt {
|
||||||
color: #999;
|
color: var(--code-line-number);
|
||||||
padding-left: .9em;
|
padding-left: .9em;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
@ -51,11 +51,11 @@
|
||||||
// .chroma .kt,
|
// .chroma .kt,
|
||||||
.chroma .k,
|
.chroma .k,
|
||||||
.chroma .si {
|
.chroma .si {
|
||||||
color: #569cd6;
|
color: var(--code-keyword);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chroma .na {
|
.chroma .na {
|
||||||
color: #9cdcfe;
|
color: var(--code-attribute);
|
||||||
}
|
}
|
||||||
|
|
||||||
// .chroma .n,
|
// .chroma .n,
|
||||||
|
@ -70,7 +70,7 @@
|
||||||
.chroma .fm,
|
.chroma .fm,
|
||||||
.chroma .nl,
|
.chroma .nl,
|
||||||
.chroma .nn {
|
.chroma .nn {
|
||||||
color: #569cd6;
|
color: var(--code-keyword);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* NameProperty */
|
/* NameProperty */
|
||||||
|
@ -81,7 +81,7 @@
|
||||||
.chroma .vg,
|
.chroma .vg,
|
||||||
.chroma .vi,
|
.chroma .vi,
|
||||||
.chroma .vm {
|
.chroma .vm {
|
||||||
color: #569cd6;
|
color: var(--code-keyword);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LiteralString */
|
/* LiteralString */
|
||||||
|
@ -99,7 +99,7 @@
|
||||||
.chroma .s1,
|
.chroma .s1,
|
||||||
.chroma .ss,
|
.chroma .ss,
|
||||||
.chroma .cpf {
|
.chroma .cpf {
|
||||||
color: #ce9178;
|
color: var(--code-literal-string);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LiteralNumber */
|
/* LiteralNumber */
|
||||||
|
@ -110,7 +110,7 @@
|
||||||
.chroma .mi,
|
.chroma .mi,
|
||||||
.chroma .il,
|
.chroma .il,
|
||||||
.chroma .mo {
|
.chroma .mo {
|
||||||
color: #b5cea8;
|
color: var(--code-literal-number);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Comment */
|
/* Comment */
|
||||||
|
@ -119,25 +119,25 @@
|
||||||
.chroma .cm,
|
.chroma .cm,
|
||||||
.chroma .c1,
|
.chroma .c1,
|
||||||
.chroma .cs {
|
.chroma .cs {
|
||||||
color: #517043;
|
color: var(--code-comment);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chroma .nb,
|
.chroma .nb,
|
||||||
.chroma .kt {
|
.chroma .kt {
|
||||||
color: #4ec9b0;
|
color: var(--code-builtin-type);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chroma .fm,
|
.chroma .fm,
|
||||||
.chroma .nf {
|
.chroma .nf {
|
||||||
color: #dcdcaa;
|
color: var(--code-function);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.chroma .cp {
|
.chroma .cp {
|
||||||
color: #c586c0;
|
color: var(--code-meta);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chroma .hl {
|
.chroma .hl {
|
||||||
display: block;
|
display: block;
|
||||||
background-color: #585858;
|
background-color: var(--code-highlighted-line);
|
||||||
}
|
}
|
|
@ -3,9 +3,20 @@
|
||||||
--grid: #e1e1e1;
|
--grid: #e1e1e1;
|
||||||
--back: #fff;
|
--back: #fff;
|
||||||
--text: #222;
|
--text: #222;
|
||||||
--code-back: #fff;
|
|
||||||
|
|
||||||
// code highlighting
|
// code highlighting
|
||||||
|
--code-back: #f6f8fa;
|
||||||
|
--code-text: #24292f;
|
||||||
|
--code-line-number: #999;
|
||||||
|
--code-keyword: #cf222e;
|
||||||
|
--code-attribute: #0550ae;
|
||||||
|
--code-literal-string: #0a3069;
|
||||||
|
--code-literal-number: #b5cea8;
|
||||||
|
--code-comment: #6e7781;
|
||||||
|
--code-builtin-type: #cf222e;
|
||||||
|
--code-function: #0550ae;
|
||||||
|
--code-meta: #cf222e;
|
||||||
|
--code-highlighted-line: #e9e9e9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
|
@ -13,7 +24,18 @@
|
||||||
--back: #181818;
|
--back: #181818;
|
||||||
--text: silver;
|
--text: silver;
|
||||||
--grid: #555;
|
--grid: #555;
|
||||||
--code-back: #222;
|
|
||||||
|
|
||||||
// code highlighting
|
// code highlighting
|
||||||
|
--code-back: #1d1d1d;
|
||||||
|
--code-text: #d4d4d4cc;
|
||||||
|
--code-line-number: #999999ca;
|
||||||
|
--code-keyword: #569cd6cb;
|
||||||
|
--code-attribute: #9cdcfecb;
|
||||||
|
--code-literal-string: #ce9178;
|
||||||
|
--code-literal-number: #b5cea8;
|
||||||
|
--code-comment: #517043d5;
|
||||||
|
--code-builtin-type: #4ec9b0cb;
|
||||||
|
--code-function: #dcdcaaca;
|
||||||
|
--code-meta: #c586c0cb;
|
||||||
|
--code-highlighted-line: #9494951b;
|
||||||
}
|
}
|
Loading…
Reference in a new issue