1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<template>
<div class="darkmode-switch">
<template v-if="darkmodeConfig === 'auto-switch'">
<div
class="item day"
:class="{ active: darkmode === 'off' }"
@click="setDarkmode('off')"
>
<LightIcon />
</div>
<div
class="item auto"
:class="{ active: darkmode === 'auto' }"
@click="setDarkmode('auto')"
>
<AutoIcon />
</div>
<div
class="item night"
:class="{ active: darkmode === 'on' }"
@click="setDarkmode('on')"
>
<DarkIcon />
</div>
</template>
<div v-else-if="darkmodeConfig === 'switch'" class="switch">
<input
id="switch"
class="switch-input"
type="checkbox"
:checked="darkmode !== 'on'"
@click="setDarkmode(darkmode === 'on' ? 'off' : 'on')"
/>
<label class="label" for="switch">
<span class="label-content" />
</label>
</div>
</div>
</template>
<script src="./DarkmodeSwitch" />
<style lang="stylus">
@keyframes starry_star
50%
background rgba(255, 255, 255, 0.1)
box-shadow #fff 7.5px -0.75px 0 0, #fff 3px 2.5px 0 -0.25px, rgba(255, 255, 255, 0.1) 9.5px 4.5px 0 0.25px, #fff 8px 8.5px 0 0, rgba(255, 255, 255, 0.1) 5px 6px 0 -0.375px, #fff 1.25px 9.5px 0 0.25px
@keyframes bounceIn
0%
opacity 0
transform scale(0.3)
50%
opacity 100
transform scale(1.1)
55%
transform scale(1.1)
75%
transform scale(0.9)
100%
opacity 100
transform scale(1)
.darkmode-switch
display flex
height 22px
&:hover
cursor pointer
.item
padding 2px
border 1px solid var(--accent-color)
border-left none
line-height 1
&:first-child
border-left 1px solid var(--accent-color)
&.day
border-radius 4px 0 0 4px
&.night
border-radius 0 4px 4px 0
.icon
width 16px
height 16px
color var(--accent-color)
&.active
background var(--accent-color)
&:hover
cursor default
.icon
color var(--white)
.switch
display block
text-align center
user-select none
.label
display block
position relative
width 31.25px
height 17.5px
margin 0 auto
border-radius 17.5px
border 1px solid #1c1c1c
background #3c4145
font-size 1.4em
transition all 250ms ease-in
&:hover
cursor pointer
&:before
content ''
display block
position absolute
top 0.5px
left 1px
width 14px
height 14px
border 1.25px solid #e3e3c7
border-radius 50%
background #fff
transition all 250ms ease-in
&:after
content ''
display block
position absolute
top 62%
left 9.75px
z-index 10
width 2.8px
height 2.8px
opacity 0
background #fff
border-radius 50%
box-shadow #fff 0 0, #fff 0.75px 0, #fff 1.5px 0, #fff 2.25px 0, #fff 2.75px 0, #fff 3.5px 0, #fff 4px 0, #fff 5.25px -0.25px 0 0.25px, #fff 4px -1.75px 0 -0.5px, #fff 1.75px -1.75px 0 0.25px, #d3d3d3 0 0 0 1px, #d3d3d3 1.5px 0 0 1px, #d3d3d3 2.75px 0 0 1px, #d3d3d3 4px 0 0 1px, #d3d3d3 5.25px -0.25px 0 1.25px, #d3d3d3 4px -1.75px 0 0.25px, #d3d3d3 1.75px -1.75px 0 1.25px
transition opacity 100ms ease-in
.label-content
display block
position absolute
top 2.25px
left 52.5%
z-index 20
width 1px
height 1px
border-radius 50%
background #fff
box-shadow rgba(255, 255, 255, 0.1) 7.5px -0.75px 0 0, rgba(255, 255, 255, 0.1) 3px 2.5px 0 -0.25px, #fff 9.5px 4.5px 0 0.25px, rgba(255, 255, 255, 0.1) 8px 8.5px 0 0, #fff 5px 6px 0 0.375px, rgba(255, 255, 255, 0.1) 1.25px 9.5px 0 0.25px
animation starry_star 5s ease-in-out infinite
transition all 250ms ease-in
&:before
content ''
display block
position absolute
top -0.5px
left -6.25px
width 4.5px
height 4.5px
background #fff
border-radius 50%
border 1.25px solid #e3e3c7
box-shadow #e3e3c7 -7px 0 0 -0.75px, #e3e3c7 -2px 6px 0 -0.5px
transform-origin -1.5px 130%
transition all 250ms ease-in
.switch-input
display none
transition all 250ms ease-in
&:checked + .label
background #9ee3fb
border 1px solid #86c3d7
&:before
left 13.75px
background #ffdf6d
border 1.25px solid #e1c348
&:after
opacity 100
animation bounceIn 0.6s ease-in-out 0.1s
animation-fill-mode backwards
& > .label-content
opacity 0
box-shadow rgba(255, 255, 255, 0.1) 7.5px -0.75px 0 -1px, rgba(255, 255, 255, 0.1) 3px 2.5px 0 -1.25px, #fff 9.5px 4.5px 0 -0.75px, rgba(255, 255, 255, 0.1) 8px 8.5px 0 -1px, #fff 5px 6px 0 -1.375px, rgba(255, 255, 255, 0.1) 1.25px 9.5px 0 -0.75px
animation none
&:before
left 6.25px
transform rotate(70deg)
</style>