bufferhead-code/nightowl

Add Dark Mode to your website semi-automatically.

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/[email protected]/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.

nightowl's Issues

Custom theme toggle button

How can we change the theme toggle button or use our custom button to toggle the theme? If there isn't any (can't be found in the documentation). I want to work on it and open a merge request as per the Contribution Guidelines.

Background image

If you have a background image, it will invert.

How can I invert Background Image color ?

Issue: On dark mode Background Image is turning Inverted , the main-container is in relative position but its background image is set using javascript , also used fallback image still its Dark mode implementation Inverts background Image Color .

Light Mode :

Dark Mode:

Live Link: https://weather.pranshubasak.co/
GitHub repo: https://github.com/PranshuBasak/weather-App-JS

Solution : Did not found solution yet but used it in my simple weather project , Hope some one can fix this issue , Or assign this to me so that I can give it a try.

Not working with npm install

Hello thanks you for providing this magical tool.

I used it in my project without npm (cdn) and works perfectly but with npm it's not working.

I have an error in the console

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Do you have some informations about that issue ?

Update doc

If I'm not mistaken, since the new features are using user set parameters, the ts script would need to be compiled to js for the import to work correctly (if no user parameter is set, no need to compile if the default settings are applied). A potential second solution would be to compile the different configs and let the user import only the mode he wants removing the need to recompile for the user. Correct me if I'm wrong.

Possibility to invert button (Show the mode that it will take you to if clicked)

If this is also something that you would be interested in i have a simple implementation :

The import :

<script type="module">
      window.buttonMode = "inverted";
      import "/src/main.ts";
    </script>

define global in window.d.ts :

interface Window {
  buttonMode: string;
}

Modify setSwitcherIcon:

switcher.innerHTML =
      window.buttonMode === "inverted"
        ? mode === DARK
          ? lightIcon
          : darkIcon
        : mode === DARK
        ? darkIcon
        : lightIcon;

Modify initializeSwitcher:

switcher.style.backgroundColor = window.buttonMode === "inverted" ? "black" : "white";
switcher.style.color = window.buttonMode === "inverted" ? "white" : "black";

I have the code ready for pull request if interested. cheers

Let the possibility to initialize in dark mode directly

It could be interesting to have the possibility to initialize the state of mode to DARK. I have a potential solution that's easy to imlpement and keeps the import a one liner while adding a .d.ts file to define a global, if interested in this feature :

The import :

<script type="module">
      window.defaultMode = "dark";
      import "/src/main.ts";
    </script>

The script modification :

let mode = window.defaultMode === "dark" ? DARK : LIGHT;

In a new window.d.ts file :

interface Window {
  defaultMode: string;
}

If this is somethign you want i can do a pull request ! (PS: the storage value will still overwrite this value if there is one in the user storage)

strange change in color

hi, i have a website and i wanted to integrate nightbowl to it to be able to add darkmode. Since i have to less time to actually change everything i found this tool very nice and helpful, however and this is my problem, the images I added to my website as background images so that i can add cool effects now look like they are just turned 180deg with changing the hue which as i said looks terrible. I did some troubleshooting and found out that if i just add the image normally with <i.mg src=....> instead of with class and then saying .bgimg-1 {
background-image: url(pics/environment.png);
min-height: 100%;
}
that the img does everything fine, so its not about the image.

and i just saw that my navbar that was fixed after scrolling down. now its not there, why could that be?

what can i do? and thanks for your time

Update Demo Page to Include More Use Cases

I think demo page should have more features so potential users can see what Nightowl can do in a real-world scenario.
It should also address some of the issues it currently has like box-shadow and position: fixed to name a few, so when they're fixed, it would be perceived in the demo page.

I currently did some work on my forked branch and it's 80% done.
If it's OK, I'll want to make a pull request when it's complete.

Ability to change theme button position

It would be nice if once could change the position of the theme button to other corners.

It can help in not blocking the navbar.

It can serve as a temporary solution until we find a way to create a custom theme button.

Not working with position fixed.

I tried it. It kind of works until I noticed children elements with position : fixed acting as position : relative. Which breaks the site.

I found that this scripts uses filter property. But is there anything can be done to fixed this issue?

But otherway nice tool.

Changing the position of the toggle button

How can we able to change the position of that toggle button?

How to use it? I installed and added script tag to index.html and nothing seems to happen

I ran npm install @bufferhead/nightowl and included <script type="module" src="./node_modules/@bufferhead/nightowl/dist/nightowl.js"></script> in my react project, but nothing's changed afterwards. There is no overlay button to activate night mode. What am I missing?