├── README.md
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # HTNL-CSS-JS-Dark-Mode-Toggle
2 |
3 |
4 |
5 | https://user-images.githubusercontent.com/42389395/184534247-deb3ac0a-953b-43d6-a777-a907cb71e5d2.mov
6 |
7 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Test
7 |
8 |
9 |
10 |
11 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 |
2 | const html = document.querySelector('html')
3 | const check = document.querySelector('#checkbox')
4 |
5 | check.addEventListener('change', function(){
6 | html.classList.toggle('dark')
7 | })
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --background: #f2eee3;
3 | --check: #000;
4 | --ball: #f2eee3;
5 | }
6 |
7 | .dark {
8 | --background: #000;
9 | --check: #f2eee3;
10 | --ball: #000;
11 | }
12 |
13 | * {
14 | margin: 0;
15 | padding: 0;
16 | box-sizing: border-box;
17 | }
18 |
19 | .dark-mode {
20 | display: flex;
21 | width: 100%;
22 | height: 100vh;
23 | justify-content: center;
24 | align-items: center;
25 | background: var(--background);
26 | transition: .5s;
27 | }
28 |
29 | .checkbox:checked+.label .ball {
30 | transform: translateX(24px);
31 | }
32 |
33 | .checkbox {
34 | opacity: 0;
35 | position: absolute;
36 | }
37 |
38 | .label {
39 | width: 50px;
40 | height: 26px;
41 | background: var(--check);
42 | border-radius: 50px;
43 | padding: 5px;
44 | position: relative;
45 | }
46 |
47 | .ball {
48 | position: absolute;
49 | top: 2px;
50 | left: 2px;
51 | width: 22px;
52 | height: 22px;
53 | background: var(--ball);
54 | border-radius: 50%;
55 | transition: transform 0.2s linear;
56 | }
57 |
--------------------------------------------------------------------------------