forked from pydata/pydata-sphinx-theme
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Degrade gracefully when JavaScript is disabled
Support for light/dark themes has been implemented using a `data-theme` attribute set on the `<html/>` tag. As this attribute is set using JavaScript, this meant that it was left unset when visitors had JavaScript disabled. This resulted in several important CSS rules not being matched and a “broken feeling” due to wrong colors, and logo or images shown twice. To better support browsers with JavaScript disabled: 1. Add the same CSS rules as for the light theme when the `data-theme` attribute is not set. This creates a safe fallback in every situation. 2. If `default_mode` is set, write its value to the `data-theme` attribute when writing the HTML files. This enables theme users to present their preferred mode to visitors with JavaScript disabled. 3. Use JavaScript to add the search, theme switcher and version switcher interface as they require JavaScript to work. This avoid unusable UI elements to be shown to visitors with JavaScript disabled. 4. Use JavaScript to write the logo for the “other theme”, depending on the value of `default_mode`, defaulting to “light” if unset. 5. Use JavaScript to write the announcement block to the HTML if the announcement is a remote URL. While this last change might seem redundant considering the other ones, it does make the resulting pages better for search engines and text browsers. Closes: pydata#1145
- Loading branch information
Jérémy Bobbio (Lunar)
committed
Feb 8, 2023
1 parent
75ee781
commit 4ed402f
Showing
11 changed files
with
195 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 11 additions & 4 deletions
15
src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,11 @@ | ||
{# A button that, when clicked, will trigger a search popup overlay #} | ||
<button class="btn btn-sm navbar-btn search-button search-button__button" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip"> | ||
<i class="fa-solid fa-magnifying-glass"></i> | ||
</button> | ||
{# A button that, when clicked, will trigger a search popup overlay. | ||
# | ||
# As this function will only work when JavaScript is enabled, we add it through JavaScript. | ||
#} | ||
<script> | ||
document.write(` | ||
<button class="btn btn-sm navbar-btn search-button search-button__button" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip"> | ||
<i class="fa-solid fa-magnifying-glass"></i> | ||
</button> | ||
`); | ||
</script> |
10 changes: 8 additions & 2 deletions
10
src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-switcher.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,11 @@ | ||
<button class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip"> | ||
{# As the theme switcher will only work when JavaScript is enabled, we add it through JavaScript. | ||
#} | ||
<script> | ||
document.write(` | ||
<button class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip"> | ||
<span class="theme-switch" data-mode="light"><i class="fa-solid fa-sun"></i></span> | ||
<span class="theme-switch" data-mode="dark"><i class="fa-solid fa-moon"></i></span> | ||
<span class="theme-switch" data-mode="auto"><i class="fa-solid fa-circle-half-stroke"></i></span> | ||
</button> | ||
</button> | ||
`); | ||
</script> |
14 changes: 10 additions & 4 deletions
14
src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,15 @@ | ||
<div class="version-switcher__container dropdown"> | ||
{# As the version switcher will only work when JavaScript is enabled, we add it through JavaScript. | ||
#} | ||
<script> | ||
document.write(` | ||
<div class="version-switcher__container dropdown"> | ||
<button type="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown"> | ||
{{ theme_switcher.get('version_match') }} <!-- this text may get changed later by javascript --> | ||
<span class="caret"></span> | ||
{{ theme_switcher.get('version_match') }} <!-- this text may get changed later by javascript --> | ||
<span class="caret"></span> | ||
</button> | ||
<div class="version-switcher__menu dropdown-menu list-group-flush py-0"> | ||
<!-- dropdown will be populated by javascript on page load --> | ||
</div> | ||
</div> | ||
</div> | ||
`); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,13 @@ | ||
<div class="version-switcher__container dropdown"> | ||
<button class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown" type="button"> | ||
0.7.1 | ||
<!-- this text may get changed later by javascript --> | ||
<span class="caret"> | ||
</span> | ||
</button> | ||
<div class="version-switcher__menu dropdown-menu list-group-flush py-0"> | ||
<!-- dropdown will be populated by javascript on page load --> | ||
</div> | ||
</div> | ||
<script> | ||
document.write(` | ||
<div class="version-switcher__container dropdown"> | ||
<button type="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown"> | ||
0.7.1 <!-- this text may get changed later by javascript --> | ||
<span class="caret"></span> | ||
</button> | ||
<div class="version-switcher__menu dropdown-menu list-group-flush py-0"> | ||
<!-- dropdown will be populated by javascript on page load --> | ||
</div> | ||
</div> | ||
`); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,9 @@ | ||
<button aria-label="light/dark" class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" data-bs-placement="bottom" data-bs-toggle="tooltip" title="light/dark"> | ||
<span class="theme-switch" data-mode="light"> | ||
<i class="fa-solid fa-sun"> | ||
</i> | ||
</span> | ||
<span class="theme-switch" data-mode="dark"> | ||
<i class="fa-solid fa-moon"> | ||
</i> | ||
</span> | ||
<span class="theme-switch" data-mode="auto"> | ||
<i class="fa-solid fa-circle-half-stroke"> | ||
</i> | ||
</span> | ||
</button> | ||
<script> | ||
document.write(` | ||
<button class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" title="light/dark" aria-label="light/dark" data-bs-placement="bottom" data-bs-toggle="tooltip"> | ||
<span class="theme-switch" data-mode="light"><i class="fa-solid fa-sun"></i></span> | ||
<span class="theme-switch" data-mode="dark"><i class="fa-solid fa-moon"></i></span> | ||
<span class="theme-switch" data-mode="auto"><i class="fa-solid fa-circle-half-stroke"></i></span> | ||
</button> | ||
`); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters