actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhancing themes with `color-scheme: light | dark;` implementation in CSS

This commit is contained in:
Giorgio Reale 2023-07-18 22:50:45 +02:00 committed by Eric Huss
parent 4614a3637a
commit fcfde083e7
2 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/theme/css/general.css
View File

@ -5,6 +5,7 @@
:root { :root {
/* Browser default font-size is 16px, this way 1 rem = 10px */ /* Browser default font-size is 16px, this way 1 rem = 10px */
font-size: 62.5%; font-size: 62.5%;
color-scheme: var(--color-scheme);
} }
html { html {

10
src/theme/css/variables.css
View File

@ -50,6 +50,8 @@
--searchresults-border-color: #888; --searchresults-border-color: #888;
--searchresults-li-bg: #252932; --searchresults-li-bg: #252932;
--search-mark-bg: #e3b171; --search-mark-bg: #e3b171;
--color-scheme: dark;
} }
.coal { .coal {
@ -90,6 +92,8 @@
--searchresults-border-color: #98a3ad; --searchresults-border-color: #98a3ad;
--searchresults-li-bg: #2b2b2f; --searchresults-li-bg: #2b2b2f;
--search-mark-bg: #355c7d; --search-mark-bg: #355c7d;
--color-scheme: dark;
} }
.light { .light {
@ -130,6 +134,8 @@
--searchresults-border-color: #888; --searchresults-border-color: #888;
--searchresults-li-bg: #e4f2fe; --searchresults-li-bg: #e4f2fe;
--search-mark-bg: #a2cff5; --search-mark-bg: #a2cff5;
--color-scheme: light;
} }
.navy { .navy {
@ -170,6 +176,8 @@
--searchresults-border-color: #5c5c68; --searchresults-border-color: #5c5c68;
--searchresults-li-bg: #242430; --searchresults-li-bg: #242430;
--search-mark-bg: #a2cff5; --search-mark-bg: #a2cff5;
--color-scheme: dark;
} }
.rust { .rust {
@ -210,6 +218,8 @@
--searchresults-border-color: #888; --searchresults-border-color: #888;
--searchresults-li-bg: #dec2a2; --searchresults-li-bg: #dec2a2;
--search-mark-bg: #e69f67; --search-mark-bg: #e69f67;
--color-scheme: light;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {