Dark/Light color switch

[Shikkediel]

Codepen doesn’t seem to be liking it much but it looks like it generally works (try changing to dark and refreshing the page).

codepen.io/anon/pen/xXQyRx

Maybe you could test it in a separate live environment. Check the console for possible errors…

[Shikkediel]

Not sure why Codepen is giving these browser.js addEventListener errors.
The layout glitch was my own doing, forgetting to add to “wrap” class…
Gonna have to look at the details a bit more too.

[Atelierbram]

Not seeing those errors …, anyway kudos @shikkediel

[Shikkediel]

Cheers, Bram. Looks like it’s Opera’s own internal script somehow. The browser I usually do anonymous pens with. Seems unrelated to either Codepen or the fiddling in question…

[Atelierbram]

Great! This thread should be marked as solved, because of that last effort ;)

[Funkaholik]

You did it!
Seems like everything is workin’
i don’t see no errors

thanx again .. I owe you..)

[Funkaholik]

By the way .. easiest solutiont would be .dark * filter: invert(100%)

[Funkaholik]

the only problem i see for now is when you navigate through links while body has dark class
once new page is loaded for a moment its bright untill dark class added after wrap class as well

Edo, is it possible to tell browser that after dark class have added it has to keep it active all around other pages?
maybe via cookies or else?

[Shikkediel]

It’s basically a cookie already. I don’t think you can implement it “preemptively” easily unless you use PHP. The quickest response you could get with this script is to not put it at the very bottom of the page but right after the element itself.

[Funkaholik]

i have it at the bottom end after jquery lib=))
what if i’ll put a script right after body tag but before jquery lib .. will it works?
no wait a sec .. then i’ll have to add it to all html-pages.
your script based on jquery i guess or it isn’t (i remember i have to have a jquery lib somewhere
maybe on total page scroll control script?

[Shikkediel]

Ah yes, the jQuery link. That’s interfering, didn’t think about that. Want me to have a go at rewriting the pen so it is independent of jQuery (in order to insert it earlier in the page without issue)? Shouldn’t be too much trouble.

[Funkaholik]

you know that it would be awesome)
by the way there is something wrong with anonymous pens
its refreshing all the time

[Shikkediel]

Check it out:

(function() {

  var motif = document.getElementById('theme'),
  flip = document.querySelector('.theme-switcher'),
  tone = true, depot = (function() {

    try {
    var bin = localStorage;
    bin.temp = 1;
    delete bin.temp;
    return bin || false;
    }
    catch(e) {
    return false;
    }
  })();

  if (depot) {
    if (!depot.shade) depot.shade = true;
    else {
      tone = JSON.parse(depot.shade);
      if (tone) motif.setAttribute('class', 'wrap light');
      else {
        motif.setAttribute('class', 'wrap dark');
        flip.innerHTML = 'bright';
      }
    }
  }

  flip.addEventListener('click', function() {

    tone = !tone;
    if (depot) depot.shade = tone;

    if (this.innerHTML == 'bright') this.innerHTML = 'dark';
    else this.innerHTML = 'bright';

    motif.classList.toggle('light');
    motif.classList.toggle('dark');
  });
})();

Dunno about the anons, haven’t noticed anything myself yet…

[Funkaholik]

Superb .. looks like it does that job

[spadesberry]

Hey everyone, wondering how i would get this to add to multiple classes with the same name?
please view here as an example.
https://codepen.io/SPADESBERRY/pen/GPWPdw
Thanks for any input i can get back

[Author]

Posts