├── README.md ├── cloud_1.svg ├── cloud_2.svg ├── cloud_3.svg ├── cloud_4.svg ├── index.html ├── preview.gif ├── stars.svg └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Dark-Light-Mode-Switch 2 | ## [Watch it on youtube](https://youtu.be/xyrrKj4mJSo) 3 | ### How to Create a Dark/Light Mode Switch using HTML and CSS 4 | 5 | 💙 Join the channel to see more videos like this. [Open Source Coding](https://www.youtube.com/@opensourcecoding) 6 | 7 | ![preview img](/preview.gif) 8 | -------------------------------------------------------------------------------- /cloud_1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /cloud_2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /cloud_3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /cloud_4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dark/Light Mode Switch 8 | 9 | 10 | 24 | 25 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Dark-Light-Mode-Switch/1b60be4dbbd6e2e513d746c8e3e4412d23f1eff2/preview.gif -------------------------------------------------------------------------------- /stars.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-color: #cde7ff; 3 | --switch-width: 150px; 4 | --switch-height: 65px; 5 | --switch-round: 50px; 6 | --switch-padding-x: 5px; 7 | --switch-bg: linear-gradient(to bottom, #73bbff, #a2d1fd); 8 | --switch-dark-bg: linear-gradient(to top, #2b3347, #181d27); 9 | --border-width: 2px; 10 | --border-gradient: linear-gradient(to bottom, #a2d1fd, #cde7ff); 11 | --border-dark-gradient: linear-gradient(to bottom, #000000, #6c7384); 12 | --sunmoon-size: 55px; 13 | --transition: all 0.5s ease; 14 | } 15 | 16 | * { 17 | margin: 0; 18 | padding: 0; 19 | box-sizing: border-box; 20 | user-select: none; 21 | } 22 | 23 | body { 24 | min-height: 100vh; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | background-color: var(--bg-color); 29 | transition: background-color 0.5s ease; 30 | } 31 | 32 | body.dark { 33 | --bg-color: #535c72; 34 | } 35 | 36 | .switch { 37 | position: relative; 38 | display: flex; 39 | align-items: center; 40 | justify-content: center; 41 | width: var(--switch-width); 42 | height: var(--switch-height); 43 | border-radius: var(--switch-round); 44 | cursor: pointer; 45 | transition: var(--transition); 46 | background: var(--switch-bg); 47 | } 48 | 49 | .switch::before { 50 | content: ''; 51 | position: absolute; 52 | width: 100%; 53 | height: 100%; 54 | border-radius: var(--switch-round); 55 | opacity: 0; 56 | background: var(--switch-dark-bg); 57 | transition: var(--transition); 58 | } 59 | 60 | body.dark .switch::before { 61 | opacity: 1; 62 | } 63 | 64 | .switch .border { 65 | position: absolute; 66 | top: calc(var(--border-width) * -1); 67 | left: calc(var(--border-width) * -1); 68 | width: calc(100% + var(--border-width) * 2); 69 | height: calc(100% + var(--border-width) * 2); 70 | border-radius: var(--switch-round); 71 | background: var(--border-gradient); 72 | z-index: -1; 73 | transition: var(--transition); 74 | } 75 | 76 | .switch .border::after { 77 | content: ''; 78 | position: absolute; 79 | top: 0; 80 | left: 0; 81 | width: 100%; 82 | height: 100%; 83 | border-radius: var(--switch-round); 84 | background: var(--border-dark-gradient); 85 | opacity: 0; 86 | transition: var(--transition); 87 | } 88 | 89 | body.dark .switch .border::after { 90 | opacity: 1; 91 | } 92 | 93 | .switch input { 94 | display: none; 95 | } 96 | 97 | .sunmoon { 98 | position: absolute; 99 | width: var(--sunmoon-size); 100 | height: var(--sunmoon-size); 101 | border-radius: 50%; 102 | transition: var(--transition); 103 | left: var(--switch-padding-x); 104 | z-index: 1; 105 | background-color: #FFC187; 106 | box-shadow: 0px 0px 11.7px 0px #FFC187, 0px 0px 20px 0px #ffc18768, -2px -2px 5px 0px #ffab5c inset; 107 | } 108 | 109 | body.dark .sunmoon { 110 | left: calc(100% - var(--sunmoon-size) - var(--switch-padding-x)); 111 | background-color: #dee5f3; 112 | box-shadow: 0px 0px 51.7px 0px #dee5f3; 113 | } 114 | 115 | .darkside { 116 | position: absolute; 117 | top: 2px; 118 | left: 2px; 119 | width: 75%; 120 | height: 75%; 121 | border-radius: 50%; 122 | background-color: #FFC187; 123 | transition: var(--transition); 124 | } 125 | 126 | body.dark .darkside { 127 | background-color: #565c6b; 128 | } 129 | 130 | .clouds { 131 | border-radius: var(--switch-round); 132 | position: relative; 133 | height: 100%; 134 | width: 100%; 135 | overflow: hidden; 136 | } 137 | 138 | .cloud { 139 | position: absolute; 140 | width: 60%; 141 | transition: var(--transition); 142 | } 143 | 144 | .cloud-1 { 145 | bottom: -55%; 146 | left: 0; 147 | } 148 | 149 | .cloud-2 { 150 | bottom: -45%; 151 | left: 25px; 152 | } 153 | 154 | .cloud-3 { 155 | bottom: -40%; 156 | right: 0px; 157 | } 158 | 159 | .cloud-4 { 160 | bottom: -16%; 161 | right: -25px; 162 | } 163 | 164 | 165 | body.dark .cloud-1 { 166 | bottom: -35%; 167 | left: -110px; 168 | } 169 | 170 | body.dark .cloud-2 { 171 | bottom: -15%; 172 | left: -110px; 173 | transition: all 0.7s ease; 174 | } 175 | 176 | body.dark .cloud-3 { 177 | bottom: -15%; 178 | right: -110px; 179 | } 180 | 181 | body.dark .cloud-4 { 182 | bottom: -5%; 183 | right: -110px; 184 | transition: all 0.7s ease; 185 | } 186 | 187 | .stars { 188 | position: absolute; 189 | top: 150%; 190 | left: 0; 191 | transform: translateY(-50%); 192 | pointer-events: none; 193 | transition: var(--transition); 194 | } 195 | 196 | body.dark .stars { 197 | top: 50%; 198 | } --------------------------------------------------------------------------------