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 {
|
||||
margin: .5em 0;
|
||||
background-color: #222222;
|
||||
background-color: var(--code-back);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.chroma code {
|
||||
color: #d4d4d4;
|
||||
color: var(--code-text);
|
||||
}
|
||||
|
||||
/* LineTableTD */
|
||||
|
@ -32,7 +32,7 @@
|
|||
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
color: #999;
|
||||
color: var(--code-line-number);
|
||||
padding-left: .9em;
|
||||
padding-right: 1em;
|
||||
text-align: right;
|
||||
|
@ -51,11 +51,11 @@
|
|||
// .chroma .kt,
|
||||
.chroma .k,
|
||||
.chroma .si {
|
||||
color: #569cd6;
|
||||
color: var(--code-keyword);
|
||||
}
|
||||
|
||||
.chroma .na {
|
||||
color: #9cdcfe;
|
||||
color: var(--code-attribute);
|
||||
}
|
||||
|
||||
// .chroma .n,
|
||||
|
@ -70,7 +70,7 @@
|
|||
.chroma .fm,
|
||||
.chroma .nl,
|
||||
.chroma .nn {
|
||||
color: #569cd6;
|
||||
color: var(--code-keyword);
|
||||
}
|
||||
|
||||
/* NameProperty */
|
||||
|
@ -81,7 +81,7 @@
|
|||
.chroma .vg,
|
||||
.chroma .vi,
|
||||
.chroma .vm {
|
||||
color: #569cd6;
|
||||
color: var(--code-keyword);
|
||||
}
|
||||
|
||||
/* LiteralString */
|
||||
|
@ -99,7 +99,7 @@
|
|||
.chroma .s1,
|
||||
.chroma .ss,
|
||||
.chroma .cpf {
|
||||
color: #ce9178;
|
||||
color: var(--code-literal-string);
|
||||
}
|
||||
|
||||
/* LiteralNumber */
|
||||
|
@ -110,7 +110,7 @@
|
|||
.chroma .mi,
|
||||
.chroma .il,
|
||||
.chroma .mo {
|
||||
color: #b5cea8;
|
||||
color: var(--code-literal-number);
|
||||
}
|
||||
|
||||
/* Comment */
|
||||
|
@ -119,25 +119,25 @@
|
|||
.chroma .cm,
|
||||
.chroma .c1,
|
||||
.chroma .cs {
|
||||
color: #517043;
|
||||
color: var(--code-comment);
|
||||
}
|
||||
|
||||
.chroma .nb,
|
||||
.chroma .kt {
|
||||
color: #4ec9b0;
|
||||
color: var(--code-builtin-type);
|
||||
}
|
||||
|
||||
.chroma .fm,
|
||||
.chroma .nf {
|
||||
color: #dcdcaa;
|
||||
color: var(--code-function);
|
||||
}
|
||||
|
||||
|
||||
.chroma .cp {
|
||||
color: #c586c0;
|
||||
color: var(--code-meta);
|
||||
}
|
||||
|
||||
.chroma .hl {
|
||||
display: block;
|
||||
background-color: #585858;
|
||||
background-color: var(--code-highlighted-line);
|
||||
}
|
|
@ -3,9 +3,20 @@
|
|||
--grid: #e1e1e1;
|
||||
--back: #fff;
|
||||
--text: #222;
|
||||
--code-back: #fff;
|
||||
|
||||
// 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 {
|
||||
|
@ -13,7 +24,18 @@
|
|||
--back: #181818;
|
||||
--text: silver;
|
||||
--grid: #555;
|
||||
--code-back: #222;
|
||||
|
||||
// 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