vdoc: tweak keyword, attribute and light theme CSS (#13853)

Make keywords bold.
Make attributes use a monospace font (like code).
Tweak light theme foreground colors:
* Make default-text, operator-text and punctuation-text a bit darker,
  improving the contrast.
* Make builtin-text a bit darker and more green (similar to dark theme).
* Make function-text a bit darker and more greeny-blue (similar to dark
  theme).
* Make attribute-text a bit less transparent for better contrast.
pull/13855/head
Nick Treleaven 2022-03-28 18:38:00 +01:00 committed by GitHub
parent dd1a8cbadc
commit 476f19c090
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 6 deletions

View File

@ -24,18 +24,18 @@
--menu-search-badge-background-hover-color: #0000004d; --menu-search-badge-background-hover-color: #0000004d;
--toc-text-color: #2779bd; --toc-text-color: #2779bd;
--toc-indicator-color: #4299e1; --toc-indicator-color: #4299e1;
--code-default-text-color: #5c6e74; --code-default-text-color: #2c3e64;
--code-background-color: #edf2f7; --code-background-color: #edf2f7;
--code-keyword-text-color: #2b6cb0; --code-keyword-text-color: #2b6cb0;
--code-builtin-text-color: #0a0a0a; --code-builtin-text-color: #219321;
--code-function-text-color: #319795; --code-function-text-color: #288341;
--code-comment-text-color: #93a1a1; --code-comment-text-color: #93a1a1;
--code-punctuation-text-color: #999999; --code-punctuation-text-color: #696969;
--code-symbol-text-color: #702459; --code-symbol-text-color: #702459;
--code-operator-text-color: #a67f59; --code-operator-text-color: #864f29;
--attribute-deprecated-background-color: #f59f0b48; --attribute-deprecated-background-color: #f59f0b48;
--attribute-deprecated-text-color: #92400e; --attribute-deprecated-text-color: #92400e;
--attribute-text-color: #000000af; --attribute-text-color: #000000cf;
} }
:root.dark .dark-icon { :root.dark .dark-icon {
display: none; display: none;
@ -76,6 +76,7 @@
--code-comment-text-color: #a0aec0; --code-comment-text-color: #a0aec0;
--code-punctuation-text-color: #a0aec0; --code-punctuation-text-color: #a0aec0;
--code-symbol-text-color: #ed64a6; --code-symbol-text-color: #ed64a6;
--code-operator-text-color: #a67f59;
--attribute-background-color: #ffffff20; --attribute-background-color: #ffffff20;
--attribute-text-color: #ffffffaf; --attribute-text-color: #ffffffaf;
--attribute-deprecated-text-color: #fef3c7; --attribute-deprecated-text-color: #fef3c7;
@ -417,6 +418,8 @@ body {
background-color: var(--code-background-color); background-color: var(--code-background-color);
color: var(--attribute-text-color); color: var(--attribute-text-color);
margin-right: 0.8rem; margin-right: 0.8rem;
font-family: "Jetbrains Mono", monospace;
font-size: 0.9rem;
} }
.doc-content > .doc-node > .attributes > .attribute-deprecated { .doc-content > .doc-node > .attributes > .attribute-deprecated {
background-color: var(--attribute-deprecated-background-color); background-color: var(--attribute-deprecated-background-color);
@ -612,6 +615,7 @@ pre {
.token.keyword { .token.keyword {
color: #2b6cb0; color: #2b6cb0;
color: var(--code-keyword-text-color); color: var(--code-keyword-text-color);
font-weight: bold;
} }
.token.function { .token.function {
color: #319795; color: #319795;