search

bufferhead-code / nightowl

Add Dark Mode to your website semi-automatically.
198 stars 16 forks source link

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

Closed LucGzy closed 10 months ago

LucGzy commented 11 months ago

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

LucGzy commented 11 months ago

https://github.com/bufferhead-code/nightowl/pull/6 related pull request

bufferhead-code commented 10 months ago

Added with #7