const container = document.querySelector('#colorBtnContainer');
const themeToggler = container.querySelector('.switch input');
const background = document.querySelector('aside > #gradient');
const btn = document.querySelector('#webRing > a:first-child > img');

export function themeSwitcher(){
    container.style.visibility = 'visible';
    console.log('selected btn:', btn);
    themeToggler.addEventListener('change', (event) => {
        if (event.target.checked){
            document.documentElement.setAttribute('data-theme', 'light');
            background.style.filter = 'invert(1) saturate(333%) brightness(93%) hue-rotate(90deg)';
            btn.style.filter = 'invert(1) saturate(93%) brightness(233%) hue-rotate(90deg)';
        }else{
           document.documentElement.setAttribute('data-theme', 'dark');
           background.style.filter = 'unset';
             btn.style.filter = 'unset';
        }
    })
}