Light mode and Dark mode for websites

[neeraj9]

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

[Jerry]

Well, @Eldar did this on his website as he tweeted a few days ago. https://twitter.com/EldarGezalov/status/1388127567933317121?s=20
As he never uses one line of code (correct me if wrong) it seems to be possible directly in Blocs. I’m sure he will be adding this to his Blocs Website Course page soon Details about his course are here: Eldar Gezalov - Web Designer & Certified Expert

[SENEK]

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

[Jerry]

Why not use the built-in dark theme which has been added to Blocs a few months after this topic?

https://help.blocsapp.com/knowledge-base/dark-theme/

[SENEK]

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?

[Jerry]

@SENEK

and not having a “button” allowing people to switch as they want
right?

That’s correct. Why add another hurdle to enter a website if not needed?
Visiting the majority of websites has started to become a real mission. First, you have to pass the cookie wall. After this, you get bombarded with marketing pop-ups/modals. When you have survived both you get surprised by an ugly-looking Facebook chat popup (which takes over half of your screen) and now another option needs to be added; the dark/light switch. If I have set on my computer preferences dark mode it’s highly likely I want a website to be in dark mode as well. Just my two cents from under the coconut tree

Instant edit: Not to forget to add the “do you want to get notifications” pop-up

[SENEK]

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

thank Jerry for your quick answer