Home › Forums › JavaScript › Dark/Light color switch
- This topic is empty.
-
AuthorPosts
-
October 17, 2017 at 3:55 am #261433
Shikkediel
ParticipantCodepen doesn’t seem to be liking it much but it looks like it generally works (try changing to dark and refreshing the page).
Maybe you could test it in a separate live environment. Check the console for possible errors…
October 17, 2017 at 6:15 am #261435Shikkediel
ParticipantNot 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.October 17, 2017 at 7:46 am #261438Atelierbram
ParticipantNot seeing those errors …, anyway kudos @shikkediel
October 17, 2017 at 8:30 am #261441Shikkediel
ParticipantCheers, 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…
October 17, 2017 at 9:51 am #261443Atelierbram
ParticipantGreat! This thread should be marked as solved, because of that last effort ;)
October 18, 2017 at 3:06 am #261465Funkaholik
ParticipantYou did it!
Seems like everything is workin’
i don’t see no errorsthanx again .. I owe you..)
March 13, 2018 at 11:54 am #268223Funkaholik
ParticipantBy the way .. easiest solutiont would be .dark * filter: invert(100%)
March 15, 2018 at 12:26 pm #268305Funkaholik
Participantthe 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 wellEdo, 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?March 15, 2018 at 12:45 pm #268306Shikkediel
ParticipantIt’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.
March 15, 2018 at 1:32 pm #268311Funkaholik
Participanti 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?March 15, 2018 at 1:45 pm #268312Shikkediel
ParticipantAh 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.
March 16, 2018 at 1:38 am #268323Funkaholik
Participantyou know that it would be awesome)
by the way there is something wrong with anonymous pens
its refreshing all the timeMarch 16, 2018 at 10:17 am #268340Shikkediel
ParticipantCheck 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…
March 23, 2018 at 3:12 am #268771Funkaholik
ParticipantSuperb .. looks like it does that job
December 26, 2018 at 12:16 am #280548spadesberry
ParticipantHey 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 -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.