Skip to content

Commit f132558

Browse files
michalsnmichalsn
committed
user guide - dark mode
1 parent 00a60e0 commit f132558

3 files changed

Lines changed: 335 additions & 2 deletions

File tree

‎user_guide_src/source/_static/css/citheme.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,10 @@ h2, h3 {
139139
background: #252525;
140140
}
141141

142+
.wy-side-nav-search {
143+
background: #dd4814;
144+
}
145+
142146
.wy-side-nav-search .logo {
143147
width: 100% !important;
144148
}

‎user_guide_src/source/_static/css/citheme_dark.css‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
/*
2+
* Based heavily on https://darkreader.org/
3+
*/
4+
5+
@media (prefers-color-scheme: dark) {
6+
7+
hr {
8+
border-top: 1px solid rgb(56, 61, 63);
9+
}
10+
11+
pre {
12+
background-color: #282b2d !important
13+
}
14+
15+
img:not([src*='.svg']) {
16+
filter: grayscale(50%) contrast(70%);;
17+
}
18+
19+
html {
20+
background-color: #181a1b !important;
21+
}
22+
23+
html, body {
24+
background-color: #181a1b;
25+
color: rgb(192, 186, 178);
26+
}
27+
28+
table {
29+
border-color: #545b5e;
30+
}
31+
32+
::placeholder {
33+
color: #b2aba1;
34+
}
35+
36+
input:-webkit-autofill,
37+
textarea:-webkit-autofill,
38+
select:-webkit-autofill {
39+
background-color: #404400 !important;
40+
color: #e8e6e3 !important;
41+
}
42+
43+
.wy-side-nav-search {
44+
background-color: #b13a10;
45+
color: rgb(230, 228, 225);
46+
}
47+
48+
.wy-side-nav-search input[type=text] {
49+
box-shadow: rgb(43 47 49) 0px 1px 3px inset;
50+
border-color: rgb(59 59 59);
51+
background-color: rgb(59 59 59);
52+
}
53+
54+
.btn {
55+
color: rgb(232, 230, 227);
56+
border-color: rgba(140, 130, 115, 0.1);
57+
background-color: rgb(31, 139, 77);
58+
text-decoration-color: initial;
59+
box-shadow: rgb(24 26 27 / 50%) 0px 1px 2px -1px inset, rgb(0 0 0 / 10%) 0px -2px 0px 0px inset;
60+
padding: 8px 8px 6px;
61+
line-height: 15px;
62+
}
63+
64+
.btn-neutral, .btn-neutral:visited {
65+
background-color: rgb(27, 36, 36) !important;
66+
color: rgb(192, 186, 178) !important;
67+
}
68+
69+
.btn-neutral:hover {
70+
background-color: rgb(42, 47, 47) !important;
71+
}
72+
73+
footer {
74+
color: rgb(152, 143, 129);
75+
}
76+
77+
.wy-nav-content {
78+
background-color: #181a1b;
79+
color: rgb(192, 186, 178);
80+
}
81+
82+
.method .sig-object, .class dt, .data dt, .attribute dt, .function dt,
83+
.descclassname, .descname {
84+
background-color: rgb(40, 43, 45) !important;
85+
color: rgb(192, 186, 178);
86+
}
87+
88+
html.writer-html4 .rst-content dl:not(.docutils) > dt, html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) > dt {
89+
color: #ccc;
90+
}
91+
92+
html.writer-html4 .rst-content dl:not(.docutils) dl:not(.field-list) > dt, html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) dl:not(.field-list) > dt {
93+
color: #96928c;
94+
border-left: 3px solid #3f4547;
95+
}
96+
97+
html.writer-html4 .rst-content dl:not(.docutils) .optional, html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) .optional {
98+
color: #c0bab2;
99+
}
100+
101+
.method dt, .function .field-list dt {
102+
background-color: inherit !important;
103+
}
104+
105+
.rst-content .toc-backref {
106+
color: rgb(192, 186, 178);
107+
}
108+
109+
code.literal {
110+
background-color: #2d2d2d !important;
111+
border: 1px solid #6d6d6d !important;
112+
}
113+
114+
.wy-nav-top {
115+
background-color: #b13a10 !important;
116+
}
117+
118+
.wy-nav-side {
119+
background-color: rgb(28, 30, 31);
120+
}
121+
122+
.wy-menu-vertical a:visited {
123+
color: rgb(192, 186, 178);
124+
}
125+
126+
.wy-menu-vertical li.current > a button.toctree-expand, .wy-menu-vertical li.on a button.toctree-expand {
127+
color: rgb(200, 195, 188);
128+
}
129+
.wy-menu-vertical a:hover button.toctree-expand {
130+
color: rgb(208, 204, 198);
131+
}
132+
133+
.wy-nav-content-wrap {
134+
background-color: #181a1b;
135+
}
136+
137+
.wy-nav-content-wrap a, .wy-nav-content-wrap a:visited {
138+
color: rgb(237, 101, 54);
139+
}
140+
141+
.wy-nav-content-wrap a:hover, .wy-nav-content-wrap a:active {
142+
color: rgb(241, 138, 103);
143+
}
144+
145+
.wy-menu-vertical a:active {
146+
background-color: #b13a10;
147+
}
148+
149+
.sidebar {
150+
background-color: #191919 !important;
151+
}
152+
153+
.sidebar-title {
154+
background-color: #2b2b2b !important;
155+
}
156+
157+
.xref, .py-meth {
158+
color: #96928c !important;
159+
}
160+
161+
.admonition, .note {
162+
background-color: #2d2d2d !important;
163+
}
164+
165+
/* override table width restrictions */
166+
167+
.wy-table thead, .rst-content table.docutils thead, .rst-content table.field-list thead {
168+
background-color: inherit;
169+
}
170+
171+
.rst-content table.docutils thead, .rst-content table.field-list thead, .wy-table thead {
172+
color: rgb(192, 186, 178);
173+
}
174+
175+
.wy-table thead th, .rst-content table.docutils thead th, .rst-content table.field-list thead th {
176+
border: solid 2px #e1e4e5;
177+
}
178+
179+
.wy-table thead p, .rst-content table.docutils thead p, .rst-content table.field-list thead p {
180+
margin: 0;
181+
}
182+
183+
.wy-table-odd td, .wy-table-striped tr:nth-child(2n-1) td, .rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td {
184+
background-color: #343131;
185+
}
186+
187+
/* Messages ----------------------------------------------------------------- */
188+
189+
.rst-content .section .admonition ul {
190+
margin-bottom: 0;
191+
}
192+
193+
.rst-content code.literal, .rst-content tt.literal {
194+
color: rgb(233, 88, 73);
195+
}
196+
197+
.rst-content .note .admonition-title, .rst-content .note .wy-alert-title, .rst-content .seealso .admonition-title, .rst-content .seealso .wy-alert-title, .rst-content .wy-alert-info.admonition-todo .admonition-title, .rst-content .wy-alert-info.admonition-todo .wy-alert-title, .rst-content .wy-alert-info.admonition .admonition-title, .rst-content .wy-alert-info.admonition .wy-alert-title, .rst-content .wy-alert-info.attention .admonition-title, .rst-content .wy-alert-info.attention .wy-alert-title, .rst-content .wy-alert-info.caution .admonition-title, .rst-content .wy-alert-info.caution .wy-alert-title, .rst-content .wy-alert-info.danger .admonition-title, .rst-content .wy-alert-info.danger .wy-alert-title, .rst-content .wy-alert-info.error .admonition-title, .rst-content .wy-alert-info.error .wy-alert-title, .rst-content .wy-alert-info.hint .admonition-title, .rst-content .wy-alert-info.hint .wy-alert-title, .rst-content .wy-alert-info.important .admonition-title, .rst-content .wy-alert-info.important .wy-alert-title, .rst-content .wy-alert-info.tip .admonition-title, .rst-content .wy-alert-info.tip .wy-alert-title, .rst-content .wy-alert-info.warning .admonition-title, .rst-content .wy-alert-info.warning .wy-alert-title, .rst-content .wy-alert.wy-alert-info .admonition-title, .wy-alert.wy-alert-info .rst-content .admonition-title, .wy-alert.wy-alert-info .wy-alert-title {
198+
background: #3a6d8e;
199+
color: #cdcdcd;
200+
}
201+
202+
.rst-content .admonition-todo .admonition-title, .rst-content .admonition-todo .wy-alert-title, .rst-content .attention .admonition-title, .rst-content .attention .wy-alert-title, .rst-content .caution .admonition-title, .rst-content .caution .wy-alert-title, .rst-content .warning .admonition-title, .rst-content .warning .wy-alert-title, .rst-content .wy-alert-warning.admonition .admonition-title, .rst-content .wy-alert-warning.admonition .wy-alert-title, .rst-content .wy-alert-warning.danger .admonition-title, .rst-content .wy-alert-warning.danger .wy-alert-title, .rst-content .wy-alert-warning.error .admonition-title, .rst-content .wy-alert-warning.error .wy-alert-title, .rst-content .wy-alert-warning.hint .admonition-title, .rst-content .wy-alert-warning.hint .wy-alert-title, .rst-content .wy-alert-warning.important .admonition-title, .rst-content .wy-alert-warning.important .wy-alert-title, .rst-content .wy-alert-warning.note .admonition-title, .rst-content .wy-alert-warning.note .wy-alert-title, .rst-content .wy-alert-warning.seealso .admonition-title, .rst-content .wy-alert-warning.seealso .wy-alert-title, .rst-content .wy-alert-warning.tip .admonition-title, .rst-content .wy-alert-warning.tip .wy-alert-title, .rst-content .wy-alert.wy-alert-warning .admonition-title, .wy-alert.wy-alert-warning .rst-content .admonition-title, .wy-alert.wy-alert-warning .wy-alert-title {
203+
background: #b96a26;
204+
color: #cdcdcd;
205+
}
206+
207+
/* Content ----------------------------------------------------------------- */
208+
209+
.rst-content .important .admonition-title {
210+
background: #b04926;
211+
color: #cdcdcd;
212+
}
213+
214+
.rst-content div[class^="highlight"], .rst-content pre.literal-block {
215+
border: 1px solid rgb(63, 69, 71);
216+
}
217+
218+
html.writer-html4 .rst-content dl:not(.docutils) > dt, html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) > dt {
219+
border-top: solid 3px #b13a10;
220+
}
221+
222+
html.writer-html4 .rst-content dl:not(.docutils) > dt, html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) > dt {
223+
background: #282b2d;
224+
}
225+
226+
/* Side Menu ---------------------------------------------------------------- */
227+
228+
.wy-menu-vertical li.current {
229+
background: rgb(40, 43, 45);
230+
}
231+
232+
.wy-menu-vertical li.current > a, .wy-menu-vertical li.on a, .wy-menu-vertical li.current > a:hover, .wy-menu-vertical li.on a:hover {
233+
background-color: rgb(24, 26, 27);
234+
color: rgb(192, 186, 178)
235+
}
236+
237+
.wy-menu-vertical li.toctree-l1.current > a {
238+
border-bottom-color: rgb(63, 69, 71);
239+
border-top-color: rgb(63, 69, 71);
240+
241+
}
242+
243+
.wy-menu-vertical li.current a {
244+
border-right-color: rgb(63, 69, 71);
245+
}
246+
247+
.wy-menu-vertical li.toctree-l2.current > a, .wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a,
248+
.wy-menu-vertical li.toctree-l2.current:hover > a, .wy-menu-vertical li.toctree-l2.current li.toctree-l3:hover > a {
249+
background: #3c3c3c;
250+
border-right-color: rgb(63, 69, 71);
251+
}
252+
253+
.wy-menu-vertical li.toctree-l2:hover > a, .wy-menu-vertical li.toctree-l2.current li.toctree-l3:hover > a {
254+
background: #1c2020;
255+
}
256+
257+
.wy-menu-vertical li.toctree-l2 a, .wy-menu-vertical li.toctree-l3 a, .wy-menu-vertical li.toctree-l4 a, .wy-menu-vertical li.toctree-l5 a, .wy-menu-vertical li.toctree-l6 a, .wy-menu-vertical li.toctree-l7 a, .wy-menu-vertical li.toctree-l8 a, .wy-menu-vertical li.toctree-l9 a, .wy-menu-vertical li.toctree-l10 a {
258+
color: rgb(192, 186, 178);
259+
}
260+
261+
.wy-menu-vertical li code {
262+
color: rgb(237, 101, 54);
263+
}
264+
265+
.wy-menu-vertical .xref {
266+
color: #2980B9 !important;
267+
}
268+
269+
/* Search results ---------------------------------------------------------------- */
270+
271+
#search-results .search li:first-child {
272+
border-top: 1px solid rgb(56, 61, 63);
273+
}
274+
275+
#search-results .search li {
276+
border-bottom: 1px solid rgb(56, 61, 63);
277+
padding-bottom: 14px !important;
278+
}
279+
280+
.highlighted {
281+
background-color: #5e5939 !important
282+
}
283+
284+
a .highlighted {
285+
color: #cecece;
286+
}
287+
288+
.rst-content .highlighted {
289+
box-shadow: 0 0 0 2px #b3a159;
290+
}
291+
292+
/* Elements ----------------------------------------------------------------- */
293+
294+
.highlight .m {
295+
color: inherit
296+
}
297+
298+
.highlight .nt {
299+
color: #a6a6df;
300+
}
301+
302+
.highlight .nv {
303+
color: #4f9fd5;
304+
}
305+
306+
.highlight .na {
307+
color: #57acac;
308+
}
309+
310+
.highlight .nc {
311+
color: #7687b9;
312+
font-weight: bold;
313+
}
314+
315+
.highlight .nf {
316+
color: #b96f6f;
317+
font-weight: bold;
318+
}
319+
320+
.highlight .fm {
321+
color: #b96f6f;
322+
font-weight: bold;
323+
}
324+
325+
.highlight .ni {
326+
color: #b780b7;
327+
}
328+
}

‎user_guide_src/source/conf.py‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,6 @@
8080
'includehidden': False,
8181
'logo_only': True,
8282
'display_version': False,
83-
'style_nav_header_background': '#DD4814',
8483
}
8584

8685
# If not '', a 'Last updated on:' timestamp is inserted at every page bottom,
@@ -106,7 +105,9 @@
106105
html_copy_source = False
107106

108107
# A list of CSS files.
109-
html_css_files = []
108+
html_css_files = [
109+
'css/citheme_dark.css'
110+
]
110111

111112
# A list of JS files.
112113
html_js_files = [

0 commit comments

Comments
 (0)