-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
55 lines (52 loc) · 1.87 KB
/
script.js
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
49
50
51
52
53
54
55
const toggleSwitch = document.querySelector('input[type="checkbox"]');
const nav = document.getElementById('nav');
const toggleIcon = document.getElementById('toggle-icon');
const image1 = document.getElementById('image1');
const image2 = document.getElementById('image2');
const image3 = document.getElementById('image3');
const textBox = document.getElementById('text-box');
// Dark or Light image
function imageMode(color){
image1.src = `undraw_proud_coder_${color}.svg`;
image2.src = `undraw_feeling_proud_${color}.svg`;
image3.src = `undraw_conceptual_idea_${color}.svg`;
}
// Dark Mode Function
function darkMode(){
nav.style.backgroundColor = 'rgb(0 0 0 /50%)';
textBox.style.backgroundColor = 'rgb(255 255 255 /50%)';
toggleIcon.children[0].textContent = 'Dark Mode';
toggleIcon.children[1].classList.replace('fa-sun','fa-moon');
imageMode('dark');
}
// Light Mode Function
function lightMode(){
nav.style.backgroundColor = 'rgb(255 255 255 /50%)';
textBox.style.backgroundColor = 'rgb(0 0 0 / 50%)';
toggleIcon.children[0].textContent = 'Light Mode';
toggleIcon.children[1].classList.replace('fa-moon','fa-sun');
imageMode('light');
}
// Switch Theme Dynamically
function switchTheme(event){
if(event.target.checked){
document.documentElement.setAttribute('data-theme','dark');
localStorage.setItem('theme','dark');
darkMode();
}else{
document.documentElement.setAttribute('data-theme','light');
localStorage.setItem('theme','light');
lightMode();
}
}
// Event Listener
toggleSwitch.addEventListener('change',switchTheme);
// Check LocalStorage for theme
const currentTheme = localStorage.getItem('theme');
if(currentTheme){
document.documentElement.setAttribute('data-theme',currentTheme);
if(currentTheme === 'dark'){
toggleSwitch.checked = true;
darkMode();
}
}