Сохранять выбранную тему при обновлении страницы с помощью HTML, CSS и JavaScript

Я хотел бы сохранить выбранную тему при обновлении страницы, а также на всех других страницах. Я видел другие примеры, но я не знаю, как реализовать это в коде, так как я совсем новичок. Я включил код функциональности до сих пор. Спасибо заранее.

function changeTheme(bgColor, textColor) {
  var styles = document.documentElement.style;
  styles.setProperty('--bg-color', bgColor);
  styles.setProperty('--text-color', textColor);
}

var dark = document.querySelector('#dark');
var light = document.querySelector('#light');
var blue = document.querySelector('#blue');

dark.addEventListener('click', function() {
  changeTheme('#333', 'white');
});

light.addEventListener('click', function() {
  changeTheme('white', 'black');
});

blue.addEventListener('click', function() {
  changeTheme('#2982F5', 'white');
});

:root {
  --bg-color: #333;
  --text-color: white;
}

body {
  font-family: sans-serif;
  background: #c0c0c0;
}

nav {
  color: var(--text-color);
  background: var(--bg-color);
}

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}

li {
  margin-left: 15px;
}

a {
  color: var(--text-color);
}

<nav>
  <ul>
    <p>Select theme:</p>
    <li>
      <a href = "#" id = "dark">Dark</a>
    </li>
    <li>
      <a href = "#" id = "light">Light</a>
    </li>
    <li>
      <a href = "#" id = "blue">Blue</a>
    </li>
  </ul>
</nav>

javascript html css

14.05.2022 15:21

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете установить их на local storage и получить при первой загрузке.

function changeTheme(bgColor, textColor) {
  var styles = document.documentElement.style;
  styles.setProperty('--bg-color', bgColor);
  styles.setProperty('--text-color', textColor);
  localStorage.setItem('bgtheme', bgColor);
  localStorage.setItem('txttheme', textColor);
}

var dark = document.querySelector('#dark');
var light = document.querySelector('#light');
var blue = document.querySelector('#blue');

dark.addEventListener('click', function() {
  changeTheme('#333', 'white');
});

light.addEventListener('click', function() {
  changeTheme('white', 'black');
});

blue.addEventListener('click', function() {
  changeTheme('#2982F5', 'blue');
});

window.onload = (event) => {  
  let bgColor = localStorage.getItem('bgtheme');
  let txtColor = localStorage.getItem('txttheme');
  changeTheme(bgColor, txtColor);
};

:root {
  --bg-color: #333;
  --text-color: white;
}

body {
  font-family: sans-serif;
  background: #c0c0c0;
}

nav {
  color: var(--text-color);
  background: var(--bg-color);
}

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}

li {
  margin-left: 15px;
}

a {
  color: var(--text-color);
}

<nav>
  <ul>
    <p>Select theme:</p>
    <li>
      <a href = "#" id = "dark">Dark</a>
    </li>
    <li>
      <a href = "#" id = "light">Light</a>
    </li>
    <li>
      <a href = "#" id = "blue">Blue</a>
    </li>
  </ul>
</nav>

14.05.2022 15:32

Ответ принят как подходящий

Для этого вы можете использовать местное хранилище. Сохраняйте код HTML и CSS как есть. Ваш код JavaScript может быть таким:

// get stored theme on load
let storedTheme = localStorage.getItem("theme");
if (storedTheme){
 storedTheme= JSON.parse(storedTheme);
 changeTheme(storedTheme.bgColor, storedTheme.textColor);
}

function changeTheme(bgColor, textColor) {
  // updtate stored data when there is a click
  localStorage.setItem("theme", JSON.stringify({bgColor:bgColor, textColor:textColor}));
  var styles = document.documentElement.style;
  styles.setProperty('--bg-color', bgColor);
  styles.setProperty('--text-color', textColor);
}

var dark = document.querySelector('#dark');
var light = document.querySelector('#light');
var blue = document.querySelector('#blue');

dark.addEventListener('click', function() {
  changeTheme('#333', 'white');
});

light.addEventListener('click', function() {
  changeTheme('white', 'black');
});

blue.addEventListener('click', function() {
  changeTheme('#2982F5', 'white');
});

14.05.2022 15:34

Попробуйте этот пример:

<!doctype html>
<html>
 <head>
  <title>Test</title>
  <meta charset = "utf-8">
   <style>
    :root {
     --bg-color: #333;
     --text-color: white;
    }

    body {
     font-family: sans-serif;
     background: #c0c0c0;
    }

    nav {
     color: var(--text-color);
     background: var(--bg-color);
    }

    ul {
     dislpay: flex;
     justify-content: center;
     align-items: center;
     list-style-type: none;
    }

    li {
     margin-left: 15px;
    }

    a {
     color: var(--text-color);
    }
   </style>
 </head>
 <body>

<nav>
 <ul>
  <p>Select theme:</p>
  <li>
   <a href = "#" id = "dark">Dark</a>
  </li>
  <li>
   <a href = "#" id = "light">Light</a>
  </li>
  <li>
   <a href = "#" id = "blue">Blue</a>
  </li>
 </ul>
</nav>
  <script>

const app = () => {
// - - app

const appBgColor = localStorage.getItem('appBgColor')
const appTextColor = localStorage.getItem('appTextColor')

if (appBgColor && appTextColor) {
    changeTheme(appBgColor, appTextColor)
}

function changeTheme(bgColor, textColor) {
    localStorage.setItem('appBgColor', bgColor)
    localStorage.setItem('appTextColor', textColor)
        const styles = document.documentElement.style
        styles.setProperty('--bg-color', bgColor)
        styles.setProperty('--text-color', textColor)
}

const dark = document.getElementById('dark')
const light = document.getElementById('light')
const blue = document.getElementById('blue')

dark.addEventListener('click', () => changeTheme('#333', 'white'))
light.addEventListener('click', () => changeTheme('white', 'black'))
blue.addEventListener('click', () => changeTheme('#2982f5', 'white'))
// - - end app
}

document.addEventListener('DOMContentLoaded', app)
  </script>
 </body>
</html>

14.05.2022 16:00

Другие вопросы по теме

Как использовать переполнение с flex-grow

JavaScript Как создавать элементы в каждом созданном элементе?

Как закрыть боковое меню при нажатии из контейнера div

Как я могу сделать картинку липкой на локомотиве прокрутки

Остаться/свернуть панель навигации

Не удается получить параметр тимелеафа в href из атрибута модели

Возможно ли создать имя класса css с номерами «от-до»?

Открыть другой веб-сайт в новой вкладке вместе с моим сайтом

Все на моих страницах отлично работает на живом сервере VScode, но не на локальном

Flex внутри flex вызывает проблемы с ориентацией

Сохранять выбранную тему при обновлении страницы с помощью HTML, CSS и JavaScript

Ответы 3

Другие вопросы по теме

Похожие вопросы