-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
44 lines (38 loc) · 1.49 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
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');
let toggleKey = false;
let mode = [];
// Toggle Mode Styles
function toggleMode () {
toggleKey = !toggleKey;
if (toggleKey) {
mode = ['dark', 'rgb(0 0 0 / 50%)', 'rgb(255 255 255 / 50%)', 'fa-sun', 'fa-moon'];
} else {
mode = ['light', 'rgb(255 255 255 / 50%)', 'rgb(0 0 0 / 50%)', 'fa-moon', 'fa-sun',];
}
document.documentElement.setAttribute('data-theme', mode[0]);
localStorage.setItem('theme', mode[0]);
nav.style.backgroundColor = mode[1];
textBox.style.backgroundColor = mode[2];
toggleIcon.children[0].textContent = mode[0] + ' Mode';
toggleIcon.children[1].classList.replace(mode[3], mode[4]);
image1.src = `img/undraw_proud_coder_${mode[0]}.svg`;
image2.src = `img/undraw_feeling_proud_${mode[0]}.svg`;
image3.src = `img/undraw_conceptual_idea_${mode[0]}.svg`;
}
// Event Listener
toggleSwitch.addEventListener('change', toggleMode);
// Check Local Storage For Theme
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
toggleMode();
}
}