Invert button functionality (#7)

* Added possibility to define the starting mode

using window.defaultMode = "dark" or window.defaultMode = "light" , I have prettier installed so it formatted a lot of code but I didn't change anything else than what I mentioned in the related issue #3 also it installed version 0.0.12 so package-lock.json changed, locally stored value will ALWAYS overwrite this value so this is mostly for first visits. If left empty the default behavior apply (aka system pref)

* Removed dark from window.defaultMode

forgot to remove it before commit my bad

* Added possibility to invert button

using window.buttonMode = "inverted"; the button will now display the mode it will toggle on when clicked (aka when in lightmode the button will be black indicating it switches you to black mode) if left empty, default behavior

* Removed unrelated parts of the code

sorry kinda new to contributing, realised I commited the other function (set-mode) to this branch as well, removed it so that the only changes on this branch are the button inverted function if I'm not mistaken

* Merged back to main + run format and lint

First time merging branches, I think everything is fine you might want to check but it runs as intended on my machine

* change api to use the NightowlOptions via createNightowl

---------

Co-authored-by: Bufferhead (Gregor Vostrak) <hello@bufferhead.com>

Author: LucGzy

README.md

@@ -27,26 +27,43 @@ Please only use it with fixed Minor versions.
 
 Integration can be achieved by adding one of the following script tag to your website.
 
-Using a CDN :
+Using a CDN:
 
 ```
 <script type="module" src="https://cdn.jsdelivr.net/npm/@bufferhead/nightowl@0.0.12/dist/nightowl.js"></script>
 ```
 
-Using a local install :
+Install via npm:
 
--First install Nightowl in your project using npm
+-   First install Nightowl in your project using npm
 
 ```
 npm install @bufferhead/nightowl
 ```
 
--Then add this <script> tag to your index:
+-   Then add this <script> tag to your index:
 
 ```
-<script type="module" src="./node_modules/@bufferhead/nightowl/dist/nightowl.js"></script>
+<script type="module">
+    import {createNightowl} from '/src/main.ts'
+
+    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](https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/).

index.html

@@ -6,12 +6,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Vite + TS</title>
         <script type="module">
-            import {createNightowl} from '/src/main.ts'
+            import { createNightowl } from '/src/main.ts'
 
             createNightowl({
-                defaultMode: 'dark'
+                defaultMode: 'dark',
+                toggleButtonMode: 'newState'
             })
-
         </script>
         <style>
             * {

src/main.ts

@@ -5,9 +5,10 @@ let store: Storage | null = null
 const persistPreference = true
 let mode = LIGHT
 let automaticInitialization = true
-
+let toggleButtonMode = 'currentState'
 interface NightowlOptions {
     defaultMode?: 'light' | 'dark'
+    toggleButtonMode?: 'currentState' | 'newState'
 }
 
 try {
@@ -58,17 +59,19 @@ function loadCss() {
     document.head.appendChild(css)
 }
 
-export function createNightowl (options: NightowlOptions) {
+export function createNightowl(options: NightowlOptions) {
     automaticInitialization = false
     if (options.defaultMode === 'dark') {
         mode = DARK
     }
-    if(document.readyState === 'complete'){
+    if (options.toggleButtonMode) {
+        toggleButtonMode = options.toggleButtonMode
+    }
+    if (document.readyState === 'complete') {
         loadCss()
         initializeNightowl()
         initializeSwitcher()
-    }
-    else {
+    } else {
         window.addEventListener('load', () => {
             loadCss()
             initializeNightowl()
@@ -85,7 +88,6 @@ window.addEventListener('load', () => {
     }
 })
 
-
 function enableDarkMode() {
     mode = DARK
     const htmlElement = document.querySelector('html')
@@ -130,7 +132,11 @@ function setSwitcherIcon() {
             '  <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />\n' +
             '</svg>'
 
-        switcher.innerHTML = mode === DARK ? darkIcon : lightIcon
+        if (toggleButtonMode === 'newState') {
+            switcher.innerHTML = mode === DARK ? lightIcon : darkIcon
+        } else if (toggleButtonMode === 'currentState') {
+            switcher.innerHTML = mode === DARK ? darkIcon : lightIcon
+        }
     }
 }
 
@@ -144,7 +150,8 @@ function initializeSwitcher() {
     switcher.style.width = '50px'
     switcher.style.height = '50px'
     switcher.style.borderRadius = '50%'
-    switcher.style.backgroundColor = 'white'
+    switcher.style.backgroundColor =
+        toggleButtonMode === 'newState' ? 'black' : 'white'
     switcher.style.display = 'flex'
     switcher.style.justifyContent = 'center'
     switcher.style.alignItems = 'center'
@@ -153,7 +160,7 @@ function initializeSwitcher() {
     switcher.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)'
     switcher.style.transition = 'all 0.3s ease-in-out'
     switcher.style.overflow = 'hidden'
-    switcher.style.color = 'black'
+    switcher.style.color = toggleButtonMode === 'newState' ? 'white' : 'black'
 
     switcher.addEventListener('click', () => {
         toggleMode()
@@ -209,8 +216,8 @@ function storeModeInLocalStorage() {
 
 function hasNativeDarkPrefersColorScheme() {
     return (
-        (window.matchMedia &&
-            (window.matchMedia('(prefers-color-scheme: dark)').matches ||
-                window.matchMedia('(prefers-color-scheme:dark)').matches))
+        window.matchMedia &&
+        (window.matchMedia('(prefers-color-scheme: dark)').matches ||
+            window.matchMedia('(prefers-color-scheme:dark)').matches)
     )
 }