Home › Forums › JavaScript › Dark/Light color switch
- This topic is empty.
-
AuthorPosts
-
September 27, 2017 at 11:05 am #260659
Funkaholik
ParticipantHi y’all
Need some help with button-trigger-color-switcher
is there a way to target a specific colors (or at least two) to switch them for all elements that has those colors.
toggle + button for each move like hit a dark (switch to dark) hit a light (switch to normal)September 27, 2017 at 12:08 pm #260664Shikkediel
ParticipantYou won’t be able to switch colour on the pseudo elements (if that was the idea)…
Here’s some generic code, I’d probably choose the
filter
function for it:$('button').click(function() { if ($(this).index() == 1) { $('.line').filter(function() { if ($(this).css('background-color') == 'rgb(241, 74, 255)') return this; }) .css('background-color', 'black'); } });
Edit – actually, you can with a bit of CSS trickery:
September 27, 2017 at 12:26 pm #260665Funkaholik
Participantactually i just want it to change white to black & black to white
to keep all other colors same, like youtube does nowadaysidea is to target color in css and change it for all elements that has that color
i don’t know why i did that pen .. )
September 27, 2017 at 12:40 pm #260667Shikkediel
ParticipantI thought the new layout was utterly bland so I immediately went back to old YT. Dunno what they’re doing with colour switching. The essential most inner function above should still do a good job of selecting the elements.
September 28, 2017 at 1:25 am #260731Funkaholik
Participantyou’re targeting only background-color there
is it possible to target background & color at the same time hereSeptember 28, 2017 at 12:02 pm #260740Shikkediel
ParticipantTarget how? What should change in response to each button exactly?
October 1, 2017 at 3:22 am #260769Funkaholik
Participantbasically .. target background-color and color of all elements and switch them colors
usually background is transparent or #fff and color #333 so it’ll be great to be able to switch them by toogleOctober 1, 2017 at 8:22 am #260773Shikkediel
ParticipantSo how many types of elements are there, 2 or 4?
With the term “targeting” I’m not sure whether you mean for selection or adjustment…
October 1, 2017 at 10:36 am #260793Shikkediel
ParticipantHow about you buzz off, idiot spammer.
October 1, 2017 at 11:05 am #260794Funkaholik
Participanthis website not even workin’ ))
switch background-color & color of all elements .. is it possible?
October 1, 2017 at 1:29 pm #260799Atelierbram
ParticipantSearching for “css style switcher” gives results like these: sitepoint.com/creating-simple-style-switcher/
@funkaholic Would that work for you?October 5, 2017 at 8:50 am #261002Funkaholik
ParticipantActually i come up with the idea (saw somewhere) that makes it very simple=))
add class to body and switch them with button (toggle classes)
.light bg: #fff color: #333 & .dark bg:#333 color #fffthe only problem for me right now is that
i’m using also text-fill-color and stroke for certain elements
and i have no idea how to change them also with that same buttonplus text-fill-color overwrites color so there is also conflicts((
And still i think the easiest way will be change colors with js
kinda find all #333 and change to #fff & find all #fff and change to #333October 5, 2017 at 9:45 am #261007Funkaholik
ParticipantThanx, your example was on point
the only thing is i want to use button to switch two styles
and i have no idea how to rewrite js for a button not for select with dropdownsOctober 5, 2017 at 1:28 pm #261053Funkaholik
Participanthere’s a pen
so you’ll know what i mean
if there is a solution for that or we can change css colors without targeting properties of css
but just switch colors in js .. let me knowOctober 5, 2017 at 3:52 pm #261058Shikkediel
ParticipantI tried to post a reply but apparently edited too many times. My keyboard when haywire, outputting the wrong characters…
Anyway, the second part of your existing code could be reduced to this:
$('#theme').toggleClass('light dark');
I’ll have to take another look at what you’re trying the do exactly otherwise.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.