Я не могу применить темную тему, не показывая сначала светлую тему в веб-приложении, созданном с использованием чистого html, css и javascript.
Как дела?, у меня есть веб-приложение, и я создал темную и светлую тему, интегрировав и изменив примеры из других источников, в настоящее время я могу сохранить текущую примененную тему в локальном хранилище, чтобы тема применялась при переходе между страницами в мое приложение, проблема, с которой я сталкиваюсь, заключается в том, что когда я переключаюсь между страницами, если текущая тема является темной, всегда сначала отображается светлая тема, а затем применяется темная тема.
Первоначально у меня был такой html-документ
<html>
<body class = "tema-claro">
..........
<div class = "salir">
button onclick = "salir()">Salir</button>
</body
<script src=app.js type = "text/javascript></script>
</html>
Javascript следующий
"use strict";
Aplica_Estado_Inicial();
function Cambia_Tema() {
let tTema;
const cambiador = document.querySelector('.tema-visual');
document.body.classList.toggle('tema-claro');
document.body.classList.toggle('tema-oscuro');
document.body.style.transition = "1s ease"; //indicado por openAi
localStorage.setItem("tema", document.getElementsByTagName("body")[0].className);
const className = document.body.className;
if (className == 'tema-claro') {
tTema = 'Oscuro';
}
else if (className == 'tema-oscuro') {
tTema = 'Claro';
}
document.getElementById("temVis").innerHTML = tTema;
localStorage.setItem("textoTema", tTema);
console.info(localStorage.getItem("textoTema"));
}
function Salir() {
.
.
.
}
function Aplica_Estado_Inicial() {
if (localStorage.getItem("primeraCarga") === undefined) {
localStorage.setItem("primeraCarga", true);
document.body.className = "tema-claro";
document.getElementById("temVis") = Oscuro;
}
if (!(localStorage.tema === undefined)) {
document.body.className = localStorage.getItem("tema");
document.getElementById("temVis").innerHTML =
localStorage.getItem("textoTema");
}
}
Функция function Cambia_Tema() — это функция, которая меняет тему, когда я нажимаю кнопку, функция Aplica_Tema_Inicial() — это функция, которая применяет фактическую тему к вновь загруженной странице, но каждый раз, когда загружается новая страница приложения, загружается светлая тема.
Пытаясь решить проблему, я изменил Aplica_Estado_Inicial() таким образом.
function Aplica_Estado_Inicial() {
if (localStorage.getItem("primeraCarga") === undefined) {
localStorage.setItem("primeraCarga", true);
document.body.className = "tema-claro";
document.getElementById("temVis") = Oscuro;
}
else if (localStorage.getItem("primeraCarga") == true) {
document.body.className = localStorage.getItem("tema");
document.getElementById("temVis") = localStorage.getItem("textoTema");
}
if (!(localStorage.tema === undefined)) {
document.body.className = localStorage.getItem("tema");
document.getElementById("temVis").innerHTML =
localStorage.getItem("textoTema");
}
}
Добавить флаг для приложения, чтобы помнить, что не следует применять какую-либо начальную тему загрузки, которую могло иметь приложение, но это не помогло
И html-документ таким образом
<body onload = "Aplica_Tema_Inicial()">
.
.
.
</body>
Но это не сработало
Мои темы расположены в следующем порядке в файле CSS
.tema-oscuro {
--body-color: #161719;
--grad-uno-color: #4d4d51;
--grad-dos-color: #000101;
--primary-color-light: #f6f5ff;
}
.tema-claro {
--body-color: #e6e6d9;
--grad-uno-color: #bbbbbb;
--grad-dos-color: #4d4d51;
--primary-color-light: #1e2027;
}
Так что, если кто-то может помочь мне с этим, я буду очень благодарен.
ОБНОВЛЕНИЕ 11 ноября, 15:10
По-видимому, я мог бы решить проблему, изменив несколько вещей в своем коде, сначала в файле javascript я изменил как Aplica_Estado_Inicial(), так и Cmabia_Tema() для переменных с прослушивателями событий, ищущими нажатия на обе кнопки, затем я перестаю вызывать Aplica_Estado_Inicial() каждый раз файл javascript загружается на каждой странице моего приложения.
В html-документе я удалил все события onclick и дал идентификатор для тела и всех кнопок, чтобы связать их с прослушивателями событий, упомянутыми выше, наконец, только в следующей строке открывающего тега body я добавил тег script и внутри этого тег, который я включил простой, если он проверяет, не является ли свойство под названием «tema» «нулевым», это свойство является тем, в котором хранится фактическая применяемая тема; если условие выполнено, то тема присваивается классу тела.
Эти изменения приводят к загрузке всех страниц без предварительного применения светлой темы. См. код ниже
HTML-документ:
<body class = "tema-claro">
<script>
if (!(localStorage.getItem("tema") == null)) {
document.body.classList = localStorage.tema;
}
</script>
....
<div>
.....
</div>
<div class = "salir">
<button id = "bloquearSistema">Salir</button>
</div>
</body
<script src = "app.js" type = "text/javascript"></script>
<noscript>Debe habilitar Javascript para ver el sitio completo</noscript>
Конечно все это завернуто в тег
Файл javascript, как показано ниже
"use strict";
var estados = document.getElementById("temVis");
estados.addEventListener("click", function() {
let tTema;
const cambiador = document.querySelector('.tema-visual');
document.body.classList.toggle('tema-claro');
document.body.classList.toggle('tema-oscuro');
document.body.style.transition = "1s ease"; //indicado por openAi
localStorage.setItem("tema", document.getElementsByTagName("body")[0].className);
const className = document.body.className;
if (className == 'tema-claro') {
tTema = 'Oscuro';
}
else if (className == 'tema-oscuro') {
tTema = 'Claro';
}
document.getElementById("temVis").innerHTML = tTema;
localStorage.setItem("textoTema", tTema);
console.info(localStorage.getItem("textoTema"));
});
var bloqueado = document.getElementById("bloquearSistema");
bloqueado.addEventListener("click", function() {
var sHTTP = new XMLHttpRequest();
sHTTP.open("GET", "no-permitido", true);
sHTTP.send();
setTimeout(function(){window.open("autenticar.html", "_self");}, 1000);
});
Привет @Cookie_Wookie_7, я обновил код для html-документа, там вы можете увидеть, как объявляется файл javascript, он объявляется после закрывающего тега для тела, а не в заголовке, я сделал объявление после тела, потому что когда я вызывал функцию на кнопке «salir» с атрибутом onclick для вызова функции salir(), тогда инспектор страниц выдавал ошибку, если файл javascript определен в голове, потому что кнопка html, которая вызывает salir() не знает, кто кнопка.
@Cookie_Wookie_7, по-видимому, проблема решена, потому что сейчас темная тема загружается достаточно хорошо. Исходный пост обновлен в том, как я это сделал
Хорошо, рад, что вы нашли что-то, что сработало. для пользы людей в будущем вы обычно хотите установить тему CSS в заголовке HTML. вам может показаться интересным этот проект, где я делаю что-то похожее для изменения цвета доски. github.com/nstringham/othello-веб-приложение
Я также обнаружил, что использование события onclick() в качестве атрибута любого HTML-тега считается плохой практикой, как показано в этой статье: developer.mozilla.org/en-US/docs/Learn/JavaScript/…
Ответы 1
Я мог бы решить эту проблему, изменив несколько вещей в своем коде, сначала в файле javascript я изменил как Aplica_Estado_Inicial(), так и Cmabia_Tema() для переменных с прослушивателями событий, ищущими нажатия на обе кнопки, затем я прекращаю вызывать Aplica_Estado_Inicial() каждый раз, когда Файл javascript загружается на каждой странице моего приложения.
В html-документе я стер все события onclick и дал идентификатор телу и всем кнопкам, чтобы связать их с прослушивателями событий, упомянутыми выше, наконец, только в следующей строке открывающего тега body я добавил тег script и внутри этого тег, который я включил простой, если он проверяет, не является ли свойство под названием «tema» «нулевым», это свойство является тем, в котором хранится фактическая применяемая тема; если условие выполнено, то тема присваивается классу тела.
Эти изменения приводят к загрузке всех страниц без предварительного применения светлой темы. См. код ниже
HTML-документ:
<body class = "tema-claro">
<script>
if (!(localStorage.getItem("tema") == null)) {
document.body.classList = localStorage.tema;
}
</script>
....
<div>
.....
</div>
<div class = "salir">
<button id = "bloquearSistema">Salir</button>
</div>
</body
<script src = "app.js" type = "text/javascript"></script>
<noscript>Debe habilitar Javascript para ver el sitio completo</noscript>
Конечно же все это завернуто в тег <html>
Файл javascript, как показано ниже
"use strict";
var estados = document.getElementById("temVis");
estados.addEventListener("click", function() {
let tTema;
const cambiador = document.querySelector('.tema-visual');
document.body.classList.toggle('tema-claro');
document.body.classList.toggle('tema-oscuro');
document.body.style.transition = "1s ease"; //indicado por openAi
localStorage.setItem("tema", document.getElementsByTagName("body")[0].className);
const className = document.body.className;
if (className == 'tema-claro') {
tTema = 'Oscuro';
}
else if (className == 'tema-oscuro') {
tTema = 'Claro';
}
document.getElementById("temVis").innerHTML = tTema;
localStorage.setItem("textoTema", tTema);
console.info(localStorage.getItem("textoTema"));
});
var bloqueado = document.getElementById("bloquearSistema");
bloqueado.addEventListener("click", function() {
var sHTTP = new XMLHttpRequest();
sHTTP.open("GET", "no-permitido", true);
sHTTP.send();
setTimeout(function(){window.open("autenticar.html", "_self");}, 1000);
});
Эй, Вран, проблема может заключаться в том, что ваш JavaScript не выполняется немедленно. Можете ли вы показать нам свой тег сценария? Вы импортируете отдельный файл JavaScript? Ваш сценарий у вас в голове? Ваш сценарий отложен?