Light mode and Dark mode for websites

General Discussion
22

I found that this website [1] is interesting although I have not tried to implement this.
[1] A Complete Guide to Dark Mode on the Web | CSS-Tricks

24

hello all
it was perfectly what I was searching
thank you
adding it on a page was easy but unfortunately I donā€™t understand how to modify the ā€œoptionā€ part
(i am not into javascript :frowning: )
if someone can explain how to add ā€œoptionsā€?

thank you
the original script is here:

<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>

but how to modify the font color etc etc with this other part?

const options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: 'šŸŒ“', // default: ''
  autoMatchOsTheme: true // default: true
}

do i have to write, for example if I want to change the background color:

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
  function const darkmode = new Darkmode(backgroundColor: '#100f2c');
darkmode.showWidget(); 

    const options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: 'šŸŒ“', // default: ''
  autoMatchOsTheme: true // default: true
}

  }
  window.addEventListener('load', addDarkmodeWidget);
</script>

thank you

26

thank you Jerry
I didnā€™t know that I can use it with a dedicated class
but if I understand it is linked to the mode of the OS
and not having a ā€œbuttonā€ allowing people to switch as they want
right?

28

true
I guess I will give a try to this and will see how it goes

thank Jerry for your quick answer