pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://github.com/python/python-docs-theme/commit/b888ef79dc967ab7afa56efd7dd87820fecbc00c

Add preliminary dark theme implementation · python/python-docs-theme@b888ef7 · GitHub
Skip to content

Commit b888ef7

Browse files
septatrixseptatrix
committed
Add preliminary dark theme implementation
1 parent 1201e82 commit b888ef7

5 files changed

Lines changed: 237 additions & 26 deletions

File tree

‎python_docs_theme/layout.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,24 @@ <h3>{{ _('Navigation') }}</h3>
5959
{% block relbar1 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
6060
{% block relbar2 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
6161

62+
{% block relbaritems %}
63+
{%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
64+
<li class="right">
65+
{{ searchbox() }}
66+
{{ reldelim2 }}
67+
</li>
68+
{%- endif %}
69+
<li class="right"><input type="button" value="Toggle theme" class="theme-toggle" onclick="toggleTheme()">{{ reldelim2 }}</li>
70+
{% endblock %}
6271

6372
{%- block extrahead -%}
73+
<link rel="stylesheet" href="{{ pathto('_static/pydoctheme_dark.css', 1) }}" media="(prefers-color-scheme: dark)" id="pydoctheme_dark_css">
6474
<link rel="shortcut icon" type="image/png" href="{{ pathto('_static/' + theme_root_icon, 1) }}" />
6575
{%- if builder != "htmlhelp" %}
6676
{%- if not embedded %}
6777
<script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>
6878
<script type="text/javascript" src="{{ pathto('_static/menu.js', 1) }}"></script>
79+
<script type="text/javascript" src="{{ pathto('_static/themetoggle.js', 1) }}"></script>
6980
{%- endif -%}
7081
{%- endif -%}
7182
{{ super() }}

‎python_docs_theme/static/pydoctheme.css‎

Lines changed: 67 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,29 @@
1-
@import url("default.css");
1+
@import url('classic.css');
2+
3+
/* unset some styles from the classic stylesheet */
4+
div.document,
5+
div.body,
6+
div.related,
7+
div.body h1,
8+
div.body h2,
9+
div.body h3,
10+
div.body h4,
11+
div.body h5,
12+
div.body h6,
13+
div.sphinxsidebar a,
14+
div.sphinxsidebar p,
15+
div.sphinxsidebar ul,
16+
div.sphinxsidebar h3,
17+
div.sphinxsidebar h3 a,
18+
div.sphinxsidebar h4,
19+
table.docutils td,
20+
table.indextable tr.cap,
21+
pre {
22+
background-color: inherit;
23+
color: inherit;
24+
}
225

326
body {
4-
background-color: white;
527
margin-left: 1em;
628
margin-right: 1em;
729
}
@@ -14,19 +36,24 @@ body {
1436
div.related {
1537
margin-bottom: 1.2em;
1638
padding: 0.5em 0;
17-
border-bottom: 1px solid #ccc;
39+
border-top: 1px solid #ccc;
1840
margin-top: 0.5em;
1941
}
2042

2143
div.related a:hover {
22-
color: #0095C4;
44+
color: #0095c4;
2345
}
2446

2547
div.related ~ div.related {
2648
border-top: 1px solid #ccc;
2749
border-bottom: none;
2850
}
2951

52+
div.related:first-child {
53+
border-top: 0;
54+
border-bottom: 1px solid #ccc;
55+
}
56+
3057
.related .switchers {
3158
display: inline-flex;
3259
}
@@ -41,13 +68,19 @@ div.related ~ div.related {
4168
background-color: white;
4269
}
4370

44-
.inline-search {
45-
display: inline;
71+
72+
div.related ul::after {
73+
content: '';
74+
clear: both;
75+
display: block;
4676
}
77+
78+
.inline-search,
4779
form.inline-search input {
4880
display: inline;
4981
}
50-
form.inline-search input[type="submit"] {
82+
83+
form.inline-search input[type='submit'] {
5184
width: 40px;
5285
}
5386

@@ -60,13 +93,15 @@ div.sphinxsidebar {
6093
position: sticky;
6194
top: 0;
6295
max-height: 100vh;
63-
background-color: #eeeeee;
96+
color: #444;
97+
background-color: #eee;
6498
border-radius: 5px;
6599
line-height: 130%;
66100
font-size: smaller;
67101
}
68102

69-
div.sphinxsidebar h3, div.sphinxsidebar h4 {
103+
div.sphinxsidebar h3,
104+
div.sphinxsidebar h4 {
70105
margin-top: 1.5em;
71106
}
72107

@@ -86,18 +121,19 @@ div.sphinxsidebarwrapper > ul > li > ul > li {
86121
}
87122

88123
div.sphinxsidebar a:hover {
89-
color: #0095C4;
124+
color: #0095c4;
90125
}
91126

92127
form.inline-search input,
93-
div.sphinxsidebar input {
94-
Lucida Grande',Arial,sans-serif;
128+
div.sphinxsidebar input,
129+
div.related input {
130+
Lucida Grande', Arial, sans-serif;
95131
border: 1px solid #999999;
96132
font-size: smaller;
97133
border-radius: 3px;
98134
}
99135

100-
div.sphinxsidebar input[type=text] {
136+
div.sphinxsidebar input[type='text'] {
101137
max-width: 150px;
102138
}
103139

@@ -126,7 +162,8 @@ div.body pre {
126162
border: 1px solid #ac9;
127163
}
128164

129-
div.body div.admonition, div.body div.impl-detail {
165+
div.body div.admonition,
166+
div.body div.impl-detail {
130167
border-radius: 3px;
131168
}
132169

@@ -147,23 +184,28 @@ div.body a:visited {
147184
}
148185

149186
div.body a:hover {
150-
color: #00B0E4;
187+
color: #00b0e4;
151188
}
152189

153190
tt, code, pre {
154191
monospace", monospace;
155192
font-size: 96.5%;
156193
}
157194

158-
div.body tt, div.body code {
195+
div.body tt,
196+
div.body code {
159197
border-radius: 3px;
160198
}
161199

162-
div.body tt.descname, div.body code.descname {
200+
div.body tt.descname,
201+
div.body code.descname {
163202
font-size: 120%;
164203
}
165204

166-
div.body tt.xref, div.body a tt, div.body code.xref, div.body a code {
205+
div.body tt.xref,
206+
div.body a tt,
207+
div.body code.xref,
208+
div.body a code {
167209
font-weight: normal;
168210
}
169211

@@ -175,12 +217,14 @@ table.docutils {
175217
margin-bottom: 10px;
176218
}
177219

178-
table.docutils td, table.docutils th {
220+
table.docutils td,
221+
table.docutils th {
179222
border: 1px solid #ddd !important;
180223
border-radius: 3px;
181224
}
182225

183-
table p, table li {
226+
table p,
227+
table li {
184228
text-align: left !important;
185229
}
186230

@@ -194,7 +238,8 @@ table.docutils td {
194238
padding: 0.3em 0.5em;
195239
}
196240

197-
table.footnote, table.footnote td {
241+
table.footnote,
242+
table.footnote td {
198243
border: 0 !important;
199244
}
200245

@@ -207,7 +252,7 @@ div.footer {
207252
}
208253

209254
div.footer a:hover {
210-
color: #0095C4;
255+
color: #0095c4;
211256
}
212257

213258
.refcount {
@@ -218,10 +263,6 @@ div.footer a:hover {
218263
color: #229;
219264
}
220265

221-
.highlight {
222-
background: none !important;
223-
}
224-
225266
dl > dt span ~ em {
226267
monospace", monospace;
227268
}

‎python_docs_theme/static/pydoctheme_dark.css‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
2+
/* Browser elements */
3+
:root {
4+
scrollbar-color: #616161 transparent;
5+
color-scheme: dark light;
6+
}
7+
8+
html,
9+
body {
10+
background-color: #222;
11+
color: rgba(255, 255, 255, 0.87);
12+
}
13+
14+
div.related {
15+
color: rgba(255, 255, 255, 0.7); /* classic overwrite */
16+
border-top-color: #424242;
17+
}
18+
19+
div.related:first-child {
20+
/* use :first-child because border-color would need !important */
21+
border-bottom-color: #424242;
22+
}
23+
24+
/* SIDEBAR */
25+
div.sphinxsidebar {
26+
background-color: #333;
27+
color: inherit;
28+
}
29+
30+
#sidebarbutton {
31+
/* important to overwrite style attribute */
32+
background-color: #555 !important;
33+
color: inherit !important;
34+
}
35+
36+
div.sidebar {
37+
background-color: #424242;
38+
border-color: #616161;
39+
}
40+
41+
/* ANCHORS AND HIGHLIGHTS */
42+
div.body a {
43+
color: #7af;
44+
}
45+
46+
div.body a:visited {
47+
color: #09e;
48+
}
49+
50+
a.headerlink:hover {
51+
background-color: #424242;
52+
}
53+
54+
div.related a {
55+
color: currentColor;
56+
}
57+
58+
div.footer,
59+
div.footer a {
60+
color: currentColor; /* classic overwrites */
61+
}
62+
63+
dt:target,
64+
span.highlighted {
65+
background-color: #616161;
66+
}
67+
68+
/* Below for most things in text */
69+
70+
dl.field-list > dt {
71+
background-color: #434;
72+
}
73+
74+
table.docutils td,
75+
table.docutils th {
76+
border-color: #616161 !important;
77+
}
78+
79+
table.docutils th {
80+
background-color: #424242;
81+
}
82+
83+
.refcount {
84+
color: #afa;
85+
}
86+
87+
.stableabi {
88+
color: #bbf;
89+
}
90+
91+
div.body pre {
92+
border-color: #616161;
93+
}
94+
95+
code {
96+
background-color: #424242;
97+
}
98+
99+
div.body div.seealso {
100+
background-color: rgba(255, 255, 0, 0.1);
101+
}
102+
103+
div.warning {
104+
background-color: rgba(255, 0, 0, 0.2);
105+
}
106+
107+
.warning code {
108+
background-color: rgba(255, 0, 0, 0.5);
109+
}
110+
111+
div.topic,
112+
div.note {
113+
background-color: rgba(255, 255, 255, 0.1);
114+
border-color: currentColor;
115+
}
116+
117+
.note code {
118+
background-color: rgba(255, 255, 255, 0.1);
119+
}

‎python_docs_theme/static/themetoggle.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
let currentTheme = localStorage.getItem('currentTheme') || 'auto'
2+
3+
const pygmentsDark = document.getElementById('pygments_dark_css')
4+
const pydocthemeDark = document.getElementById('pydoctheme_dark_css')
5+
6+
const themeOrder = {
7+
light: 'dark',
8+
dark: 'auto',
9+
auto: 'light',
10+
}
11+
12+
updateTheme()
13+
14+
function toggleTheme() {
15+
currentTheme = themeOrder[currentTheme]
16+
localStorage.setItem('currentTheme', currentTheme)
17+
updateTheme()
18+
}
19+
20+
function updateTheme() {
21+
const buttons = Array.from(document.getElementsByClassName('theme-toggle'))
22+
switch (currentTheme) {
23+
case 'light':
24+
pydocthemeDark.media = 'not all'
25+
pygmentsDark.media = 'not all'
26+
buttons.forEach(e => e.value = "Toggle theme (light)")
27+
break;
28+
case 'dark':
29+
pydocthemeDark.media = 'all'
30+
pygmentsDark.media = 'all'
31+
buttons.forEach(e => e.value = "Toggle theme (dark)")
32+
break;
33+
default:
34+
// auto
35+
pydocthemeDark.media = '(prefers-color-scheme: dark)'
36+
pygmentsDark.media = '(prefers-color-scheme: dark)'
37+
buttons.forEach(e => e.value = "Toggle theme (auto)")
38+
}
39+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.




Check this box to remove all script contents from the fetched content.



Check this box to remove all images from the fetched content.


Check this box to remove all CSS styles from the fetched content.


Check this box to keep images inefficiently compressed and original size.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy