Repository Public
1<!--2 ============================================================3 SVGarden — https://www.svgarden.dev4 Author : Simon-Pierre Boucher5 Contact: contact@spboucher.ai6 File : snippets/interactive/toggle-day-night.html7 Desc : Sun ⇄ moon scene toggle driven by a hidden checkbox — zero JS8 ============================================================9-->10<!--svgarden11title: Day / night toggle12slug: toggle-day-night13category: interactive14tags: [interactive, toggle, checkbox, scene, dark-mode]15difficulty: advanced16techniques: [":checked", sibling-combinator, svg-scene, transition-delay, ":focus-visible"]17how_it_works: >18 The single source of truth is a native <input type="checkbox"> — no script,19 no data attributes. The label wraps the whole SVG scene, so clicking anywhere20 on the pill (or pressing Space while the hidden checkbox is focused) flips21 the state, and CSS observes it with the :checked pseudo-class plus the22 sibling combinator to sink the sun below the horizon, raise the moon, and23 crossfade the sky rect's fill. The stars share one transition but get a24 staggered transition-delay, so they only twinkle in after the sky has25 darkened. Because state lives in a real form control, keyboard support and26 the :focus-visible ring come for free.27customizable:28 - { var: "--sg-day", label: "Day sky", type: color, default: "#8ECDF2" }29 - { var: "--sg-night", label: "Night sky", type: color, default: "#2B3060" }30 - { var: "--sg-size", label: "Size", type: range, min: 90, max: 260, default: 150, unit: px }31 - { var: "--sg-duration", label: "Speed", type: range, min: 0.2, max: 2, step: 0.1, default: 0.6, unit: s }32created: 2026-08-1033-->34<div class="sg-toggle-day-night" style="--sg-day:#8ECDF2; --sg-night:#2B3060; --sg-size:150px; --sg-duration:0.6s;">35 <input type="checkbox" id="sg-toggle-day-night-cb" class="sg-toggle-day-night-cb" />36 <label for="sg-toggle-day-night-cb" class="sg-toggle-day-night-pill" aria-label="Switch between day and night">37 <svg viewBox="0 0 120 60" aria-hidden="true" focusable="false">38 <rect class="sg-toggle-day-night-sky" x="0" y="0" width="120" height="60" rx="30" />39 <g class="sg-toggle-day-night-stars">40 <circle cx="34" cy="18" r="1.6" />41 <circle cx="52" cy="36" r="1.1" />42 <circle cx="68" cy="14" r="1.4" />43 <circle cx="84" cy="30" r="1.2" />44 </g>45 <g class="sg-toggle-day-night-sun">46 <circle cx="30" cy="30" r="13" />47 <line x1="30" y1="9" x2="30" y2="13" />48 <line x1="30" y1="47" x2="30" y2="51" />49 <line x1="9" y1="30" x2="13" y2="30" />50 <line x1="47" y1="30" x2="51" y2="30" />51 </g>52 <g class="sg-toggle-day-night-moon">53 <circle cx="90" cy="30" r="12" />54 <circle class="sg-toggle-day-night-crater" cx="86" cy="26" r="2.6" />55 <circle class="sg-toggle-day-night-crater" cx="94" cy="33" r="1.8" />56 </g>57 </svg>58 </label>59</div>60<style>61 .sg-toggle-day-night {62 width: var(--sg-size);63 display: inline-block;64 }65 .sg-toggle-day-night-cb {66 position: absolute;67 opacity: 0;68 width: 1px;69 height: 1px;70 }71 .sg-toggle-day-night-pill {72 display: block;73 cursor: pointer;74 border-radius: 999px;75 }76 .sg-toggle-day-night-pill svg {77 display: block;78 width: 100%;79 border-radius: 999px;80 }81 .sg-toggle-day-night-sky {82 fill: var(--sg-day);83 transition: fill var(--sg-duration) ease;84 }85 .sg-toggle-day-night-sun,86 .sg-toggle-day-night-moon {87 transition: transform var(--sg-duration) cubic-bezier(0.4, 0, 0.2, 1.2);88 }89 .sg-toggle-day-night-sun circle { fill: #f6c945; }90 .sg-toggle-day-night-sun line {91 stroke: #f6c945;92 stroke-width: 2.5;93 stroke-linecap: round;94 }95 .sg-toggle-day-night-moon { transform: translateY(42px); }96 .sg-toggle-day-night-moon circle { fill: #e8ecf6; }97 .sg-toggle-day-night-moon .sg-toggle-day-night-crater { fill: rgba(90, 100, 140, 0.35); }98 .sg-toggle-day-night-stars circle {99 fill: #ffffff;100 opacity: 0;101 transition: opacity calc(var(--sg-duration) * 0.6) ease;102 }103 .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-sky { fill: var(--sg-night); }104 .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-sun { transform: translateY(42px); }105 .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-moon { transform: translateY(0); }106 .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-stars circle { opacity: 1; }107 .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-stars circle:nth-of-type(2) { transition-delay: calc(var(--sg-duration) * 0.3); }108 .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-stars circle:nth-of-type(3) { transition-delay: calc(var(--sg-duration) * 0.5); }109 .sg-toggle-day-night-cb:checked ~ .sg-toggle-day-night-pill .sg-toggle-day-night-stars circle:nth-of-type(4) { transition-delay: calc(var(--sg-duration) * 0.7); }110 .sg-toggle-day-night-cb:focus-visible ~ .sg-toggle-day-night-pill {111 outline: 2px solid var(--sg-day);112 outline-offset: 3px;113 }114</style>115