Skip to content

Commit 7655edc

Browse files
alexander-schranzalexander-schranz
committed
Merge branch '2.2' of github.com:sulu/sulu-docs into 2.3
2 parents 02e8d32 + e9af3c0 commit 7655edc

File tree

2 files changed

+161
-17
lines changed

2 files changed

+161
-17
lines changed

‎_themes/sulu/layout.html‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,31 @@
1515

1616
{%- block header %}
1717
<!-- Header:Website:Replace -->
18+
<div class="color__switch">
19+
<input id="color-toggle" type="checkbox" onchange="setColorMode(this.checked?'light':'dark')" onload="getColorMode()" checked=""/>
20+
<label for="color-toggle">Toggle Dark Mode</label>
21+
</div>
22+
<script>
23+
const setColorMode = (theme) => {
24+
document.documentElement.setAttribute('data-theme', theme);
25+
localStorage.setItem('theme', theme);
26+
}
27+
28+
const getColorMode = () => {
29+
const getStoredTheme = () => localStorage.getItem('theme');
30+
const storedTheme = getStoredTheme();
31+
32+
if (storedTheme) {
33+
return storedTheme;
34+
}
35+
36+
return window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light';
37+
}
38+
39+
const colorMode = getColorMode();
40+
setColorMode(colorMode);
41+
document.getElementById('color-toggle').checked = colorMode === 'light';
42+
</script>
1843
{% endblock %}
1944

2045
{% block sidebartoc %}
@@ -30,7 +55,6 @@ <h3>Table of Contents</h3>
3055

3156
{%- block footer %}
3257
<!-- Footer:Website:Replace -->
33-
3458
<script type="text/javascript">
3559
var _paq = window._paq = window._paq || [];
3660
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */

‎_themes/sulu/static/sulu.css_t‎

Lines changed: 136 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,134 @@
1010
box-sizing: border-box;
1111
}
1212

13+
:root {
14+
--accent-color: #112a46;
15+
--body-bg: white;
16+
--body-color: #112a46;
17+
--nav-color: #112a46;
18+
--nav-hover-color: #52B6CA;
19+
--link-color: #52B6CA;
20+
--link-hover-color: #52B6CA;
21+
--border-color: #e7e9ec;
22+
--code-bg: #eee;
23+
--admonition-bg: rgba(204, 204, 204, 0.25);
24+
--warning-bg: rgba(255, 204, 0, 0.25);
25+
}
26+
27+
html[data-theme=dark] {
28+
--body-bg: #151b2a;
29+
--body-color: #f5f5f5;
30+
--nav-color: #ddd;
31+
--nav-hover-color: #52B6CA;
32+
--link-color: #52B6CA;
33+
--link-hover-color: #52B6CA;
34+
--border-color: #222223;
35+
--code-bg: #000;
36+
--admonition-bg: rgba(204, 204, 204, 0.25);
37+
--warning-bg: rgba(255, 204, 0, 0.25);
38+
color-scheme: dark;
39+
40+
a:visited {
41+
color: #ba6fff;
42+
}
43+
44+
.logo {
45+
filter: brightness(5);
46+
}
47+
48+
.highlight {
49+
.nb, .cp {
50+
color: #01972c;
51+
}
52+
.nt {
53+
color: #d5b778;
54+
}
55+
.cm {
56+
color: #7a7e85;
57+
}
58+
.gd {
59+
color: #df5959;
60+
}
61+
:is(.na, .nf, .s, .s1, .s2) {
62+
color: #56a8f5;
63+
}
64+
}
65+
}
66+
67+
/* Color switch */
68+
.color__switch {
69+
position: relative;
70+
cursor: pointer;
71+
margin: 16px 32px 0 auto;
72+
font-size: 3.25px;
73+
74+
height: 8em;
75+
width: 15em;
76+
77+
border-radius: 4em;
78+
79+
transition: all .5s ease;
80+
background: var(--accent-color);
81+
box-shadow: inset 0 0 0 2px var(--body-color);
82+
83+
label {
84+
position: absolute;
85+
inset:0;
86+
cursor: pointer;
87+
text-indent: -999em;
88+
}
89+
90+
input {
91+
all: unset;
92+
pointer-events: none;
93+
position: absolute;
94+
display: block;
95+
border-radius: 50%;
96+
transition: all 0.4s ease-in-out;
97+
top: 1.5em;
98+
left: 1.5em;
99+
transform: rotate(-75deg);
100+
width: 5em;
101+
height: 5em;
102+
background: var(--accent-color);
103+
box-shadow: 0.75em 0.625em 0 0 #d9fbff inset,
104+
rgba(255, 255, 255, 0.1) 0 -1.75em 0 -2.25em,
105+
rgba(255, 255, 255, 0.1) 1.5em 3.5em 0 -2.25em,
106+
rgba(255, 255, 255, 0.1) 1em 6.5em 0 -2em,
107+
rgba(255, 255, 255, 0.1) 3em 1em 0 -2.05em,
108+
rgba(255, 255, 255, 0.1) 4em 4em 0 -2.25em,
109+
rgba(255, 255, 255, 0.1) 3em 6.5em 0 -2.25em,
110+
rgba(255, 255, 255, 0.1) -2em 3.6em 0 -2.25em,
111+
rgba(255, 255, 255, 0.1) -.5em 5em 0 -2.25em;
112+
113+
&:checked {
114+
top: 2.25em;
115+
left: 9em;
116+
transform: rotate(0deg);
117+
width: 3.5em;
118+
height: 3.5em;
119+
background: #fff;
120+
box-shadow:
121+
1.5em 1.5em 0 2.5em #fff inset,
122+
0 -2.5em 0 -1.35em #fff,
123+
1.75em -1.75em 0 -1.5em #fff,
124+
2.5em 0 0 -1.35em #fff,
125+
1.75em 1.75em 0 -1.5em #fff,
126+
0 2.5em 0 -1.35em #fff,
127+
-1.75em 1.75em 0 -1.5em #fff,
128+
-2.5em 0 0 -1.35em #fff,
129+
-1.75em -1.75em 0 -1.5em #fff;
130+
}
131+
}
132+
}
133+
13134
/* Body */
14135
body {
15136
font-family: "IBM Plex Sans", sans-serif;
16137
font-size: 16px;
17138
line-height: 24px;
18-
background-color: white;
19-
color: #112a46;
139+
background-color: var(--body-bg);
140+
color: var(--body-color);
20141
margin: 0;
21142
padding: 0;
22143
padding-bottom: 100px;
@@ -108,21 +229,21 @@ div.sphinxsidebar ul ul {
108229
}
109230

110231
div.sphinxsidebar input {
111-
border-color: #e7e9ec;
232+
border-color: var(--border-color);
112233
}
113234

114235
div.sphinxsidebar a {
115-
color: #112a46;
236+
color: var(--nav-color);
116237
text-decoration: none;
117238
}
118239

119240
div.sphinxsidebar a:hover {
120-
color: #52B6CA;
241+
color: var(--nav-hover-color);
121242
text-decoration: underline;
122243
}
123244

124245
div.sphinxsidebar a.current {
125-
color: #52B6CA;
246+
color: var(--nav-hover-color);
126247
}
127248

128249
div.sphinxsidebar li {
@@ -188,17 +309,17 @@ div.toctree-wrapper a {
188309
}
189310

190311
div.toctree-wrapper a {
191-
color: #112a46;
312+
color: var(--nav-color);
192313
text-decoration: none;
193314
}
194315

195316
div.toctree-wrapper a:hover {
196-
color: #52B6CA;
317+
color: var(--nav-hover-color);
197318
text-decoration: underline;
198319
}
199320

200321
div.toctree-wrapper a.current {
201-
color: #52B6CA;
322+
color: var(--nav-hover-color);
202323
}
203324

204325
/* Mobile */
@@ -230,7 +351,7 @@ div.toctree-wrapper a.current {
230351

231352
/* Code highlight */
232353
pre {
233-
background: #eee;
354+
background: var(--code-bg);
234355
padding: 7px 10px;
235356
margin: 15px 0;
236357
line-height: 1.3em;
@@ -252,7 +373,7 @@ code {
252373

253374
/* admonition */
254375
div.admonition {
255-
background: rgba(204, 204, 204, 0.25);
376+
background: var(--admonition-bg);
256377
margin: 16px 0;
257378
padding: 16px;
258379
max-width: 75ch;
@@ -268,16 +389,16 @@ div.admonition p.last {
268389
}
269390

270391
div.admonition.warning {
271-
background: rgba(255, 204, 0, 0.25);
392+
background: var(--warning-bg);
272393
}
273394

274395
div.admonition.caution {
275-
background: rgba(255, 204, 0, 0.25);
396+
background: var(--warning-bg);
276397
}
277398

278399
/* Links */
279400
a {
280-
color: #52B6CA;
401+
color: var(--link-color);
281402
text-decoration: underline;
282403
}
283404

@@ -287,7 +408,7 @@ a:hover {
287408

288409
a.headerlink,
289410
a.headerlink:hover {
290-
color: #52B6CA;
411+
color: var(--link-color);
291412
text-decoration: none;
292413
}
293414

@@ -370,7 +491,6 @@ table.align-default {
370491
margin-left: 0;
371492
margin-right: 0;
372493
padding-left: 0;
373-
margin-right: 0;
374494
text-align: left;
375495
}
376496

0 commit comments

Comments
 (0)