Skip to content

Commit b1efc59

Browse files
NotenlishNotenlish
authored
Add dark theme for documentation (#2122)
* Add dark theme for documentation * Remove custom scrollbar * remove console.log() * Correct exception handling and paths in makeref.py Didn't realize what I was doing was dumb I copied the code from @gresm from #2122 (comment) * moved theme icons to their own files, space between assignment * proper way of adding js files Thanks to @gresm for telling me the correct way to add it. * get rid of unused library & add blank line * revert to single quotes * revert to single quotes * add newline * move searchbar to svg files, fix searchbar button not working, reverse the way data-theme works * scale down icons * reverse theme change icons * get rid of useless theme search icon * Update pygame.css_t * fixed a bug For a split second the page would look like light theme and then it would load the js file and quickly change the class attribute of the body tag. This was an annoying thing and I fixed it by using the <html> tag for putting the class and removing the `defer` attribute when loading the script.
1 parent e568f14 commit b1efc59

File tree

8 files changed

+439
-62
lines changed

8 files changed

+439
-62
lines changed

‎docs/reST/_static/dark-theme-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎docs/reST/_static/light-theme-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎docs/reST/_static/script.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
const htmlElement = document.documentElement;
3+
4+
if (localStorage.getItem('theme') === null) {
5+
localStorage.setItem('theme', 'light-theme');
6+
htmlElement.classList.add('light-theme');
7+
} else {
8+
htmlElement.classList.add(localStorage.getItem('theme'));
9+
}
10+
11+
// Execute once the DOM is loaded
12+
document.addEventListener('DOMContentLoaded', () => {
13+
const search_buttons = document.querySelectorAll('.searchbar-button');
14+
const search_submit = document.querySelector('.searchbar-submit');
15+
16+
// When the icon is clicked, submit the search form
17+
search_buttons.forEach((button) => {
18+
button.addEventListener('click', () => {
19+
search_submit.click();
20+
});
21+
});
22+
23+
const theme_icons = document.querySelectorAll('.theme-icon');
24+
theme_icons.forEach((icon) => {
25+
icon.addEventListener('click', () => {
26+
const theme = icon.getAttribute('data-theme');
27+
htmlElement.classList.add('light-theme', 'dark-theme');
28+
htmlElement.classList.remove(theme);
29+
localStorage.setItem('theme', htmlElement.classList[0]);
30+
});
31+
});
32+
});

‎docs/reST/_static/searchbar-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎docs/reST/ext/boilerplate.py

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ def setup(app):
4545
# This extension uses indexer collected tables.
4646
app.setup_extension("ext.indexer")
4747

48+
# Add js files for theme changing in docs.
49+
app.add_js_file("script.js")
50+
4851
# Documents to leave untransformed by boilerplate
4952
app.add_config_value("boilerplate_skip_transform", [], "")
5053

‎docs/reST/themes/classic/elements.html

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,22 @@ <h5>pygame-ce documentation</h5>
1717
</div>
1818
<div class="pagelinks">
1919
<div class="top">
20-
<a href="{{ theme_home_uri }}">Pygame-ce Home</a> ||
21-
<a href="{{ pathto(master_doc) }}">Help Contents</a> ||
22-
<a href="{{ pathto('genindex') }}">Reference Index</a>
23-
24-
<form action="{{ pathto('search') }}" method="get" style="display:inline;float:right;">
20+
<div class="nav-top-wrapper">
21+
<a href="{{ theme_home_uri }}">Pygame-ce Home</a> ||
22+
<a href="{{ pathto(master_doc) }}">Help Contents</a> ||
23+
<a href="{{ pathto('genindex') }}">Reference Index</a>
24+
</div>
25+
<div class="nav-theme-container">
26+
<img class="theme-icon" data-theme="dark-theme" src="{{ pathto('_static/light-theme-icon.svg', 1) }}" width="24" height="24" alt="Light Theme Icon">
27+
<img class="theme-icon" data-theme="light-theme" src="{{ pathto('_static/dark-theme-icon.svg', 1) }}" width="24" height="24" alt="Dark Theme Icon">
28+
</div>
29+
<div class="searchbar-container">
30+
<form action="{{ pathto('search') }}" method="get" class="searchbar-form" style="display:inline;float:right;">
2531
<input name="q" value="" type="text">
26-
<input value="search" type="submit">
32+
<img class="searchbar-button" src="{{ pathto('_static/searchbar-icon.svg', 1) }}" alt="Search">
33+
<input class="searchbar-submit" value="search" type="submit">
2734
</form>
35+
</div>
2836
</div>
2937
<hr style="color:black;border-bottom:none;border-style: dotted;border-bottom-style:none;">
3038
{#-

0 commit comments

Comments
 (0)