attribute Selector to override class of multiple elements

Question

I am trying to make kind of dark mode switcher for night reading, the problem is how to switch all the black text to white (black text in different p tags and different h tags each have it's own class, see the snippet) i am fine with the colored text, don't need to switch it, i tried with attribute selector, but no much luck

body.dark-mode [color=black] {
color:white;

}

function toggleDarkLight() {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

.three{
color:green;
}
.first{
color:blue;
}
.one {
color:red;
}
.another{
color:black
}

body.dark-mode {
  background-color: #111;
  
}
body.dark-mode button {
  background-color: #eee;
  color: #111;
}
body.light-mode {
  background-color: #eee;
  
}

body.light-mode button {
  background-color: #111;
  color: #eee;
}

<body id="body" class="dark-mode">
  <h1 class="three">Dark/Light Mode Switcher</h1>
   
  <button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode"></button>
  <div>
  <h1 class="first">title</h1>
  <h1 class="some">title 2</h1>
  <p class="one">Just press the button above to toggle!</p>
  <p class="another"> some text</p>
  </div>
  </body>

score 2 · Answer 1 · answered Jan 24 '19 at 13:21

2

In css there is no selector like that (and for a good reason - it would cause an infinite feedback loop, after all). You need to just target every single class by hand - or, if it's reasonable, just use body.dark-mode * { color: white; } to color everything white - and just then exclude elements you want to stay differently colored. Maybe you can use js. Then something like this could help:

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

document.querySelectorAll("*"),
  i=0, ii=allElements.length;

  for(i; i<ii; i++){
    let element = allElements[i]

    if(getComputedStyle(element).color === 'rgb(0, 0, 0)'){
      element.classList.add('white')
    }
  }

answered Jan 24 '19 at 13:21

Michał Sadowski

1,946
1
11
24

the snippet go completely white! – Mr T Jan 24 '19 at 13:26
Check the codepen, this part only handles turning the text to white, you would also need to write the reverse for unchecking it @MrT – Michał Sadowski Jan 24 '19 at 13:28
thank you, but simply this is not what i am looking for – Mr T Jan 24 '19 at 13:30

score 1 · Answer 2 · answered Jan 24 '19 at 13:10

1

This should do it.

function toggleDarkLight() {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

.three{
color:green;
}
.first{
color:blue;
}
.one {
color:red;
}
.another{
color:black
}

.dark-mode .some {
  color:white
}
.dark-mode .another{
color:white
}

body.dark-mode {
  background-color: #111;
  
}
body.dark-mode button {
  background-color: #eee;
  color: #111;
}
body.light-mode {
  background-color: #eee;
  
}

body.light-mode button {
  background-color: #111;
  color: #eee;
}

<body id="body" class="dark-mode">
  <h1 class="three">Dark/Light Mode Switcher</h1>
   
  <button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode"></button>
  <div>
  <h1 class="first">title</h1>
  <h1 class="some">title 2</h1>
  <p class="one">Just press the button above to toggle!</p>
  <p class="another"> some text</p>
  </div>
  </body>

answered Jan 24 '19 at 13:10

YetAnotherBot

1,937
2
25
32

yes, that will do it, but i have much more classes, and another people may add some other, so i can't target each one by it self, i am trying to find smoe kind of magic bullet that target any text with color:black; and switch it to color:white; – Mr T Jan 24 '19 at 13:22
Use `!important` then. But its not recommended for obvious reasons. – YetAnotherBot Jan 24 '19 at 13:29
can you explain where to use !important – Mr T Jan 24 '19 at 13:31
Ok. So you mean to say that other people might add their own elements and might not use your defined classes. – YetAnotherBot Jan 24 '19 at 13:37
Bad news is that selection based on CSS styles is not possible. You could select all element and loop and check for color attribute. But that is too slow. – YetAnotherBot Jan 24 '19 at 13:41
The closest thing I could get was https://stackoverflow.com/a/7080590/5051731. Hopefully, this works for you. – YetAnotherBot Jan 24 '19 at 13:43
good idea, can i implement it? (i am a little week with java script) – Mr T Jan 24 '19 at 13:45
You can, but it's not worth it. Too slow. I would recommend releasing a CSS guideline within the team. It should be like. DOM elements to be covered in D/L theme should have this particular class. This class should actually hold black/white color. – YetAnotherBot Jan 24 '19 at 13:47

Jelle · Answer 3 · 2019-01-24T13:34:20.817

0

You could create an extra class which makes specific elements styling change depending on the class of the body.

As far as I know you cannot create styling that is dependent on a specific color that the element already has.

function toggleDarkLight() {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

.three{
color:green;
}
.first{
color:blue;
}
.one {
color:red;
}
.another{
color:black
}

body.dark-mode {
  background-color: #111;
  
}
body.dark-mode button {
  background-color: #eee;
  color: #111;
}
body.light-mode {
  background-color: #eee;
  
}

body.light-mode button {
  background-color: #111;
  color: #eee;
}

body.dark-mode .canToggle{
  color: #eee;
}

<body id="body" class="dark-mode">
  <h1 class="three">Dark/Light Mode Switcher</h1>
   
  <button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode"></button>
  <div>
  <h1 class="first">title</h1>
  <h1 class="some canToggle">title 2</h1>
  <p class="one">Just press the button above to toggle!</p>
  <p class="another canToggle"> some text</p>
  </div>
  </body>

edited Jan 24 '19 at 13:34

answered Jan 24 '19 at 13:14

Jelle

2,026
1
12
17

the text still black in the dark mode? – Mr T Jan 24 '19 at 13:20
You can select whatever element you want to toggle by adding the `canToggle` class to the element. For now I moved them onto both of the black text elements – Jelle Jan 24 '19 at 13:35
thanks, but i was hopping for a way to do it with out changing the classes, a universal way that target only black text and invert it to white. – Mr T Jan 24 '19 at 13:39
Then you need to do it via javascript. Thats the only way you can apply logic onto color the text might have. @Michal Sadowski gives a good answer for this approach and should fit your needs if you modify it a bit. – Jelle Jan 24 '19 at 13:44
yes, it's all about modifying it a bit (devil is in the details) – Mr T Jan 24 '19 at 13:50

attribute Selector to override class of multiple elements

3 Answers3