La clase card
no cambia de color:
Y ya intenté varias cosas y no sé qué hacer, no sé cual error cometí en mi código. Me fijé si eran las variables o las clases, pero no era eso, creo. Abajo les dejo mi código:
(function () {
var select = globalVariable.theme;
if (select == "dark") {
var tema2 = "#242832";
var color1 = "#ffffff";
var tema3 = "#212529";
var borde2 = "0.5px solid #1A1C20";
$("#nav").removeClass("bg-light");
$("#nav").addClass("bg-dark");
$("#nav").removeClass("navbar-light");
$("#nav").addClass("navbar-dark");
$(".color").css("color", color1);
$(".card").css("background", tema3);
$(".color").css("border", borde2);
$("#main").css("background", tema2);
$("#icon").addClass("light");
$("#icon").css("color", color1);
$("#icon").css("font-size", "40px");
} else if (select == "light") {
var tema4 = "#ffffff";
var color3 = "#000000";
var borde3 = "0.5px solid #cccccc";
$("#nav").removeClass("bg-dark");
$("#nav").addClass("bg-light");
$("#icon").css("color", color3);
$("#nav").removeClass("navbar-dark");
$("#nav").addClass("navbar-light");
$(".card").css("color", color3);
$(".card").css("background", tema4);
$(".card").css("border", borde3);
$("#main").css("background", tema4);
}
$("#dark").on("click", function () {
var tema = "#242832";
var color = "#ffffff";
var tema1 = "#212529";
var borde = "0.5px solid #1A1C20";
$("#nav").removeClass("bg-light");
$("#nav").addClass("bg-dark");
$("#nav").removeClass("navbar-light");
$("#nav").addClass("navbar-dark");
$("#color").css("color", color);
$("#color").css("background", tema);
$("#color").css("border", borde);
$("#main").css("background", tema);
$("#icon").addClass("light");
$("#icon").css("color", color);
$("#icon").css("font-size", "40px");
var theme = "dark";
window.location.href = window.location.href + "?theme=" + theme;
});
$("#light").on("click", function () {
var tema = "#ffffff";
var color = "#000000";
var borde = "0.5px solid #cccccc";
$("#nav").removeClass("bg-dark");
$("#nav").addClass("bg-light");
$("#icon").css("color", color);
$("#nav").removeClass("navbar-dark");
$("#nav").addClass("navbar-light");
$(".card").css("color", color);
$(".card").css("background", tema);
$(".card").css("border", borde);
$("#main").css("background", tema);
var theme = "light";
window.location.href = window.location.href + "?theme=" + theme;
});
})();
Esta es la parte del código HTML que quiero que cambie de color:
<div class="card word" id="card">
<a href="entrar? class="ellink">
<img src="" class="card-img-top" alt="">
</a>
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text des">$100</p>
<p class="card-text envio">envio gratis</p>
</div>
</div>
No hay mensaje de error en la consola solo no cambia de color el fondo y es extraño por que luego ejecutó la misma instrucción pero desde la consola e inmediatamente me cambia el color tal como quería, la variable select no tiene importancia en mi problema es solo para que se ejecute pero se ejecuta casi todo excepto el estilo aplicado a la clase card. Las demás clases agregadas no tienen background en mi estilos css.
globalVariable
.