doc, documentation-highlighter: use variables & add dark mode

This commit is contained in:
Marcell Tóth 2025-04-20 16:08:48 +02:00 committed by Valentin Gagarin
parent 4c446a479e
commit 4885c47f70
2 changed files with 70 additions and 18 deletions

View file

@ -119,8 +119,8 @@ body {
font-size: 1rem;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #000000;
background-color: #ffffff;
color: var(--main-text-color);
background-color: var(--background);
min-height: 100vh;
display: flex;
flex-direction: column;
@ -136,7 +136,7 @@ body {
a {
text-decoration: none;
border-bottom: 1px solid;
color: #405d99;
color: var(--link-color);
}
ul {
@ -167,7 +167,7 @@ h1 {
line-height: 110%;
font-size: 200%;
margin-bottom: 1rem;
color: #6586c8;
color: var(--heading-color);
}
h2 {
@ -175,7 +175,7 @@ h2 {
line-height: 110%;
font-size: 170%;
margin-bottom: 0.625rem;
color: #6586c8;
color: var(--heading-color);
}
h2:not(:first-child) {
@ -187,7 +187,7 @@ h3 {
line-height: 110%;
margin-bottom: 1rem;
font-size: 150%;
color: #6586c8;
color: var(--heading-color);
}
.note h3,
@ -203,7 +203,7 @@ h4 {
line-height: 110%;
margin-bottom: 1rem;
font-size: 140%;
color: #6586c8;
color: var(--heading-color);
}
h5 {
@ -211,7 +211,7 @@ h5 {
line-height: 110%;
margin-bottom: 1rem;
font-size: 130%;
color: #6a6a6a;
color: var(--small-heading-color);
}
h6 {
@ -260,8 +260,8 @@ div.appendix .programlisting {
border-radius: 0.5rem;
padding: 1rem;
overflow: auto;
background: #f2f8fd;
color: #000000;
background: var(--codeblock-background);
color: var(--codeblock-text-color);
}
div.book .note,
@ -292,7 +292,6 @@ div.appendix .warning > .title,
div.appendix .caution > .title,
div.appendix .important > .title {
font-weight: 800;
/* font-family: 'Overpass', serif; */
line-height: 110%;
margin-bottom: 1rem;
color: inherit;
@ -329,16 +328,16 @@ div.book .note,
div.book .tip,
div.appendix .note,
div.appendix .tip {
color: #5277c3;
background: #f2f8fd;
color: var(--note-text-color);
background: var(--note-background);
}
div.book .warning,
div.book .caution,
div.appendix .warning,
div.appendix .caution {
color: #cc3900;
background-color: #fff5e1;
color: var(--warning-text-color);
background-color: var(--warning-background);
}
div.book .section,
@ -448,3 +447,42 @@ div.appendix .variablelist .term {
user-select: none;
-webkit-user-select: none;
}
:root {
--background: #fff;
--main-text-color: #000;
--link-color: #405d99;
--heading-color: #6586c8;
--small-heading-color: #6a6a6a;
--note-text-color: #5277c3;
--note-background: #f2f8fd;
--warning-text-color: #cc3900;
--warning-background: #fff5e1;
--codeblock-background: #f2f8fd;
--codeblock-text-color: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #242424;
--main-text-color: #fff;
--link-color: #6586c8;
--small-heading-color: #fff;
--note-background: none;
--warning-background: none;
--codeblock-background: #393939;
--codeblock-text-color: #fff;
}
div.book .note,
div.book .tip,
div.appendix .note,
div.appendix .tip,
div.book .warning,
div.book .caution,
div.appendix .warning,
div.appendix .caution {
border: 2px solid;
font-weight: 400;
}
}

View file

@ -23,7 +23,7 @@ code.hljs {
font-weight: bold;
}
.hljs-comment {
color: #738191;
color: var(--color-1);
}
.hljs-string,
.hljs-title,
@ -37,7 +37,7 @@ code.hljs {
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #0048ab;
color: var(--color-2);
}
.hljs-meta,
.hljs-subst,
@ -49,8 +49,22 @@ code.hljs {
.hljs-template-variable,
.hljs-link,
.hljs-bullet {
color: #4c81c9;
color: var(--color-3);
}
.hljs-emphasis {
font-style: italic;
}
:root {
--color-1: #738191;
--color-2: #0048ab;
--color-3: #4c81c9;
}
@media (prefers-color-scheme: dark) {
:root {
--color-1: #8b9caf;
--color-2: #3b85e7;
--color-3: #5795e7;
}
}