Auto Dark Mode

Auto-dark-mode is a package to apply dark mode in any design. with just one line of code. Also give fully control to change the theme, posision and more.

Installing auto-dark-mode

To install auto-dark-mode, just run:

npm i auto-dark-mode

Or use it via cdn

<script src="https://unpkg.com/auto-dark-mode@latest"></script>
<script>
document.addEventListener('DOMContentLoaded', e => {
    new AutoDarkMode()
})
</script>

Documentation of auto-dark-mode

Basic Usage

import AutoDarkMode from 'auto-dark-mode';

new AutoDarkMode();

Advanced Usage

Add New Theme

// Create the temee class
class NEW_THEME {
  // any unique id
  defaultId = 'auto-dark-mode';
  // where you like to appear
  defaultPosition =  `
    position:fixed; bottom:8%; right:0; z-index: 999999999999999999999999999999;
  `;
  // html of your toggle (oen element)
  // make sure it contain `input[type="checkbox"]`
  html = `<div> <!-- Your toogle html coming here --> </div>`;
  // css of your toggle -- you can add the `#${this.defaultId}` in front of every style selector to scope the css
  style = `// css of toggle coming here`;
}

const toggleTheme = new NEW_THEME();
new AutoDarkMode(toggleTheme);

In Case

If invert style made something wrong or you wanna to skip specific element form inverted just update the array of doubleRotatedElements with the new selector you wanted.

const theme = null; // will apply the default one
// some elemens may got corrupted so double rotate them 
const doubleRotatedElements = ['img', 'video']; 
new AutoDarkMode(theme, doubleRotatedElements);

Contact

Mohamed Mahmoud - LinkedIn - [email protected]

License

This project uses the following license: ISC.