Simple-Portfolio/portfolio.js at main · Aashutosh31/Simple-Portfolio · GitHub

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
// --- THEME TOGGLE LOGIC ---

// Select all theme toggle buttons and icons
const themeToggleButtons = document.querySelectorAll('#theme-toggle, #mobile-theme-toggle');
const lightIcons = document.querySelectorAll('#theme-icon-light, #mobile-theme-icon-light');
const darkIcons = document.querySelectorAll('#theme-icon-dark, #mobile-theme-icon-dark');
const htmlEl = document.documentElement; // Select the <html> element

// Function to toggle icon visibility
function updateIcons(isDarkMode) {
    lightIcons.forEach(icon => icon.classList.toggle('hidden', isDarkMode));
    darkIcons.forEach(icon => icon.classList.toggle('hidden', !isDarkMode));
}

// Function to switch theme
function switchTheme() {
    const isDarkMode = htmlEl.classList.toggle('dark');
    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
    updateIcons(isDarkMode);
}

// Add event listener to all theme toggle buttons
themeToggleButtons.forEach(btn => {
    btn.addEventListener('click', switchTheme);
});

// Check for saved theme preference on page load
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Set initial theme based on saved preference or system setting
if (savedTheme === 'dark' || (savedTheme === null && prefersDark)) {
    htmlEl.classList.add('dark');
    updateIcons(true);
} else {
    updateIcons(false);
}


// --- PROJECT BUTTONS LOGIC ---
// This part remains the same as your original file

let button1 = document.getElementsByClassName('btn-1')[0];
button1.addEventListener('click', () => {
    // I am using window.open to open the link in a new tab
    window.open('https://aashutosh31.github.io/rock-paper-scissors/', '_blank');
});

let button2 = document.getElementsByClassName('btn-2')[0];
button2.addEventListener('click', () => {
    window.open('https://aashutosh31.github.io/Calculator-Project/', '_blank');
});