How to override CSS styles without interfering with another previous CSS?

Question

How to override CSS styles without interfering with another previous CSS?

Navigation

#1 by (0 votes)

1

I'm implementing a high-contrast mode, and for that, I'm using the following structure:

To call high contrast:

<li><a href="#" class="seleciona-estilo" data-classe="classe-azul">MODO ESCURO</a></li>

Javascript that adds CSS

<script>
$(".seleciona-estilo").on("click", function(e){
    e.preventDefault();
    $("link").attr("href", "ei-modo-escuro.css");
});
</script>

My question is: when I click on the "Dark Mode" button, the page loads the CSS in question and everything goes as planned, but the other previous CSS settings are lost (like fonts, positioning, and so on). What I want is just that "Dark Mode" replace the colors of background-color and color , without overlapping all others that I do not want to change. Is this possible?

Thank you in advance! =]

javascript html css

asked by anonymous 05.10.2016 / 16:49

1 answer

How to perform event with class instantiated in another method Is there any framework for android? [closed]

score 0 · Accepted Answer

You can add or remove only one class in the body, then include it in the dark style selectors:

$(".bt-tema").on("click", function(e) {
  $('body').toggleClass("escuro");
});

Placing the dark instructions last, they are applied after the default instructions:

/* Tema normal */
body {}
h1 {}
p {}

/* Tema escuro */
.escuro {}
.escuro h1 {}
.escuro p {}

See working here: link