Использование LocalStorage для постоянных страниц ACROSS Dark Mode и Font SelectionJavascript

Форум по Javascript
Ответить Пред. темаСлед. тема
Anonymous
 Использование LocalStorage для постоянных страниц ACROSS Dark Mode и Font Selection

Сообщение Anonymous »

Я пытаюсь использовать JS (что я довольно новичок) для некоторых настроек отображения на моем веб -сайте. Первоначально у меня были метки флажков, а также хакерский хакер для Dark Mode и Swap Font (шрифт по умолчанию-это шрифт для пикселей, который, как я думал, у некоторых пользователей могут возникнуть проблемы с чтением), но, конечно, эти настройки не следуют за пользователем на другую страницу и должны быть переоценены каждый раз. Шрифт, но я не могу заставить его работать последовательно- он либо работает один раз, а затем возвращается на второй странице, нажимая, случайным образом применяет противоположность предыдущему состоянию, либо ничего не делает. Это JS, который у меня есть (исправлено из кода других людей): < /p>

Код: Выделить всё

//change color scheme on click
function lightMode() {
let element = document.body;
element.classList.toggle("light");
if (element.classList.contains("light")) {
localStorage.setItem("mode", "light");
} else {
localStorage.setItem("mode", "dark");
}
}

// Set color scheme on pageload
function loadMode() {
let darkMode = localStorage.getItem("mode");
if (darkMode === "light") {
document.body.classList.add("light");
}
}

window.onload = loadMode;

//change font on click
function textMode() {
let element = document.body;
element.classList.toggle("sans");
if (element.classList.contains("sans")) {
localStorage.setItem("font", "sans");
} else {
localStorage.setItem("font", "pixel");
}
}

// Set font pref on pageload
function loadFont() {
let darkMode = localStorage.getItem("font");
if (darkMode === "sans") {
document.body.classList.add("sans");
}
}

window.onload = loadFont;
< /code>
Вот соответствующие HTML: просто ссылки, которые запускают функции. < /p>
 [list]
[*]
 Mode

[*]
Change Font

[/list]
В моем CSS есть набор цветовых переменных для Body , еще один набор для Body.light (темный режим является по умолчанию), @font-family Special для Body и еще один для Body.sans .
Мое предположение о том, что двое, что я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую, я использую код, я использую. Я нашел кучу методов для применения такого мрачного режима, но я не смог найти какой -либо, объясняющий, как также управлять второй настройкой. Спасибо за любые указатели. Вместо этого он беспорядочно применяет один или обоих стилей, а иногда и ни один из них. JavaScript и кодирование в целом для меня загадка.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -selection
Реклама
Ответить Пред. темаСлед. тема

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

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

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

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

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • Использование LocalStorage для постоянных страниц ACROSS Dark Mode и Font Selection
    Anonymous » » в форуме CSS
    0 Ответы
    26 Просмотры
    Последнее сообщение Anonymous
  • Dark Mode vs. Light Mode: который лучше всего подходит для новостных приложений? [закрыто]
    Anonymous » » в форуме Android
    0 Ответы
    4 Просмотры
    Последнее сообщение Anonymous
  • React Native Expo с NativeWind портит стили с помощью Razorpay и Dark Mode
    Anonymous » » в форуме Android
    0 Ответы
    64 Просмотры
    Последнее сообщение Anonymous
  • Преодолеть Outlook Dark Mode Color Invert
    Anonymous » » в форуме CSS
    0 Ответы
    13 Просмотры
    Последнее сообщение Anonymous
  • Преодолеть Outlook Dark Mode Color Invert
    Anonymous » » в форуме CSS
    0 Ответы
    16 Просмотры
    Последнее сообщение Anonymous

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