Skip to content

Commit

Permalink
[fix] prefers-color-scheme: use dark theme if body[data-theme="auto"] (
Browse files Browse the repository at this point in the history
…#154)

Before this patch the CSS implementation assumes that "dark" is supported by the
theme if the `data-theme` attribute of the <body> tag is unset.

Since most themes are using "light" colors (compare https://sphinx-themes.org)
and do not set `data-theme` it is better to assume light is the default, even
when the browser setting `prefers-color-scheme: dark`!

BTW: remove duplication of styles from dark/light theme that are already set in
the common style.

Signed-off-by: Markus Heiser <[email protected]>
  • Loading branch information
return42 authored Mar 16, 2022
1 parent 154f273 commit 5b2f4ee
Showing 1 changed file with 3 additions and 14 deletions.
17 changes: 3 additions & 14 deletions sphinx_tabs/static/tabs.css
Original file line number Diff line number Diff line change
Expand Up @@ -55,23 +55,18 @@
/* Dark theme preference styling */

@media (prefers-color-scheme: dark) {
body:not([data-theme="light"]) .sphinx-tabs-panel {
body[data-theme="auto"] .sphinx-tabs-panel {
color: white;
background-color: rgb(50, 50, 50);
}

body:not([data-theme="light"]) .sphinx-tabs-tab {
body[data-theme="auto"] .sphinx-tabs-tab {
color: white;
font-size: 16px;
font-weight: 400;
background-color: rgba(255, 255, 255, 0.05);
}

body:not([data-theme="light"]) .sphinx-tabs-tab[aria-selected="true"] {
font-weight: 700;
border: 1px solid #a0b3bf;
body[data-theme="auto"] .sphinx-tabs-tab[aria-selected="true"] {
border-bottom: 1px solid rgb(50, 50, 50);
margin: -1px;
background-color: rgb(50, 50, 50);
}
}
Expand All @@ -85,16 +80,10 @@ body[data-theme="dark"] .sphinx-tabs-panel {

body[data-theme="dark"] .sphinx-tabs-tab {
color: white;
font-size: 16px;
font-weight: 400;
border: 1px solid rgba(255, 255, 255, 0.15);
background-color: rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .sphinx-tabs-tab[aria-selected="true"] {
font-weight: 700;
border: 1px solid #a0b3bf;
border-bottom: 2px solid rgb(50, 50, 50);
margin: -1px;
background-color: rgb(50, 50, 50);
}

0 comments on commit 5b2f4ee

Please sign in to comment.