Dark/Light color switch

[Funkaholik]

Hi 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)

[Shikkediel]

You 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:

https://codepen.io/anon/pen/QqvWrr

[Funkaholik]

actually i just want it to change white to black & black to white
to keep all other colors same, like youtube does nowadays

idea 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 .. )

[Shikkediel]

I 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.

[Funkaholik]

you’re targeting only background-color there
is it possible to target background & color at the same time here

[Shikkediel]

Target how? What should change in response to each button exactly?

[Funkaholik]

basically .. 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 toogle

[Shikkediel]

So 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…

[Shikkediel]

How about you buzz off, idiot spammer.

[Funkaholik]

his website not even workin’ ))

switch background-color & color of all elements .. is it possible?

[Atelierbram]

Searching for “css style switcher” gives results like these: sitepoint.com/creating-simple-style-switcher/
@funkaholic Would that work for you?

[Funkaholik]

Actually 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 #fff

the 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 button

plus 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 #333

[Funkaholik]

Thanx, 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 dropdowns

[Funkaholik]

here’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 know

[Shikkediel]

I 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.

[Author]

Posts