网红主题控件

这篇文章用于展示一个网红的主题切换控件。
在手机端和桌面端都可以使用上方控件切换明暗模式。
参考来源：
https://github.com/SunnyDesignor/WpfGorgeousThemeSwitch
https://codepen.io/linxiang-webcraft/pen/pvbvLBN
辅助：Gemini 3 Pro
源码：
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Theme Switch Component</title>
7
    <style>
8
        body {
9
            display: flex;
10
            justify-content: center;
11
            align-items: center;
12
            height: 100vh;
13
            margin: 0;
14
            background-color: #f0f0f0;
15
            transition: background-color 0.3s;
16
        }
17

18
        body.dark {
19
            background-color: #1a1b26;
20
        }
21

22
        /* Component Styles */
23
        .theme-switch-wrapper {
24
            display: flex;
25
            align-items: center;
26
            justify-content: center;
27
            margin-top: 0.25rem;
28
        }
29

30
        .theme-toggle {
31
            --base-scale: 15px; /* Adjusted for smaller size */
32
            --toggle-width: 5.625em;
33
            --toggle-height: 2.5em;
34
            --radius-pill: 100em;
35
            --sun-diameter: 2.125em;
36
            --sun-offset: calc((var(--toggle-height) - var(--sun-diameter)) / 2);
37

38
            --bg-toggle-light: #3d7eae;
39
            --bg-toggle-dark: #1d1f2c;
40
            --color-sun: #ecca2f;
41
            --color-sun-totem: #d6b025;
42
            --color-moon: #c4c9d1;
43
            --color-crater: #959db1;
44
            --color-star: #fff;
45
            --color-cloud-front: #f3fdff;
46
            --color-cloud-back: #aacadf;
47

48
            --shadow-primary: rgba(0, 0, 0, 0.25);
49
            --shadow-highlight: rgba(255, 255, 255, 0.94);
50
            --halo-color: rgba(255, 255, 255, 0.1);
51

52
            font-size: var(--base-scale);
53
            background: none;
54
            border: none;
55
            padding: 0;
56
            cursor: pointer;
57
            outline: none;
58
            -webkit-tap-highlight-color: transparent;
59
        }
60

61
        .theme-toggle.collapsed {
62
            --toggle-width: 2.5em; /* Collapse to circle */
63
        }
64

65
        .theme-toggle__container {
66
            width: var(--toggle-width);
67
            height: var(--toggle-height);
68
            background-color: var(--bg-toggle-light);
69
            border-radius: var(--radius-pill);
70

71
            position: relative;
72
            transition: background-color 0.3s ease, width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
73
            overflow: hidden;
74
            box-shadow: 0.06em 0.06em 0.125em var(--shadow-highlight);
75
        }
76

77
        .theme-toggle__container.dark {
78
            background-color: var(--bg-toggle-dark);
79
            box-shadow: none;
80
        }
81

82
        .theme-toggle__container::after {
83
            content: "";
84
            position: absolute;
85
            inset: 0;
86
            box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.5) inset;
87
            border-radius: var(--radius-pill);
88
            pointer-events: none;
89
        }
90

91
        .theme-toggle__sun-wrapper {
92
            position: absolute;
93
            top: var(--sun-offset);
94
            left: var(--sun-offset);
95
            width: var(--sun-diameter);
96
            height: var(--sun-diameter);
97
            z-index: 10;
98
            /* transform handled by inline style */
99
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
100
        }
101

102
        .theme-toggle__container.bounce-enabled .theme-toggle__sun-wrapper {
103
            transition: transform 0.6s cubic-bezier(0.25, 1.25, 0.4, 1);
104
        }
105

106
        .theme-toggle__sun {
107
            width: 100%;
108
            height: 100%;
109
            background-color: var(--color-sun);
110
            border-radius: 50%;
111
            overflow: hidden;
112
            box-shadow: 0.05em 0.125em 0.125em var(--shadow-primary),
113
                0em 0.05em 0.125em var(--shadow-primary),
114
                0.05em 0.05em 0.05em 0em rgba(254, 255, 239, 0.61) inset,
115
                0em -0.05em 0.05em 0em #a1872a inset, 0 0 0 0.625em var(--halo-color),
116
                0 0 0 1.25em var(--halo-color), 0 0 0 1.875em var(--halo-color);
117
        }
118

119
        .theme-toggle__totem {
120
            position: absolute;
121
            top: 0;
122
            left: 0;
123
            width: 100%;
124
            height: 100%;
125
            pointer-events: none;
126
        }
127

128
        .theme-toggle__totem path {
129
            stroke: var(--color-sun-totem);
130
            stroke-width: 5;
131
            stroke-linecap: round;
132
            fill: none;
133
            filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
134
        }
135

136
        .theme-toggle__moon-mask {
137
            position: relative;
138
            width: 100%;
139
            height: 100%;
140
            background-color: var(--color-moon);
141
            border-radius: inherit;
142
            transform: translateX(100%);
143
            transition: transform 0.3s ease;
144

145
            box-shadow: 0.05em 0.05em 0.05em 0em rgba(255, 255, 255, 0.9) inset,
146
                0em -0.05em 0.05em 0em #959db1 inset;
147
        }
148

149
        .theme-toggle__container.bounce-enabled .theme-toggle__moon-mask {
150
            transition: transform 0.6s cubic-bezier(0.25, 1.25, 0.4, 1);
151
        }
152

153
        .theme-toggle__container.dark .theme-toggle__moon-mask {
154
            transform: translateX(0);
155
        }
156

157
        .theme-toggle__crater {
158
            position: absolute;
159
            background-color: var(--color-crater);
160
            border-radius: 50%;
161
            box-shadow: 0em 0.03em 0.06em var(--shadow-primary) inset;
162
        }
163

164
        .theme-toggle__crater:nth-of-type(1) {
165
            top: 0.75em;
166
            left: 0.3em;
167
            width: 0.75em;
168
            height: 0.75em;
169
        }
170

171
        .theme-toggle__crater:nth-of-type(2) {
172
            top: 0.9em;
173
            left: 1.375em;
174
            width: 0.375em;
175
            height: 0.375em;
176
        }
177

178
        .theme-toggle__crater:nth-of-type(3) {
179
            top: 0.3em;
180
            left: 0.8em;
181
            width: 0.25em;
182
            height: 0.25em;
183
        }
184

185
        /* Stars */
186
        .theme-toggle__stars {
187
            position: absolute;
188
            left: 0;
189
            top: 0;
190
            width: 100%;
191
            height: 100%;
192
            transform: translateY(-100%);
193
            transition: transform 0.3s ease;
194
            pointer-events: none;
195
        }
196

197
        .theme-toggle__container.bounce-enabled .theme-toggle__stars {
198
            transition: transform 0.6s cubic-bezier(0.25, 1.25, 0.4, 1);
199
        }
200

201
        .theme-toggle__container.dark .theme-toggle__stars {
202
            transform: translateY(0);
203
        }
204

205
        .star {
206
            position: absolute;
207
            width: 0.29em;
208
            height: 0.29em;
209
        }
210

211
        /* WPF Star Positions (converted to em, 1em = 17px) */
212
        .star-1 { left: 1.21em; top: 0.32em; width: 0.41em; height: 0.41em; animation: twinkle 2.5s infinite 1.3s; }
213
        /* star-2 removed */
214
        .star-3 { left: 1.45em; top: 1.56em; width: 0.29em; height: 0.29em; animation: twinkle 3.1s infinite 2.0s; }
215
        .star-4 { left: 0.59em; top: 0.65em; width: 0.18em; height: 0.18em; animation: twinkle 3.3s infinite 2.2s; }
216
        /* star-5 removed */
217

218
        /* Former dots converted to stars */
219
        .star-6 { left: 0.68em; top: 1.56em; width: 0.29em; height: 0.29em; animation: twinkle 2.4s infinite 1.4s; }
220
        .star-7 { left: 1.9em; top: 0.74em; width: 0.35em; height: 0.35em; animation: twinkle 2.7s infinite 1.8s; }
221
        .star-8 { left: 1.39em; top: 1.06em; width: 0.24em; height: 0.24em; animation: twinkle 3.0s infinite 2.3s; }
222
        .star-9 { left: 2em; top: 1.41em; width: 0.18em; height: 0.18em; animation: twinkle 2.9s infinite 1.5s; }
223
        /* star-10 removed */
224
        .star-11 { left: 2.32em; top: 0.47em; width: 0.29em; height: 0.29em; animation: twinkle 3.5s infinite 2.1s; }
225

226
        @keyframes twinkle {
227
            0%, 100% { transform: scale(1); opacity: 1; }
228
            50% { transform: scale(0); opacity: 0.5; }
229
        }
230

231
        /* Clouds */
232
        .theme-toggle__clouds {
233
            position: absolute;
234
            left: 0;
235
            top: 0;
236
            width: 100%;
237
            height: 100%;
238
            pointer-events: none;
239
        }
240

241
        .cloud {
242
            position: absolute;
243
            width: 5.88em;
244
            height: 2.35em;
245
            transition: transform 0.6s ease-in-out;
246
        }
247

248
        .theme-toggle__container.bounce-enabled .cloud {
249
            transition: transform 0.6s cubic-bezier(0.25, 1.25, 0.4, 1);
250
        }
251

252
        .theme-toggle__container.dark .cloud {
253
            transition: none;
254
        }
255

256
        .cloud-1 {
257
            top: 0.35em;
258
            left: 0;
259
            animation: Cloud1Bounce 3.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
260
        }
261

262
        .theme-toggle__container.dark .cloud-1 {
263
            transform: translateY(2.35em);
264
            animation: none;
265
        }
266

267
        @keyframes Cloud1Bounce {
268
            0% { transform: translateY(2em); }
269
            16% { transform: translateY(-0.18em); }
270
            66% { transform: translateY(0.12em); }
271
            100% { transform: translateY(0); }
272
        }
273

274
        .cloud-2 {
275
            top: 0.71em;
276
            left: 0;
277
            animation: Cloud2Bounce 2.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
278
        }
279

280
        .theme-toggle__container.dark .cloud-2 {
281
            transform: translateY(1.76em);
282
            animation: none;
283
        }
284

285
        @keyframes Cloud2Bounce {
286
            0% { transform: translateY(1.53em); }
287
            21% { transform: translateY(-0.12em); }
288
            64% { transform: translateY(0.09em); }
289
            100% { transform: translateY(0); }
290
        }
291
    </style>
292
</head>
293
<body>
294

295
<div class="theme-switch-wrapper">
296
    <button id="themeToggle" class="theme-toggle collapsed" aria-label="Toggle Theme">
297
        <div class="theme-toggle__container">
298
            <div class="theme-toggle__stars">
299
                <svg class="star star-1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
300
                    <path d="M100,50 C72.38589,50 50,72.38589 50,100 C50,72.38589 27.61411,50 0,50 C27.61411,50 50,27.61411 50,0 C50,27.61411 72.38589,50 100,50 z" fill="white"/>
301
                </svg>
302
                <svg class="star star-3" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
303
                    <path d="M100,50 C72.38589,50 50,72.38589 50,100 C50,72.38589 27.61411,50 0,50 C27.61411,50 50,27.61411 50,0 C50,27.61411 72.38589,50 100,50 z" fill="white"/>
304
                </svg>
305
                <svg class="star star-4" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
306
                    <path d="M100,50 C72.38589,50 50,72.38589 50,100 C50,72.38589 27.61411,50 0,50 C27.61411,50 50,27.61411 50,0 C50,27.61411 72.38589,50 100,50 z" fill="white"/>
307
                </svg>
308
                <svg class="star star-6" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
309
                    <path d="M100,50 C72.38589,50 50,72.38589 50,100 C50,72.38589 27.61411,50 0,50 C27.61411,50 50,27.61411 50,0 C50,27.61411 72.38589,50 100,50 z" fill="white"/>
310
                </svg>
311
                <svg class="star star-7" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
312
                    <path d="M100,50 C72.38589,50 50,72.38589 50,100 C50,72.38589 27.61411,50 0,50 C27.61411,50 50,27.61411 50,0 C50,27.61411 72.38589,50 100,50 z" fill="white"/>
313
                </svg>
314
                <svg class="star star-8" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
315
                    <path d="M100,50 C72.38589,50 50,72.38589 50,100 C50,72.38589 27.61411,50 0,50 C27.61411,50 50,27.61411 50,0 C50,27.61411 72.38589,50 100,50 z" fill="white"/>
316
                </svg>
317
                <svg class="star star-9" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
318
                    <path d="M100,50 C72.38589,50 50,72.38589 50,100 C50,72.38589 27.61411,50 0,50 C27.61411,50 50,27.61411 50,0 C50,27.61411 72.38589,50 100,50 z" fill="white"/>
319
                </svg>
320
                <svg class="star star-11" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
321
                    <path d="M100,50 C72.38589,50 50,72.38589 50,100 C50,72.38589 27.61411,50 0,50 C27.61411,50 50,27.61411 50,0 C50,27.61411 72.38589,50 100,50 z" fill="white"/>
322
                </svg>
323
            </div>
324

325
            <div class="theme-toggle__clouds">
326
                <svg class="cloud cloud-1" viewBox="155 290 372 178" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
327
                    <path d="M158.99223,453.55724 C169.78284,423.31232 203.15378,392.41965 241.59875,404.12313 261.99875,383.72313 299.3,391.57463 305.3,392.77701 330.15525,362.39707 353.16314,370.00505 368.58869,378.91567 370.80287,377.8725 376.53823,377.01298 381.06677,376.82559 387.43795,354.90123 410.63981,354.27147 420.4351,355.75324 432.85079,341.48144 440.27525,342.83843 451.87985,342.32945 457.75133,307.27233 472.82215,288.94564 509.06064,292.16184 512.31051,292.45027 525.93938,292.61638 525.93938,292.61638 525.90428,295.34879 526.73875,460.86787 526.8053,465.68179 L154.99571,465.6552 z" fill="#ffffff" fill-opacity="0.53"/>
328
                </svg>
329
                <svg class="cloud cloud-2" viewBox="155 290 372 178" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
330
                    <path d="M158.99223,453.55724 C169.78284,423.31232 203.15378,392.41965 241.59875,404.12313 261.99875,383.72313 299.3,391.57463 305.3,392.77701 337.22357,353.75764 390.50003,373.43798 398.90003,384.97667 412.50003,378.21261 430.04088,381.41688 430.04088,381.41688 436.82018,362.13027 456.18064,352.96024 465.00342,351.59457 460.57167,304.02021 510.55723,292.35177 521.33687,292.25901 530.92623,292.1765 525.93938,292.61638 525.93938,292.61638 525.90428,295.34879 526.73875,460.86787 526.8053,465.68179 L154.99571,465.6552 z" fill="white"/>
331
                </svg>
332
            </div>
333

334
            <div class="theme-toggle__sun-wrapper">
335
                <div class="theme-toggle__sun">
336
                    <svg class="theme-toggle__totem" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
337
                        <g class="totem-rays">
338
                            <path d="M50,35 Q55,28 50,21 T50,12" transform="rotate(0 50 50)" />
339
                            <path d="M50,35 Q55,28 50,21 T50,12" transform="rotate(45 50 50)" />
340
                            <path d="M50,35 Q55,28 50,21 T50,12" transform="rotate(90 50 50)" />
341
                            <path d="M50,35 Q55,28 50,21 T50,12" transform="rotate(135 50 50)" />
342
                            <path d="M50,35 Q55,28 50,21 T50,12" transform="rotate(180 50 50)" />
343
                            <path d="M50,35 Q55,28 50,21 T50,12" transform="rotate(225 50 50)" />
344
                            <path d="M50,35 Q55,28 50,21 T50,12" transform="rotate(270 50 50)" />
345
                            <path d="M50,35 Q55,28 50,21 T50,12" transform="rotate(315 50 50)" />
346
                        </g>
347
                    </svg>
348
                    <div class="theme-toggle__moon-mask">
349
                        <div class="theme-toggle__crater"></div>
350
                        <div class="theme-toggle__crater"></div>
351
                        <div class="theme-toggle__crater"></div>
352
                    </div>
353
                </div>
354
            </div>
355
        </div>
356
    </button>
357
</div>
358

359
<script>
360
    // Constants
361
    const LIGHT_MODE = "light";
362
    const DARK_MODE = "dark";
363
    const AUTO_MODE = "auto";
364
    const DEFAULT_THEME = AUTO_MODE;
365

366
    // State
367
    let mode = DEFAULT_THEME;
368
    let systemIsDark = false;
369
    let isHovered = false;
370
    let shouldBounce = false;
371

372
    // DOM Elements
373
    const toggleButton = document.getElementById('themeToggle');
374
    const container = toggleButton.querySelector('.theme-toggle__container');
375
    const sunWrapper = toggleButton.querySelector('.theme-toggle__sun-wrapper');
376

377
    // Initialization
378
    function init() {
379
        const storedTheme = localStorage.getItem("theme");
380
        mode = storedTheme || DEFAULT_THEME;
381

382
        const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
383
        systemIsDark = darkModePreference.matches;
384

385
        // Listen for system preference changes
386
        darkModePreference.addEventListener("change", (e) => {
387
            systemIsDark = e.matches;
388
            update();
389
        });
390

391
        // Event Listeners
392
        toggleButton.addEventListener('click', toggleScheme);
393
        toggleButton.addEventListener('mouseenter', () => {
394
            isHovered = true;
395
            shouldBounce = false;
396
            update();
397
        });
398
        toggleButton.addEventListener('mouseleave', () => {
399
            isHovered = false;
400
            shouldBounce = false;
401
            update();
402
        });
403

404
        update();
405
    }
406

407
    function isDark() {
408
        return mode === DARK_MODE || (mode === AUTO_MODE && systemIsDark);
409
    }
410

411
    function toggleScheme() {
412
        shouldBounce = true;
413
        if (mode === DARK_MODE) {
414
            mode = LIGHT_MODE;
415
        } else if (mode === LIGHT_MODE) {
416
            mode = DARK_MODE;
417
        } else {
418
            // Auto mode logic
419
            if (systemIsDark) {
420
                mode = LIGHT_MODE;
421
            } else {
422
                mode = DARK_MODE;
423
            }
424
        }
425

426
        localStorage.setItem("theme", mode);
427
        update();
428
    }
429

430
    function update() {
431
        const dark = isDark();
432

433
        // Update document theme (for body background demo)
434
        if (dark) {
435
            document.body.classList.add('dark');
436
        } else {
437
            document.body.classList.remove('dark');
438
        }
439

440
        // Update Container Classes
441
        if (dark) {
442
            container.classList.add('dark');
443
        } else {
444
            container.classList.remove('dark');
445
        }
446

447
        if (shouldBounce) {
448
            container.classList.add('bounce-enabled');
449
        } else {
450
            container.classList.remove('bounce-enabled');
451
        }
452

453
        // Update Toggle Button Classes
454
        if (!isHovered) {
455
            toggleButton.classList.add('collapsed');
456
        } else {
457
            toggleButton.classList.remove('collapsed');
458
        }
459

460
        // Update Sun Transform
461
        let transformValue;
462
        if (!isHovered) {
463
            transformValue = "translateX(0)";
464
        } else if (dark) {
465
            transformValue = "translateX(2.938em)";
466
        } else {
467
            transformValue = "translateX(0.187em)";
468
        }
469
        sunWrapper.style.transform = transformValue;
470
    }
471

472
    // Run init
473
    init();
474
</script>
475

476
</body>
477
</html>