Мой код, показанный ниже, для кнопки переключения темной темы не работает; Код Visual Studio не сообщает мне, что у меня есть какие-либо ошибки. Может ли кто-нибудь помочь мне понять, в чем проблема?
document.getElementById('themeButton').addEventListener('click'),
function() { /* Theme button script */
document.body.classList.toggle('dark-theme');
}body {
background-color: rgb(246, 246, 246);
color: black;
h1 {
color: rgb(63, 66, 145);
/* Header 1 features */
font-size: 50px;
padding-bottom: 8px;
margin: 10px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
/* Header 2 features */
margin: 10px;
}
p {
font-family: Arial, Helvetica, sans-serif;
/* Paragraph features */
font-size: 20px;
padding-bottom: 10px;
margin: 10px;
}
/* Dark theme styles */
.dark-theme {
background-color: #A9a9a9;
/* Dark gray background */
color: #F5F5F5/* Light gray body text */
}
.dark-theme h1 {
color: rgb(170, 172, 244)/* Light blue text for header 1 */
}
}<h1>Basic Website</h1>
<!-- Site text content -->
<hr>
<h2>Welcome to my basic webpage.</h2>
<p>This isn't my first time coding, but it's been so long that it might as well be.</p>
<img src = "treehouse.jpg" alt = "An elaborate treehouse.">
<!-- Image -->
<hr>
<button id = "themeButton">Change Theme Color</button>
<!-- Theme button -->Фон кнопки должен измениться на темно-серый, а текст должен стать светло-серым, но при нажатии кнопка ничего не меняет.
🤔 А знаете ли вы, что...
JavaScript имеет множество библиотек и фреймворков, таких как jQuery, Angular, и Vue.js.
У вас здесь ошибка
document.getElementById('themeButton').addEventListener('click'), function() { /* Скрипт кнопки темы */ document.body.classList.toggle('темная тема'); }
Вы должны передать функцию в качестве второго аргумента addEventListener, вот так
document.getElementById('themeButton').addEventListener('click', function() { /* Theme button script */
document.body.classList.toggle('dark-theme');
});
Вам также придется переместить правила .dark-theme CSS за пределы тела, потому что, если вы используете их, как в вашем примере, они могут влиять только на дочерние элементы тела, а не на само тело.
body {
/* Main body styles */
}
/* Dark theme styles */
.dark-theme {
}
(Two examples ahead!)
Вам нужно ссылаться на себя body, используя & во вложенном CSS , поскольку вы фактически переключаете этот класс в элементе body, используя document.body.classList.toggle('dark-theme');
body {
/* Default body styles */
&.dark-theme { /* alias for: body.dark-theme */
/* Dark theme body styles */
}
}
Затем для H1 вы можете использовать: H1 является потомком класса body темной темы, например:
h1 {
/* Default h1 styles */
.dark-theme & { /* alias for: .dark-theme h1 */
/* Dark theme h1 styles */
}
}
и так же, как и выше h1 стили, вы можете стилизовать любой другой селектор.
Кроме того, в вашем JS была опечатка; все исправлено в следующем примере:
document.querySelector("#theme").addEventListener("click", () => {
document.body.classList.toggle("dark-theme");
});body {
background: #fff;
color: #333;
&.dark-theme {
background: #333;
color: #fff;
}
}
a {
color: #0bf;
.dark-theme & {
color: #fb0;
}
}<button type = "button" id = "theme">Toggle theme</button>
<h1>TITLE</h1>
<p>Lorem ipsum <a href = "#">dolor</a> sit amet.</p>Честно говоря, я бы не стал создавать какие-либо кнопки для переключения чего-либо. Чем меньше пользовательского интерфейса, тем лучше, а сейчас 2024 год. Темные темы довольно распространены в дизайне пользовательского интерфейса. Вместо этого я бы сосредоточился на предпочитаемой пользователем теме ОС, используя @media предпочитает цветовую схему и некоторые свойства CSS:
:root {
--accent: #0bf;
--color: #333;
--bg: #fff;
@media (prefers-color-scheme: dark) {
--accent: #0bf;
--color: #fff;
--bg: #333;
}
}
body {
background: var(--bg);
color: var(--color);
}
a {
color: var(--accent);
}<h1>TITLE</h1>
<p>Lorem ipsum <a href = "#">dolor</a> sit amet.</p>