How do I modify an external cdn js file on my html file to change opacity?
Im 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 cant 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.