Для вставки изображений в веб-страницу с учетом двух тем оформления сайта вам следует использовать JavaScript в сочетании с CSS. Вот подробное описание шагов, которые вам нужно выполнить:
1. **Разметка HTML**: Вам нужно создать разметку HTML для изображения, причем добавьте атрибут id к тегу <img> для удобства идентификации.
<img id="theme-image" src="path-to-image" alt="Description">
2. **Стили CSS**: Создайте два набора стилей CSS для каждой темы, например, для темы "темная" и "светлая".
#theme-image {
display: block;
margin: 0 auto;
}
.dark-theme #theme-image {
filter: brightness(50%);
}
.light-theme #theme-image {
filter: brightness(100%);
}
3. **JavaScript**: Добавьте скрипт JavaScript, который будет изменять класс элемента изображения, чтобы применить соответствующие стили для выбранной темы.
const themeToggle = document.getElementById('theme-toggle');
const themeImage = document.getElementById('theme-image');
themeToggle.addEventListener('click', () => {
if (document.body.classList.contains('dark-theme')) {
document.body.classList.remove('dark-theme');
document.body.classList.add('light-theme');
} else {
document.body.classList.remove('light-theme');
document.body.classList.add('dark-theme');
}
});
4. **Изменение темы**: Добавьте элемент управления, с помощью которого пользователь может переключать тему сайта.
<button id="theme-toggle">Toggle Theme</button>
При клике на кнопку "Toggle Theme" классы "dark-theme" и "light-theme" будут добавляться и удаляться у элемента <body>, что приведет к изменению стилей элемента изображения в зависимости от выбранной темы.
Следуя этим шагам, вы сможете правильно вставлять изображения на сайт с учетом двух тем оформления. Код можно доработать и дополнить функциональностью в зависимости от конкретных требований вашего проекта.