Making a Lazy Dark Theme with Darkreader
I have been using the Dark Reader plugin in firefox for quite some time now and I quite like it. However, there is one drawback - it has made me procrastinate building a dark theme for my blog. As it turns out, exporting and using the Dark Reader generated theme for your website is pretty damn easy.
Frist you need the plugin installed in your browser, you can get it from the Firefox Add-ons page here
Next You have to switch darkreader to the "new design" (the old design looks more modern IMHO) from the dev tools popup in order to access the export button found in the settings dialogue.
- Click Dark Reader icon.
- Click Dev tools (in the bottom-right corner).
- Click Preview new design.
- Click on settings in the popup
- Click on Manage Settings
- Click on Export Dynamic Theme
Source: Question: Export CSS?
Once you have the css, oen it up in an editor and wrap it in the css media rule for the dark perferd color scheme. Then it's a simple matter of adding it to your webpage as you would any other css file, boom a dark theme for your website with little to no effort.
@media (prefers-color-scheme: dark) { /* _______ / \ .==. .==. (( ))==(( )) / "==" "=="\ /____|| || ||___\ ________ ____ ________ ___ ___ | ___ \ / \ | ___ \ | | / / | | \ \ / /\ \ | | \ \| |_/ / | | ) / /__\ \ | |__/ /| ___ \ | |__/ / ______ \| ____ \| | \ \ ___|_______/__/ ____ \__\__|___\__\__|___\__\_______ | ___ \ | ____/ / \ | ___ \ | ____| ___ \ | | \ \| |___ / /\ \ | | \ \| |___| | \ \ | |__/ /| ____/ /__\ \ | | ) | ____| |__/ / | ____ \| |__/ ______ \| |__/ /| |___| ____ \ |__| \__\____/__/ \__\_______/ |______|__| \__\ https://darkreader.org */ /*! Dark reader generated CSS | Licensed under MIT https://github.com/darkreader/darkreader/blob/main/LICENSE */ [...] }