Darkmode is not defined #77

heyepic · 2021-09-11T18:53:36Z

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?

The text was updated successfully, but these errors were encountered:

ivanaugustobd · 2023-06-06T02:43:12Z

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Darkmode is not defined #77

Darkmode is not defined #77

heyepic commented Sep 11, 2021 •

edited

ivanaugustobd commented Jun 6, 2023 •

edited

Darkmode is not defined #77

Darkmode is not defined #77

Comments

heyepic commented Sep 11, 2021 • edited

ivanaugustobd commented Jun 6, 2023 • edited

heyepic commented Sep 11, 2021 •

edited

ivanaugustobd commented Jun 6, 2023 •

edited