Dark/Light color switch

[Funkaholik]

Thanx, Edo.,)

[Atelierbram]

@funkaholik

I guess I don’t understand exactly what the issue is here, when you write in your demo:

intial font color is switchable but text-fill-color of links isn’t, and I want it to be same color as background and I don’t care about border, and if you’ll add it in css then font-color also changes – it’s not good

Specially that last part about the font-color changing … for if you do:

.dark .two {
  -webkit-text-fill-color: #333;
}

Then just the text-fill-color changes, no? So what is really the issue?

https://codepen.io/atelierbram/pen/MEQbPZ

[Funkaholik]

yep, you did it with extra css but
say i have 1000 of elements&classes and i don’t want to write all that css for all of them
soooo i think there should a js magic button for that specific style changes .. at least i hope

[Atelierbram]

1. on web-development: HTML, CSS and javaScript: there is no magic involved
2. if being lazy, one has to get smart with it, like writing functions and so on ;)

Soooo maybe try to write a function in javascript that’s swaps every instance of “white” to “black” on button click or something, but I’m not going to go there. Personally I would much rather have the fined grained control with (declarative property-value pairs in) CSS, that is hard to beat IMO.

[Shikkediel]

I’ve been trying to put something together but it makes no sense. How could you select individual elements by their background colour when that it is defined by the parent…

codepen.io/anon/pen/QqQQXB?editors=1010

[Funkaholik]

i was thinkin’ maybe it’s possible to select not the element properties but just specific color in genereal
regardless of anything else, you know .. find a color in css and change it by js function or so.
if not don’t worry .. i’ll stick with last workin’ way.

[Shikkediel]

Changing the actual CSS file itself is possible but slow and not recommended…

[Atelierbram]

One thing that could work is using data-attributes on the elements (also very declarative), then move the styling to the javaScript. I could see how in some cases one would prefer it that way, but for this use-case I’m not so sure.

$(function() {
  $('.theme-switcher').on("click", function(event) {
    if ($('#theme').hasClass('light')) {
      $('#theme').removeClass('light');
      $('#theme').addClass('dark');
      $('#theme').css({
        "color": $('#theme').data("styleswitch-color"),
        "background-color":  $('#theme').data("styleswitch-bgcolor")
      });
      $('.linkline').css({
        "-webkit-text-fill-color": $('.linkline').data("styleswitch-fillcolor") 
      });
    } else {
      $('#theme').addClass('light');
      $('#theme').removeClass('dark');
       $('#theme').css({
        "color": "#333",
        "background-color": "#fff"
      });
      $('.linkline').css({
        "-webkit-text-fill-color": "#fff"
      });
    }
    event.preventDefault();
  });
});

https://codepen.io/atelierbram/pen/MEQbPZ/

[Funkaholik]

Actually that idea with selecting classes is the best solution for me.
The only thing that’s left is how to keep selected theme (dark/bright) in browser memory.
Because while you’re navigating through wesite everytime you have to reselect the theme
it’s very unhandy .. is there any ideas?

[Shikkediel]

Sounds like you’d be needing localStorage…

[Shikkediel]

If you post a relevant demo, I can put a few lines together.

[Funkaholik]

Superb, i’m on it

[Funkaholik]

i was how i can make a demo on codepen with links?
link two pens together or something?

[Shikkediel]

Why not use a regular direct link? Using localStorage should still work that way. Not sure what you’d mean otherwise myself.

[Funkaholik]

Not sure if i understood correctly
but working example is here

[Author]

Posts