Skip to content

Commit 740cb2b

Browse files
zoglozoglo
authored
Move theme-toggle styles into external css (#5)
- fixes not allowed `<style>` attribute within body
1 parent 48f68af commit 740cb2b

File tree

3 files changed

+140
-137
lines changed

3 files changed

+140
-137
lines changed

‎page/config/_default/config.toml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[params]
2+
custom_css = ["css/theme-toggle.css"]

‎page/layouts/partials/dark-mode-toggle.html

Lines changed: 0 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,3 @@
1-
<style>
2-
.dark-mode__switch {
3-
display: flex;
4-
position: relative;
5-
}
6-
.dark-mode__input {
7-
clip: rect(1px, 1px, 1px, 1px);
8-
clip-path: inset(50%);
9-
height: 1px;
10-
width: 1px;
11-
margin: -1px;
12-
overflow: hidden;
13-
padding: 0;
14-
position: absolute;
15-
}
16-
.dark-mode__label {
17-
position: relative;
18-
display: inline-block;
19-
width: 44px;
20-
height: 22px;
21-
margin: 16px 0 0;
22-
background-color: #2b2b2b;
23-
border: 2px solid #5b5b5b;
24-
border-radius: 50px;
25-
cursor: pointer;
26-
transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
27-
}
28-
.dark-mode__indicator {
29-
position: absolute;
30-
top: 50%;
31-
left: 50%;
32-
transform: translate(-50%, -50%) translateX(-72%);
33-
display: block;
34-
width: 15px;
35-
height: 15px;
36-
background-color: #7b7b7b;
37-
border-radius: 50px;
38-
box-shadow: 5px 0px 0 0 rgba(0, 0, 0, 0.2) inset;
39-
}
40-
.dark-mode__indicator::before, .dark-mode__indicator::after {
41-
position: absolute;
42-
content: "";
43-
display: block;
44-
background-color: #fff;
45-
border-radius: 9999px;
46-
}
47-
.dark-mode__indicator::before {
48-
top: 3.5px;
49-
left: 3.5px;
50-
width: 4.5px;
51-
height: 4.5px;
52-
background-color: #fff;
53-
opacity: 0.6;
54-
}
55-
.dark-mode__indicator::after {
56-
bottom: 4px;
57-
right: 3px;
58-
width: 6px;
59-
height: 6px;
60-
background-color: #fff;
61-
opacity: 0.8;
62-
}
63-
.dark-mode__indicator, .dark-mode__indicator::before, .dark-mode__indicator::after {
64-
transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
65-
}
66-
.dark-mode__decoration {
67-
position: absolute;
68-
top: 65%;
69-
left: 50%;
70-
display: block;
71-
width: 2px;
72-
height: 2px;
73-
background-color: #fff;
74-
border-radius: 50px;
75-
opacity: .3;
76-
}
77-
.dark-mode__decoration::before, .dark-mode__decoration::after {
78-
position: absolute;
79-
display: block;
80-
content: '';
81-
width: 2px;
82-
height: 2px;
83-
background-color: #fff;
84-
border-radius: 50px;
85-
}
86-
.dark-mode__decoration::before {
87-
top: -8px;
88-
left: 7px;
89-
opacity: 1;
90-
}
91-
.dark-mode__decoration::after {
92-
top: -3px;
93-
left: 15px;
94-
opacity: .2;
95-
}
96-
.dark-mode__input:checked + .dark-mode__label {
97-
background-color: #8fb5f5;
98-
border-color: #347cf8;
99-
}
100-
.dark-mode__input:checked + .dark-mode__label .dark-mode__indicator {
101-
background-color: #ecd21f;
102-
box-shadow: none;
103-
transform: translate(-50%, -50%) translateX(72%);
104-
}
105-
.dark-mode__input:checked + .dark-mode__label .dark-mode__indicator::before, .dark-mode__input:checked + .dark-mode__label .dark-mode__indicator::after {
106-
display: none;
107-
}
108-
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration {
109-
top: 50%;
110-
transform: translate(0%, -50%);
111-
width: 10px;
112-
height: 10px;
113-
opacity: 1;
114-
}
115-
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::before {
116-
width: 5px;
117-
height: 5px;
118-
top: auto;
119-
bottom: 0;
120-
left: -4px;
121-
opacity: 1;
122-
}
123-
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
124-
width: 7px;
125-
height: 7px;
126-
top: auto;
127-
bottom: 0;
128-
left: 8px;
129-
opacity: 1;
130-
}
131-
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration, .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::before, .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
132-
border-radius: 50px 50px 0 0;
133-
}
134-
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
135-
border-bottom-right-radius: 50px;
136-
}
137-
</style>
1381
<div class="dark-mode__switch">
1392
<input id="dark-mode-toggle" class="dark-mode__input" type="checkbox" onchange="setColorMode(this.checked?'light':'dark')" onload="getColorMode()" checked=""/>
1403
<label class="dark-mode__label" for="dark-mode-toggle">

‎page/static/css/theme-toggle.css

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/*
2+
Theme toggle styles
3+
*/
4+
.dark-mode__switch {
5+
display: flex;
6+
position: relative;
7+
}
8+
.dark-mode__input {
9+
clip: rect(1px, 1px, 1px, 1px);
10+
clip-path: inset(50%);
11+
height: 1px;
12+
width: 1px;
13+
margin: -1px;
14+
overflow: hidden;
15+
padding: 0;
16+
position: absolute;
17+
}
18+
.dark-mode__label {
19+
position: relative;
20+
display: inline-block;
21+
width: 44px;
22+
height: 22px;
23+
margin: 16px 0 0;
24+
background-color: #2b2b2b;
25+
border: 2px solid #5b5b5b;
26+
border-radius: 50px;
27+
cursor: pointer;
28+
transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
29+
}
30+
.dark-mode__indicator {
31+
position: absolute;
32+
top: 50%;
33+
left: 50%;
34+
transform: translate(-50%, -50%) translateX(-72%);
35+
display: block;
36+
width: 15px;
37+
height: 15px;
38+
background-color: #7b7b7b;
39+
border-radius: 50px;
40+
box-shadow: 5px 0px 0 0 rgba(0, 0, 0, 0.2) inset;
41+
}
42+
.dark-mode__indicator::before, .dark-mode__indicator::after {
43+
position: absolute;
44+
content: "";
45+
display: block;
46+
background-color: #fff;
47+
border-radius: 9999px;
48+
}
49+
.dark-mode__indicator::before {
50+
top: 3.5px;
51+
left: 3.5px;
52+
width: 4.5px;
53+
height: 4.5px;
54+
background-color: #fff;
55+
opacity: 0.6;
56+
}
57+
.dark-mode__indicator::after {
58+
bottom: 4px;
59+
right: 3px;
60+
width: 6px;
61+
height: 6px;
62+
background-color: #fff;
63+
opacity: 0.8;
64+
}
65+
.dark-mode__indicator, .dark-mode__indicator::before, .dark-mode__indicator::after {
66+
transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
67+
}
68+
.dark-mode__decoration {
69+
position: absolute;
70+
top: 65%;
71+
left: 50%;
72+
display: block;
73+
width: 2px;
74+
height: 2px;
75+
background-color: #fff;
76+
border-radius: 50px;
77+
opacity: .3;
78+
}
79+
.dark-mode__decoration::before, .dark-mode__decoration::after {
80+
position: absolute;
81+
display: block;
82+
content: '';
83+
width: 2px;
84+
height: 2px;
85+
background-color: #fff;
86+
border-radius: 50px;
87+
}
88+
.dark-mode__decoration::before {
89+
top: -8px;
90+
left: 7px;
91+
opacity: 1;
92+
}
93+
.dark-mode__decoration::after {
94+
top: -3px;
95+
left: 15px;
96+
opacity: .2;
97+
}
98+
.dark-mode__input:checked + .dark-mode__label {
99+
background-color: #8fb5f5;
100+
border-color: #347cf8;
101+
}
102+
.dark-mode__input:checked + .dark-mode__label .dark-mode__indicator {
103+
background-color: #ecd21f;
104+
box-shadow: none;
105+
transform: translate(-50%, -50%) translateX(72%);
106+
}
107+
.dark-mode__input:checked + .dark-mode__label .dark-mode__indicator::before, .dark-mode__input:checked + .dark-mode__label .dark-mode__indicator::after {
108+
display: none;
109+
}
110+
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration {
111+
top: 50%;
112+
transform: translate(0%, -50%);
113+
width: 10px;
114+
height: 10px;
115+
opacity: 1;
116+
}
117+
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::before {
118+
width: 5px;
119+
height: 5px;
120+
top: auto;
121+
bottom: 0;
122+
left: -4px;
123+
opacity: 1;
124+
}
125+
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
126+
width: 7px;
127+
height: 7px;
128+
top: auto;
129+
bottom: 0;
130+
left: 8px;
131+
opacity: 1;
132+
}
133+
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration, .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::before, .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
134+
border-radius: 50px 50px 0 0;
135+
}
136+
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
137+
border-bottom-right-radius: 50px;
138+
}

0 commit comments

Comments
 (0)