Итак, в настоящее время у меня есть веб-сайт, разработанный с использованием двух тем, макет точно такой же, но многие элементы были изменены по цвету и дизайну, а также отображается новое изображение сайта. Я добился этого, просто создав два файла CSS. Макет по умолчанию установлен в качестве стиля для всех посетителей, а второй достигается путем создания ссылки со скриптом переключения CSS, примененным к сайту, при нажатии на нее, которую я создал как кнопку, которая сама стилизована специально в css. Кнопки позволяют переключиться на вторую тему и вернуться к теме по умолчанию, обе кнопки отображаются независимо от выбранной темы. Кнопки расположены рядом друг с другом, нет тумблера, изображения или выпадающего списка, они отображаются в виде двух ссылок. Вот коды для них.
Стиль:
Кнопки:
Blue Grey
Проблема, которую я хочу решить, заключается в том, что, несмотря на нажатие, чтобы изменить тему на «серую» и изменение темы на этой странице, она сбрасывается обратно на синюю по умолчанию, как только посетитель нажимает на другую страницу, и я бы хотел, чтобы тема оставалась, если посетитель не вернется к «синему». Я знаю, что для этого мне нужен сценарий, но мне не удалось найти решение, и, кроме того, я столкнулся со многими учебниками, в которых говорится, что для достижения этой цели нужно использовать :root, но у меня слишком много пользовательских изменений в файлах CSS, включая три разных типа. ссылок, четыре заголовка, пользовательские цвета для выбора и полосы прокрутки, просто так много всего происходит, и я понятия не имею, как гарантировать, что это работает, если я изменю файлы CSS. Я думаю, что сценарий облегчил бы эту задачу.
И, честно говоря, мне очень не хватает знаний о том, как использовать сценарии. Даже если я читаю похожие вопросы, я действительно в замешательстве.
Спасибо за любую помощь.
Будет ли этот код полезен? Как мне заставить это работать? Когда я добавляю скрипты, переключатель вообще перестает работать.
// Function to toggle theme and save choice in sessionStorage
function toggleTheme(themeFileName) {
// Set the href attribute of the stylesheet to the chosen theme
document.getElementById('theme-style').setAttribute('href', themeFileName);
// Save the chosen theme in sessionStorage
sessionStorage.setItem('selectedTheme', themeFileName);
}
// Function to apply the theme from sessionStorage on page load
window.onload = function() {
// Check if a theme is stored in sessionStorage
var selectedTheme = sessionStorage.getItem('selectedTheme');
// If a theme is stored, apply it
if (selectedTheme) {
document.getElementById('theme-style').setAttribute('href', selectedTheme);
}
};
Подробнее здесь: https://stackoverflow.com/questions/784 ... my-website
Как сохранить выбранную тему на локальном хосте на моем сайте? ⇐ CSS
Разбираемся в CSS
-
Anonymous
1714835861
Anonymous
Итак, в настоящее время у меня есть веб-сайт, разработанный с использованием двух тем, макет точно такой же, но многие элементы были изменены по цвету и дизайну, а также отображается новое изображение сайта. Я добился этого, просто создав два файла CSS. Макет по умолчанию установлен в качестве стиля для всех посетителей, а второй достигается путем создания ссылки со скриптом переключения CSS, примененным к сайту, при нажатии на нее, которую я создал как кнопку, которая сама стилизована специально в css. Кнопки позволяют переключиться на вторую тему и вернуться к теме по умолчанию, обе кнопки отображаются независимо от выбранной темы. Кнопки расположены рядом друг с другом, нет тумблера, изображения или выпадающего списка, они отображаются в виде двух ссылок. Вот коды для них.
Стиль:
Кнопки:
Blue Grey
Проблема, которую я хочу решить, заключается в том, что, несмотря на нажатие, чтобы изменить тему на «серую» и изменение темы на этой странице, она сбрасывается обратно на синюю по умолчанию, как только посетитель нажимает на другую страницу, и я бы хотел, чтобы тема оставалась, если посетитель не вернется к «синему». Я знаю, что для этого мне нужен сценарий, но мне не удалось найти решение, и, кроме того, я столкнулся со многими учебниками, в которых говорится, что для достижения этой цели нужно использовать :root, но у меня слишком много пользовательских изменений в файлах CSS, включая три разных типа. ссылок, четыре заголовка, пользовательские цвета для выбора и полосы прокрутки, просто так много всего происходит, и я понятия не имею, как гарантировать, что это работает, если я изменю файлы CSS. Я думаю, что сценарий облегчил бы эту задачу.
И, честно говоря, мне очень не хватает знаний о том, как использовать сценарии. Даже если я читаю похожие вопросы, я действительно в замешательстве.
Спасибо за любую помощь.
Будет ли этот код полезен? Как мне заставить это работать? Когда я добавляю скрипты, переключатель вообще перестает работать.
// Function to toggle theme and save choice in sessionStorage
function toggleTheme(themeFileName) {
// Set the href attribute of the stylesheet to the chosen theme
document.getElementById('theme-style').setAttribute('href', themeFileName);
// Save the chosen theme in sessionStorage
sessionStorage.setItem('selectedTheme', themeFileName);
}
// Function to apply the theme from sessionStorage on page load
window.onload = function() {
// Check if a theme is stored in sessionStorage
var selectedTheme = sessionStorage.getItem('selectedTheme');
// If a theme is stored, apply it
if (selectedTheme) {
document.getElementById('theme-style').setAttribute('href', selectedTheme);
}
};
Подробнее здесь: [url]https://stackoverflow.com/questions/78428747/how-can-i-save-the-selected-theme-in-localhost-on-my-website[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия