Hey I have a dark theme, and more than that even!

I just added a theme switcher to my site and it includes a night and clear modes!
Posted on 17 Mar 2020 by Mr. Ree in tech

I just added a theme switcher with a night mode to my website. Check it out in the menu bar ^^^^.

To get started, I used the getCookie and setCookie functions provided by w3c. You can get those, and learn more about cookies in javascript here. The switchTheme() function should NEVER take user supplied arguments such as those provided in GET query params as this script is not cross-site-scripting aware. This however doesn't make it vulnerable outside of social engineering and other programming mistakes.
switchTheme() sets a cookie, which is read when the document is ready. This uses jquery to determine when the document as ready, as well as for swapping out the attributes of the #theme html object.

        
        function switchTheme(theme) {
            $('#theme').attr('href', '/static/css/' + theme + '.css');
            setCookie('theme', theme, 14);
        }
        
        $(document).ready(function(){
            if(getCookie('theme'))
            {
                switchTheme(getCookie('theme'));
            }
        });
    

For the actual theming of my website I decided to use SASS so that I could write a single master stylesheet, then copy over variables to the actual css output.
For an example of SASS check out my pure SASS project for the image boards.