Skip to content

Commit 0b012b1

Browse files
dark-mode: fix code contrast on Book pages
Book pages inherited light-mode code colors in dark mode, resulting in poor contrast for inline and block code. Move the Book-specific fix into dark-mode.scss, mirroring the existing light-mode selector scope and using existing theme variables. This avoids layout-related overrides and follows established dark-mode patterns (as used for man-pages in f3771e3).
1 parent 424c22d commit 0b012b1

File tree

2 files changed

+14
-26
lines changed

2 files changed

+14
-26
lines changed

assets/sass/book.scss

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -174,25 +174,4 @@ ol.book-toc {
174174
.book-wrapper {
175175
margin-right: 0;
176176
}
177-
}
178-
179-
/* --------------------------------------------------
180-
Fix: Dark mode styling for code blocks in Book pages
181-
-------------------------------------------------- */
182-
183-
html[data-theme="dark"] .edition2 .book code {
184-
background-color: var(--color-canvas-subtle);
185-
color: var(--color-fg-default);
186-
padding: 0.2em 0.4em;
187-
border-radius: 4px;
188-
}
189-
190-
html[data-theme="dark"] .edition2 .book pre {
191-
background-color: var(--color-canvas-inset);
192-
color: var(--color-fg-default);
193-
}
194-
195-
html[data-theme="dark"] .edition2 .book pre code {
196-
background: none;
197-
padding: 0;
198-
}
177+
}

assets/sass/dark-mode.scss

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,15 @@
115115
#documentation #main div.verseblock pre.content {
116116
color: var(--light-font-color);
117117
background-color: #5e5951;
118+
119+
}
120+
/* Book pages: fix code contrast in dark mode */
121+
.book code {
122+
color: var(--fixed-width-font-color);
123+
}
124+
125+
.book pre {
126+
color: var(--fixed-width-font-color);
118127
}
119128

120129
form#search {
@@ -190,10 +199,10 @@
190199
}
191200
}
192201

193-
@include mode
194-
@include mode($mode: dark, $theme: '[data-theme="dark"]')
202+
@include mode;
203+
@include mode($mode: dark, $theme: '[data-theme="dark"]');
195204

196205
@media screen and (prefers-color-scheme: dark) {
197-
@include mode($mode: dark, $theme: ':not([data-theme="light"])')
198-
@include mode($mode: light)
206+
@include mode($mode: dark, $theme: ':not([data-theme="light"])');
207+
@include mode($mode: light);
199208
}

0 commit comments

Comments
 (0)