Adding Dark Mode to Your Franklin Website!

After some tinkering and help from @fredrikekre and @kdheepak, I am pleased to say I have found a way to bring darkmode to Franklin templates! This details how to add darkmode.js to a Franklin website which should "just work :tm:" with Franklin's templates:

Visit https://darkmodejs.learn.uno/ and install the minified package lib there
In your Franklin website directory, add the minified library to _libs/darkmode where you create the folder darkmode
In _layout, open head.html and add the following snippet in the <head> block (I suggest adding it after the CSS stylesheets):

    <script src="/libs/darkmode/darkmode-js.min.js"></script>
    <script>
        function addDarkmodeWidget()
        {
            const options = {
                bottom: '32px', /* default: '32px' */
                right: '32px', /* default: '32px' */
                left: 'unset', /* default: 'unset' */
                time: '.0s', /* default: '0.3s' */
                mixColor: '#fff', /* default: '#fff' */
                backgroundColor: '#fff', /* default: '#fff' */
                buttonColorDark: '#100f2c', /* default: '#100f2c' */
                buttonColorLight: '#fff', /* default: '#fff' */
                saveInCookies: true, /* default: true, */
                label: '🌓', /* default: '' */
                autoMatchOsTheme: true /* default: true */
            };
            new Darkmode(options).showWidget();
        };
        window.addEventListener('DOMContentLoaded', addDarkmodeWidget);
    </script>

You will need to most likely style darkmode for your site - this is what I added to my _css/franklin.css file for styling but you could do something different:

/* ==================================================================
    DARKMODE STYLING
================================================================== */

.darkmode--activated p,
.darkmode--activated h1,
.darkmode--activated h2,
.darkmode--activated h3,
.darkmode--activated h4,
.darkmode--activated h5,
.darkmode--activated span,
.darkmode--activated li,
.darkmode--activated ol {
    color: #ECEFF4;
}

.darkmode--activated blockquote {
    background-color: #2E3440;
}

.darkmode--activated ul {
    background-color: #2E3440;
}

.darkmode--activated a {
    color: #81A1C1
}

.darkmode-toggle {
    z-index: 500;
}

And once you are done, you should now have darkmode enabled for your website with a nice floating widget that you can click and reposition anywhere! Here are some screenshots of my site:

I hope this helps with adding Darkmode to your website!

~ tcp :deciduous_tree:

P.S. Also, you for the script to work on your site, you may have to set optimize(minify = false) in your .github/workflows/deploy.yml file.

tlienart / Franklin.jl

Adding Dark Mode to Your Franklin Website! #958