Как сохранить выбранную тему на локальном хосте на моем сайте?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как сохранить выбранную тему на локальном хосте на моем сайте?

Сообщение 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);
}
};


Подробнее здесь: https://stackoverflow.com/questions/784 ... my-website
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»