script.js

//code to automatically write the footer and header - if more pages are created, this will be referenced throughout

document.querySelector(".writeHeader").innerHTML = `
        <div id="header">
            <a href="../index.html" style="text-decoration: none;"><h1>> my simple portfolio.<h1></a>
        </div>
`;

document.querySelector(".writeNavbar").innerHTML = `
    <div id="navbar">
        <p>| <a href="index.html">About</a> | <a href="projects.html">Programming</a> | <a href="writings.html">Writings</a> |</p>
    </div>
`;

document.querySelector(".writeFooter").innerHTML = `   
        <center>
            © 2026.
            <div class="theme-switch-wrapper" style="padding-top:5px;">
                <em>Theme Select:⠀</em>
                <select id="theme-select">
                    <option value="light">Light,</option>
                    <option value="dark">Dark,</option>
            </div>
        </center>
`;

//FOR THEME SELECTOR - to keep the theme for next time the user accesses the site

// scripts for storing the theme
const themeSelect = document.getElementById("theme-select");

// Apply theme on change
themeSelect.addEventListener("change", function () {
    const theme = this.value;
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("theme", theme);
});
// Load saved theme
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
    document.documentElement.setAttribute("data-theme", savedTheme);
    themeSelect.value = savedTheme;
}