Reply To: Dark/Light color switch

[Atelierbram]

One thing that could work is using data-attributes on the elements (also very declarative), then move the styling to the javaScript. I could see how in some cases one would prefer it that way, but for this use-case I’m not so sure.

$(function() {
  $('.theme-switcher').on("click", function(event) {
    if ($('#theme').hasClass('light')) {
      $('#theme').removeClass('light');
      $('#theme').addClass('dark');
      $('#theme').css({
        "color": $('#theme').data("styleswitch-color"),
        "background-color":  $('#theme').data("styleswitch-bgcolor")
      });
      $('.linkline').css({
        "-webkit-text-fill-color": $('.linkline').data("styleswitch-fillcolor") 
      });
    } else {
      $('#theme').addClass('light');
      $('#theme').removeClass('dark');
       $('#theme').css({
        "color": "#333",
        "background-color": "#fff"
      });
      $('.linkline').css({
        "-webkit-text-fill-color": "#fff"
      });
    }
    event.preventDefault();
  });
});

https://codepen.io/atelierbram/pen/MEQbPZ/