Skip to content

Commit b888ef7

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

File tree

5 files changed

+237
-26
lines changed

5 files changed

+237
-26
lines changed

‎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-
font-family: 'Lucida Grande',Arial,sans-serif;
128+
div.sphinxsidebar input,
129+
div.related input {
130+
font-family: '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
font-family: "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
font-family: "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)