How do I modify an external cdn js file on my html file to change opacity?

I’m using a Dark Mode script from https://darkmodejs.learn.uno/
I add this to the head:

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
  function addDarkmodeWidget() {
    new Darkmode().showWidget();
  }
  const options = {
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
}
  window.addEventListener('load', addDarkmodeWidget);
</script>

I put this just before the final body tag:

<script>
import Darkmode from 'darkmode-js';

new Darkmode().showWidget();
</script>

Everything works beautifully. BUT, as you can see, the script is an external cdn which I can’t edit.

I want to edit it because the widget you press is offset from the lower right corner where it can obscure the text on mobile. I want to modify the script so the widget/button is opacity: 0.5 to compensate.

I opened the js file at the cdn to examine the classes used and ended up writing this to overwrite the widget on my html page:

<style> 
.buttonColorLight {opacity: 0.5};
.buttonColorDark {opacity: 0.5};
.backgroundColor {opacity: 0.5}; 
.background {opacity: 0.5}; 
.darkmode-background {opacity: 0.5}; 
.darkmode-toggle {opacity: 0.5}; 
.darkmode-toggle--inactive {opacity: 0.5}; 
.darkmode--activated {opacity: 0.5}; 
.darkmode-layer {opacity: 0.5}; 
.darkmode-layer--expanded {opacity: 0.5}; 
.darkmode-layer--simple {opacity: 0.5}; 
.darkmode-layer--button {opacity: 0.5}; 
.darkmode-layer--button {border-radius: 20%;}
</style>

None of this works. The widget is still fully opaque. What can I do to override the script’s opacity?

Save this file as local, and then modify . It might works.

1 Like

Or if all else fails, !important ?

Isn’t that considered about as bad as using <br> in HTML, or using exec in JS?

Not that bad, but bad, yes.

Though, on some of these…

you’ve got

… i would imagine this is being done as a dumbfire text-replacement, so couldnt you put an rgba() in here to apply an alpha level to those values?

2 Likes

I can do that next, thanks.

1 Like

Works perfectly!

const options = {
  backgroundColor: 'rgba(255, 255, 255, 0.5)',  // default: '#fff'
  buttonColorDark: 'rgba(0, 0, 0, 0.5)',  // default: '#100f2c'
  buttonColorLight: 'rgba(255, 255, 255, 0.5)', // default: '#fff'
1 Like