Shikkediel

# October 17, 2017 at 3:55 am

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

# October 17, 2017 at 6:15 am

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

# October 17, 2017 at 7:46 am

Not seeing those errors …, anyway kudos @shikkediel

Shikkediel

# October 17, 2017 at 8:30 am

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

# October 17, 2017 at 9:51 am

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

Funkaholik

# October 18, 2017 at 3:06 am

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

thanx again .. I owe you..)

Funkaholik

# March 13, 2018 at 11:54 am

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

Funkaholik

# March 15, 2018 at 12:26 pm

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

# March 15, 2018 at 12:45 pm

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

# March 15, 2018 at 1:32 pm

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

# March 15, 2018 at 1:45 pm

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

# March 16, 2018 at 1:38 am

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

Shikkediel

# March 16, 2018 at 10:17 am

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

# March 23, 2018 at 3:12 am

Superb .. looks like it does that job