Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit b888ef7

Browse filesBrowse files
septatrixseptatrix
committed
Add preliminary dark theme implementation
1 parent 1201e82 commit b888ef7
Copy full SHA for b888ef7

5 files changed

+237-26Lines changed: 237 additions & 26 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎python_docs_theme/layout.html‎

Copy file name to clipboardExpand all lines: python_docs_theme/layout.html
+11Lines 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() }}
Collapse file

‎python_docs_theme/static/pydoctheme.css‎

Copy file name to clipboardExpand all lines: python_docs_theme/static/pydoctheme.css
+67-26Lines 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
}
Collapse file

‎python_docs_theme/static/pydoctheme_dark.css‎

Copy file name to clipboard
+119Lines 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+
}
Collapse file

‎python_docs_theme/static/themetoggle.js‎

Copy file name to clipboard
+39Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.