Dark Theme in your website with one line of Js Code

In the present context, Dark Theme is like a vital thing for any website. The first thing I search while visiting the website is the theme toggler. Seriously, it is very uneasy to see the light-themed website now, at least for me.

So recently I implemented Dark Theme in my portfolio site. The funny thing is I didn't have to write the whole another CSS file for a dark theme. So let us begin on how you can implement the dark theme on your website using one line of code.

At first, inside your head tag

insert the following script and link files.

<script src="https://binayak.codes/dark-theme-switcher/js/dark-theme-switcher.js"></script>

Now place following code after closing the body tag

<script>
// Basic Usage
new ThemeSwitcherGenerator().init();

// Advance Usage 
new ThemeSwitcherGenerator({
  transition: 100,
  glow: true, 
  glowColor: '#fa4d5f',
  backgroundColor: '#fafafa',
  boxShadow: 'none',
  sunIconUrl: 'https://link.to.icon/sun.png',
  moonIconUrl: 'https://link.to.icon/moon.png',
  size: 40,
  contextMenuOptions: {
    width: '100px',
    height: '30px',
    padding: '15px',
    textColor: '#121212',
    background: '#ccc',
    boxShadow: '0px 5px 10px 0px rgba(77,77,77,0.16)',
    borderRadius: '15px'
  },
  //useDefaultContextMenu: true // Disable context menu provided by dark-theme-switcher
}).init();
</script>

Install it via npm, npm i dark-theme-switcher

And that's it, After doing that you will see a moon icon floating in website

After Clicking in that glowy floating icon, your website theme is changed

That glowy floating icon is user-customizable

The best part about this glowy icon is, visitors of your website can customize its location. Its draggable element. And it stores the current location where it is dragged and saves it.

You better use it yourself to see how it works Docs Of Dark Theme

Give your judgments!

Edit: Thanks to Luiz Filipe da Silva for making it available as node package, and awesome contribution