/nightowl

Add Dark Mode to your website semi-automatically.

Primary LanguageTypeScript

image

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

Youtube Video about how this project was made

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.

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

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.