├── README.md
├── style.css
├── script.js
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # Light/Dark Theme Toggle with JavaScript
2 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 0%;
3 | padding: 0%;
4 | font-family: "Arial", Helvetica, sans-serif;
5 | }
6 | i{
7 | font-size: 150px;
8 | cursor: pointer;
9 | position: absolute;
10 | top: 50%;
11 | left: 50%;
12 | transform: translate(-50%, -50%);
13 | }
14 | h1{
15 | text-align: center;
16 | font-size: 3em;
17 | }
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const toggle = document.getElementById('toggleDark');
2 | const body = document.querySelector('body');
3 |
4 | toggle.addEventListener('click', function(){
5 | this.classList.toggle('bi-moon');
6 | if(this.classList.toggle('bi-brightness-high-fill')){
7 | body.style.background = 'white';
8 | body.style.color = 'black';
9 | body.style.transition = '2s';
10 | }else{
11 | body.style.background = 'black';
12 | body.style.color = 'white';
13 | body.style.transition = '2s';
14 | }
15 | });
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | JavaScript Toggle Dark Mode
8 |
9 |
10 |
11 |
12 |
13 | JavaScript Toggle Dark Mode
14 |
15 |
16 |
--------------------------------------------------------------------------------