code highlighting colors vary with theme

This commit is contained in:
Mivinci 2022-11-10 16:00:20 +08:00
parent bab2a8c602
commit 04977374f0
2 changed files with 38 additions and 16 deletions

View file

@ -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);
} }

View file

@ -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;
} }