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

I’m using a Dark Mode script from
I add this to the head:

<script src=""></script>
  function addDarkmodeWidget() {
    new Darkmode().showWidget();
  const options = {
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  window.addEventListener('load', addDarkmodeWidget);

I put this just before the final body tag:

import Darkmode from 'darkmode-js';

new Darkmode().showWidget();

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:

.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%;}

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?


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