Nightowl

A "micro-framework" (*hacky script) that adds dark mode to any website with a single line of code.

You can learn more about how it works and how i made it here

State of this project

This project is still in an prototyping stage, the API is still subject to change. Please only use it with fixed Minor versions.

Known issues

• Position absolute and position fixed elements might not work as expected
• The Toggle Button Overlay has weird paddings sometimes

Roadmap (maybe)

[] Add more utility classes for improving contrast [] Add better support for box-shadows

Integration

Integration can be achieved by adding one of the following script tag to your website.

Using a CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/@bufferhead/[email protected]/dist/nightowl.js"></script>

Install via npm:

• First install Nightowl in your project using npm

npm install @bufferhead/nightowl

• Then add this tag to your index:

<script type="module">
    import {createNightowl} from '@bufferhead/nightowl'

    createNightowl({
        defaultMode: 'dark',
        toggleButtonMode: 'newState'
    })

</script>

configuration Options

• defaultMode: 'dark' | 'light' (Default: 'light')
  • Sets the default mode for users that have not set a preference yet and do not have a system preference for dark mode
• toggleButtonMode: 'newState' | 'currentState' (Default: 'currentState')
  • Configures what state of the toggle button should be shown to the user
    • 'newState' will show the state that will be applied when the user clicks the button
    • 'currentState' will show the state that is currently applied to the website

Credits

This project is heavily inspired by Aral Balkan who wrote down this idea to implement dark mode in a few lines of CSS using CSS Filters.