Skip to main content
HashnodeAnjal Binayak

Command Palette

Search for a command to run...

Dark Theme in your website with one line of Js Code

Updated
•2 min read
Dark Theme in your website with one line of Js Code
A
Anjal Binayak Adhikari

I code sometimes

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

Light Theme

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

That glowy floating icon is user-customizable

Dark Theme

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.

Alt Text

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

https://github.com/anjalbinayak/dark-theme-switcher

Give your judgments!

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

#js#javascript#css#pwa
423 views

Comments (8)

Join the discussion
G
Godstime Onyibe5y ago

Please could not add it in my web page. Am using it directly in the browser. Please some some one should help out.

A
Anjal Binayak Adhikari5y ago

Please read the documentation in here or contact Luiz Filipe da Silva

1
L
Luiz Filipe da Silva5y ago

Hey, Godstime Onyibe! Currently, the code is stable and works fine.

Add the script before the closing tag body, as it follows:

  ...
  <script src="https://cdn.jsdelivr.net/gh/luizfilipezs/dark-theme-switcher@latest/js/dark-theme-switcher.js"></script>
  <script type="text/javascript">
    new ThemeSwitcherGenerator().init();
    // or
    new ThemeSwitcher(someElement).init();
  </script>
</body>

Remember that what the package does is inverting the colors. So, to change the background of your body tag, as an example, you must give it a background color.

2
G
Godstime Onyibe5y ago

Luiz Filipe da Silva Thanks i have applied it and is working great 😍💕

1
L
Luiz Filipe da Silva5y ago

🥳🥳 Godstime Onyibe

L
Luiz Filipe da Silva5y ago

Good idea! I just forked the repository and I hope to contribute with it. Thanks for sharing!

2
A
Anjal Binayak Adhikari5y ago

Thanks, I would love that

2
A
Astha Srivastava5y ago

This is really amazing.. I tried and it worked perfectly fine.. Thanks for such great content. ❤

1
A
Anjal Binayak Adhikari5y ago

The pleasure is mine.

T
Tapas Adhikary5y ago

Great one Anjal.. I am gonna try it sooner for a project I am working on. Any plans to make it available as npm?

1
A
Anjal Binayak Adhikari5y ago

Thanks, Tapas. It may take some time, but yes for sure.

1
R
Rishab Kumar5y ago

And you my friend, are a lifesaver! 😉

1
A
Anjal Binayak Adhikari5y ago

I am happy , you appreciated it.

N
Nelson Michael5y ago

this is so awesome, thanks for sharing.

2
A
Anjal Binayak Adhikari5y ago

Pleasure is mine mate

V
Victoria Lo5y ago

Very cool! Thanks! I hope to use it in a project someday :)

1
A
Anjal Binayak Adhikari5y ago

Thank you, I am happy you liked it.

E
Edidiong Asikpo (Didi)5y ago

This is really amazing. I am going to try it out. Thanks for sharing.

1
A
Anjal Binayak Adhikari5y ago

Pleasure is mine

3

More from this blog

A

Anjal Binayak

18 posts