Note

Check out solidtime - The modern Open Source Time-Tracker at solidtime.io

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 the Project

This project is still in a prototyping stage, and the API is still subject to change. Please only use it with a fixed minor version.

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 to improve contrast.
• Add better support for box-shadow.

Integration

Integration can be achieved by one of the following methods.

CDN

Add these lines to your HTML file:

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

npm

To use nightowl with a bundler like Vite first install it with this command:

npm install @bufferhead/nightowl

Then add these lines to your HTML file:

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

    createNightowl({
        defaultMode: 'dark',
        toggleButtonMode: 'newState'
    })
</script>

Configuration Options

defaultMode

• Type: 'light' | 'dark'
• 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

• Type: 'currentState' | 'newState'
• Default: 'currentState'

Configures what state of the toggle button should be shown to the user.

• currentState - Shows the state that is currently applied to the website.
• newState - Shows the state that will be applied when the user clicks the button.

Customize Dark Mode

You can exclude elements from being inverted in dark mode using the .nightowl-daylight CSS class. Just add it to an element and it will show the element in the same way as the light mode.

<div>
  <p>I'm inverted in Dark Mode</p>
  <p class="nightowl-daylight">I'm not inverted in Dark Mode</p>
</div>

Contribution Guidelines

Please open an issue and wait for one of the Maintainers to approve it until you open a merge request.

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.