Fix: theme switcher initialization logic

[aeren23]

Description:

This pull request refines the theme switcher initialization functionality in the project. The changes include improvements to the visual styling and enhancements to the event handling logic for better user interaction. Additionally, the switcher’s behavior has been optimized to dynamically adjust based on the window's width, ensuring better responsiveness.

Changes:

• Improved the CSS styling of the theme switcher button.
• Optimized event listener for mode toggling.
• Added logic to dynamically adjust the switcher's appearance based on screen size.
• Fixed minor issues with the default state of the switcher.

function initializeSwitcher() {
    const container = document.getElementById("themeContainer"); // Target div
    if (!container) return;

    const switcher = document.createElement('div')
    console.log(window.innerWidth)
    switcher.id = 'nightowl-switcher-default'
    switcher.style.width = "50px"
    switcher.style.height = "50px"
    switcher.style.borderRadius = "50%"
    switcher.style.backgroundColor = toggleButtonMode === "newState" ? "black" : "white"
    switcher.style.display = "flex"
    switcher.style.justifyContent = "center"
    switcher.style.alignItems = "center"
    switcher.style.cursor = "pointer"
    switcher.style.boxShadow = "0 0 10px rgba(0,0,0,0.2)"
    switcher.style.transition = "all 0.3s ease-in-out"
    switcher.style.overflow = "hidden";
    switcher.style.zIndex = '9999'
    switcher.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)'
    switcher.style.transition = 'all 0.3s ease-in-out'
    switcher.style.overflow = 'hidden'
    switcher.style.color = toggleButtonMode === 'newState' ? 'white' : 'black'

    switcher.addEventListener('click', () => {
        toggleMode()
        storeModeInLocalStorage()
    })

    container.appendChild(switcher)
    setSwitcherIcon()
}

I have updated this code section. If you want to use that on your website add this html tag where you want to use

<div id="themeContainer"></div>

If you want to make any change about style you can fix the ts function how you want.