fix(styles): use correct dark-mode selector in css

The dark-mode selector changed from the class "dark" attached to the
body element to a data-attribute with some react-bootstrap upgrade.
This commit reflects this change in our custom css.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2024-09-15 22:38:09 +02:00
parent 3e17edf95d
commit 642fde563a
No known key found for this signature in database
GPG key ID: DB99ADDDC5C0AF82
4 changed files with 12 additions and 13 deletions

View file

@ -654,7 +654,7 @@
h4, h4,
h5, h5,
h6 { h6 {
body.dark &, & { body[data-bs-theme=dark] &, & {
margin-top: 24px; margin-top: 24px;
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 600; font-weight: 600;
@ -663,7 +663,7 @@
} }
h1 { h1 {
body.dark &, & { body[data-bs-theme=dark] &, & {
font-size: 2em; font-size: 2em;
} }
} }
@ -675,35 +675,35 @@
} }
h2 { h2 {
body.dark &, & { body[data-bs-theme=dark] &, & {
font-size: 1.5em; font-size: 1.5em;
} }
} }
h3 { h3 {
body.dark &, & { body[data-bs-theme=dark] &, & {
font-size: 1.25em; font-size: 1.25em;
} }
} }
h4 { h4 {
body.dark &, & { body[data-bs-theme=dark] &, & {
font-size: 1em; font-size: 1em;
} }
} }
h5 { h5 {
body.dark &, & { body[data-bs-theme=dark] &, & {
font-size: .875em; font-size: .875em;
} }
} }
h6 { h6 {
body.dark &, & { body[data-bs-theme=dark] &, & {
font-size: .85em; font-size: .85em;
} }
body.dark & { body[data-bs-theme=dark] & {
color: #b4c7d5; color: #b4c7d5;
} }
} }
@ -722,7 +722,7 @@
} }
li { li {
word-wrap: break-all; word-wrap: break-word;
} }
li > p { li > p {
@ -826,7 +826,6 @@
pre code { pre code {
display: inline; display: inline;
max-width: auto;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow: visible; overflow: visible;

View file

@ -18,7 +18,7 @@
@import "./markdown-tweaks"; @import "./markdown-tweaks";
@import "./reveal"; @import "./reveal";
.text-black, body.dark .text-black { .text-black, body[data-bs-theme=dark] .text-black {
color: $black; color: $black;
} }

View file

@ -14,7 +14,7 @@
display: grid !important; display: grid !important;
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr);
:global(body.dark) & { :global(body[data-bs-theme=dark]) & {
background-color: rgb(27, 31, 35); background-color: rgb(27, 31, 35);
} }

View file

@ -9,7 +9,7 @@
--sidebar-menu-width: 280px; --sidebar-menu-width: 280px;
--sidebar-separator-color: var(--bs-secondary); --sidebar-separator-color: var(--bs-secondary);
:global(body.dark) & { :global(body[data-bs-theme=dark]) & {
--sidebar-separator-color: rgba(255, 255, 255, 0.2); --sidebar-separator-color: rgba(255, 255, 255, 0.2);
} }