Skip to content

Commit 82e8d18

Browse files
choldgrafcholdgraf
committed
Add dark mode fixes for several extensions
1 parent 410a96f commit 82e8d18

File tree

7 files changed

+144
-0
lines changed

7 files changed

+144
-0
lines changed

‎docs/reference/extensions.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,4 +108,25 @@ This toggle is in the margin!
108108

109109
## `sphinx-design` for UI components
110110

111+
[`sphinx-design`](https://sphinx-design.readthedocs.io/) provides various UI components like badges, cards, and dropdowns.
112+
113+
**Badge:**
114+
111115
{bdg-primary}`Test badge`.
116+
117+
**Card:**
118+
119+
::::{card} Card Title
120+
:class-card: sd-border-0
121+
Card header.
122+
^^^
123+
Card content goes here. This demonstrates how cards look in both light and dark modes.
124+
+++
125+
Card footer.
126+
::::
127+
128+
**Dropdown:**
129+
130+
:::{dropdown} Click to expand
131+
This is the dropdown content. It should be readable in both light and dark modes.
132+
:::

‎src/sphinx_book_theme/assets/styles/content/_admonitions.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* Standard Sphinx admonitions
3+
* Improves contrast and readability in dark mode
4+
* Fixes: https://github.com/executablebooks/sphinx-book-theme/issues/743
5+
*/
6+
7+
// Ensure admonition titles have proper contrast in dark mode
8+
html[data-theme="dark"] {
9+
.admonition {
10+
.admonition-title {
11+
// Ensure text is always readable by using a color that contrasts well
12+
// with the admonition background colors
13+
color: var(--pst-color-text-base);
14+
15+
// Add a slight text shadow for better readability on colored backgrounds
16+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
17+
}
18+
}
19+
}
20+
21+
// Light mode improvements for consistency
22+
html[data-theme="light"] {
23+
.admonition {
24+
.admonition-title {
25+
// Ensure consistent text rendering
26+
color: var(--pst-color-text-base);
27+
}
28+
}
29+
}

‎src/sphinx_book_theme/assets/styles/extensions/_myst-nb.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* MyST-NB extension
3+
* Improves contrast and readability in dark mode
4+
* Fixes: https://github.com/executablebooks/sphinx-book-theme/issues/743
5+
*/
6+
7+
// Ensure hide-input tags have proper contrast in dark mode
8+
html[data-theme="dark"] {
9+
.tag_hide_input .cell_input {
10+
summary {
11+
color: var(--pst-color-link);
12+
13+
&:hover {
14+
color: var(--pst-color-link-hover);
15+
}
16+
}
17+
}
18+
}

‎src/sphinx_book_theme/assets/styles/extensions/_sphinx-design.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* sphinx-design extension
3+
* Improves contrast and readability in dark mode
4+
* Fixes: https://github.com/executablebooks/sphinx-book-theme/issues/743
5+
*/
6+
7+
// Ensure sphinx-design cards and dropdowns have proper contrast in dark mode
8+
html[data-theme="dark"] {
9+
.sd-card,
10+
.sd-dropdown {
11+
.sd-card-header,
12+
.sd-card-title,
13+
.sd-summary-title {
14+
color: var(--pst-color-text-base);
15+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
16+
}
17+
}
18+
}

‎src/sphinx_book_theme/assets/styles/extensions/_sphinx-tabs.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* sphinx-tabs extension
3+
* Improves contrast and readability in dark mode
4+
* Fixes: https://github.com/executablebooks/sphinx-book-theme/issues/743
5+
*/
6+
7+
// Ensure sphinx-tabs have proper contrast in dark mode
8+
html[data-theme="dark"] {
9+
.sphinx-tabs {
10+
// Tab buttons
11+
.sphinx-tabs-tab {
12+
background-color: var(--pst-color-surface);
13+
color: var(--pst-color-text-muted);
14+
border-color: var(--pst-color-border);
15+
16+
&[aria-selected="true"] {
17+
background-color: var(--pst-color-background);
18+
color: var(--pst-color-text-base);
19+
border-bottom-color: var(--pst-color-background);
20+
}
21+
22+
&:hover {
23+
color: var(--pst-color-text-base);
24+
}
25+
}
26+
27+
// Tab panel content area
28+
.sphinx-tabs-panel {
29+
background-color: var(--pst-color-background);
30+
color: var(--pst-color-text-base);
31+
border-color: var(--pst-color-border);
32+
}
33+
}
34+
}

‎src/sphinx_book_theme/assets/styles/extensions/_sphinx-togglebutton.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* sphinx-togglebutton extension
3+
* Improves contrast and readability in dark mode
4+
* Fixes: https://github.com/executablebooks/sphinx-book-theme/issues/743
5+
*/
6+
7+
// Ensure toggle button expand links have proper contrast in dark mode
8+
html[data-theme="dark"] {
9+
details.above-input,
10+
details.below-input {
11+
summary {
12+
color: var(--pst-color-link);
13+
14+
&:hover {
15+
color: var(--pst-color-link-hover);
16+
}
17+
}
18+
}
19+
}

‎src/sphinx_book_theme/assets/styles/index.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
@use "components/search";
3434

3535
// Content blocks in standard Sphinx
36+
@use "content/admonitions";
3637
@use "content/images";
3738
@use "content/margin";
3839
@use "content/quotes";
@@ -42,4 +43,8 @@
4243
// Content blocks from Sphinx extensions
4344

4445
@use "extensions/comments";
46+
@use "extensions/myst-nb";
47+
@use "extensions/sphinx-design";
48+
@use "extensions/sphinx-tabs";
49+
@use "extensions/sphinx-togglebutton";
4550
@use "extensions/thebe";

0 commit comments

Comments
 (0)