Skip to content

Add manual dark/light mode toggle to sphinx13 theme #13766

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 24 additions & 14 deletions doc/_themes/sphinx13/layout.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
{%- if not embedded and pagename == root_doc %}
<style>.related { display: none; }</style>
{%- endif %}
<script src="{{ pathto('_static/dark-mode.js', 1) }}"></script>
{% endblock %}

{% block header %}
Expand All @@ -21,6 +22,9 @@
<a href="https://github.com/sphinx-doc/sphinx" title="{{ _('Source Code') }}" target="_blank">
<svg><use href="#github"></use></svg>
</a>
<button id="toggle-theme" style="margin-left: 10px; padding: 5px 10px; border-radius: 5px; cursor: pointer;">
🌙 Dark Mode
</button>
</div>
</div>
{% endblock %}
Expand Down Expand Up @@ -107,22 +111,28 @@ <h3>{{ _('On this page') }}</h3>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="github" viewBox="0 0 16 16">
<title>GitHub</title>
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
<path fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54
2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94
-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53
.63-.01 1.08.58 1.23.82.72 1.21 1.87.87
2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95
0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27
.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82
.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15
0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48
0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38
A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z">
</path>
</symbol>

<symbol id="svg-arrow-right" viewBox="0 0 24 24">
<title>Expand</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather-chevron-right">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
<polyline points="9 18 15 12 9 6"
fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</symbol>
</svg>
{% endmacro %}
16 changes: 16 additions & 0 deletions doc/_themes/sphinx13/static/dark-mode.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
document.addEventListener('DOMContentLoaded', () => {
const toggleBtn = document.getElementById('toggle-theme');
const htmlTag = document.documentElement;

const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
htmlTag.classList.add('dark-mode');
toggleBtn.textContent = '☀️ Light Mode';
}

toggleBtn?.addEventListener('click', () => {
const isDark = htmlTag.classList.toggle('dark-mode');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
toggleBtn.textContent = isDark ? '☀️ Light Mode' : '🌙 Dark Mode';
});
});
38 changes: 38 additions & 0 deletions doc/_themes/sphinx13/static/sphinx13.css
Original file line number Diff line number Diff line change
Expand Up @@ -785,3 +785,41 @@ ul.search li.kind-title {
ul.search li.kind-text {
list-style-type: "\1F4C4"; /* Unicode: Page Facing Up */
}
/* --- Dark Mode Overrides --- */
.dark-mode {
background-color: #121212;
color: #f0f0f0;
}

.dark-mode .pageheader,
.dark-mode .sphinxsidebar,
.dark-mode .footer,
.dark-mode .related {
background-color: #1f1f1f;
color: #eee;
}

.dark-mode a {
color: #90caf9;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3 {
color: #ffeb3b;
}
/* Feature card fix for dark mode */
.dark-mode .sphinx-feature {
background-color: #1e1e1e !important;
border: 1px solid #444;
color: #e0e0e0;
}

.dark-mode .sphinx-feature a {
color: #90caf9;
}

.dark-mode .sphinx-feature > p.admonition-title {
background-color: #2a2a2a !important;
color: #ffeb3b;
}
Binary file modified tests/roots/test-root/wrongenc.inc
Binary file not shown.
2 changes: 1 addition & 1 deletion tests/roots/test-warnings/wrongenc.inc
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
This file is encoded in latin-1 but at first read as utf-8.

Max Strauß aß in München eine Leberkässemmel.
Max Strauß aß in München eine Leberkässemmel.
Loading