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

View file

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