Open TheCedarPrince opened 2 years ago
This is not necessary Franklin related, but if you use giscus
you can use the following snippet in a click event handler for your toggle for light / dark mode, to switch your comment's theme to light or dark mode as well.
const iframe = document.querySelector("iframe.giscus-frame");
iframe.contentWindow.postMessage({giscus: {setConfig: {theme: "dark"}}}, "https://giscus.app");
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:
_libs/darkmode
where you create the folderdarkmode
_layout
, openhead.html
and add the following snippet in the<head>
block (I suggest adding it after the CSS stylesheets):_css/franklin.css
file for styling but you could do something different: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.