diff options
| author | lberki <lberki@users.noreply.github.com> | 2022-05-05 12:12:10 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-05-05 12:12:10 +0300 |
| commit | 776f966edfbc33120d61edef0e65ddcdba44263a (patch) | |
| tree | 43b753af14fbcfa2cbdba373139bda0397a5804a /assets/scss/tale/_code.scss | |
| parent | c95051b93d756d5653ebe36a8f5f2d556b3843a0 (diff) | |
Add dark mode
See #65
Diffstat (limited to 'assets/scss/tale/_code.scss')
| -rw-r--r-- | assets/scss/tale/_code.scss | 14 |
1 files changed, 10 insertions, 4 deletions
diff --git a/assets/scss/tale/_code.scss b/assets/scss/tale/_code.scss index 11f1c53..6d97161 100644 --- a/assets/scss/tale/_code.scss +++ b/assets/scss/tale/_code.scss @@ -4,9 +4,9 @@ code { } code { - background-color: $grey-4; + background-color: var(--grey-4); border-radius: 3px; - color: $code-color; + color: var(--code-color); font-size: 85%; padding: .25em .5em; white-space: pre-wrap; @@ -23,8 +23,14 @@ pre code { padding: 0; } +pre code > span { + // This isn't very pretty, but the precise RGB values are generated + // server-side, the usual trick of putting the colors in CSS variables does + // not quite work and this is the best I could come up with. + filter: var(--code-filter); +} .highlight { - background-color: $grey-4; + background-color: var(--grey-4); border-radius: 3px; line-height: 1.4; margin: 0 0 1rem; @@ -36,7 +42,7 @@ pre code { } .lineno { - color: $default-tint; + color: var(--default-tint); display: inline-block; // Ensures the null space also isn't selectable padding: 0 .75rem 0 .25rem; // Make sure numbers aren't selectable |