search

sandoche / Darkmode.js

🌓 Add a dark-mode / night-mode to your website in a few seconds
https://darkmodejs.learn.uno
MIT License
2.71k stars 175 forks source link

Darkmode is not defined #77

Open heyepic opened 2 years ago

heyepic commented 2 years ago

First off - thanks for making this and I hope I can get this working!

I'm implementing this on a Magento 2 store and I'm including it near the footer. However, I'm seeing the following error in console log: (index):4595 Uncaught ReferenceError: Darkmode is not defined at addDarkmodeWidget ((index):4595)

I'm using the simple js include method here:

<html>
<body>
<!--StartFragment-->

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
--
  | <script>
  | function addDarkmodeWidget() {
  | new Darkmode().showWidget();
  | }
  | window.addEventListener('load', addDarkmodeWidget);
  | </script>

<!--EndFragment-->
</body>
</html>

Any ideas?

ivanaugustobd commented 1 year ago

Take a look at the top of the darkmode js file. You'll notice this: image

So the trick is to use the defined name there in a requirejs() call (not require(), not define(), literally requirejs()):

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
  window.addEventListener('load', () => {
    requirejs(['darkmode-js'], Darkmode => new Darkmode().showWidget())
  })
</script>

Reference: https://stackoverflow.com/a/14033636/2478283