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?