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

Asked

Viewed 1,227 times

1

I am implementing a high contrast mode, and for that, I am using the following structure:

To draw the 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 is as planned, but the other previous CSS settings are lost (such as fonts, positioning and the like...). All I want is for "Dark Mode" to replace the colors of background-color and color, without overriding all others that I do not wish to change. This is possible?

Thanks in advance! =]

javascript html css

  • You can post your code complete with the css styles.

  • 1

    If it’s not a lot of CSS, you can create two classes, . clear and . dark in CSS. When you click, you use $("link"). addClass( "dark"); and $("outro_link"). removeClass( "dark"); or you can use . css("background", "#000");

  • 1

    The styles in common in the two "themes" should be placed in a css file that could be called for example ".css structure", for each new "theme" would have to create a separate css file where in them would be added only the individual styles of each, in your case, only color styles (background-color, color). Color css would be loaded dynamically by jquery. Doing so, the structure will not change since it would be loading the ".css structure" that is common for both, what would change would only be the colors of your application, in the individual themes.

1 answer

0


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");
});

Putting the dark instructions last, they are applied after the standard instructions:

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

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

See working here: http://codepen.io/anon/pen/dpJVAq

  • I tested it this way and it worked exactly as I wish, Hezekiah! Thank you very much, my dear! Not only to you, but also to all the others who helped me in the above answers.

  • Please provide @Victor. Would you mark the answer as accepted, please? So I get a few dots and also the next people will know what it is. Hugs

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.