Блог

Главная - Вопросы по программированию - Я работаю над настройками темного режима. Приложение для Windows

Я работаю над настройками темного режима. Приложение для Windows

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я работаю над переключением темного режима для моего приложения Windows, встроенного в node js и electron GUI. Проблема в том, что я могу переключать темный режим на странице, и он идеален, но как только вы переходите на другую страницу, он возвращается в светлый режим. Мне было интересно, можно ли сохранить darkmode = true в файле настроек или что-то в этом роде.

 INDEX.js

function darkMode(){
    var element = document.body;
    element.classList.toggle("dark-mode");
    document.cookie = "dark=True";
    var dark = True
    console.log(dark)
} 
 STYLES.CSS

body {
    background-color: white;
    color: black;
}

.dark-mode {
    background-color: black;
    color: white;
} 
 SETTING.HTML

<button onclick="window.location='index.html', id='homeBTN'">Home</button>


<script type = "text/javascript" src="index.js"></script>
<button onclick="darkMode()">Toggle Dark Mode</button>

INDEX.HTML

<script type = "text/javascript" src="index.js"></script>

<body>
    <h1>TEST</h1>
</body>

Комментарии:

1. Смотрите developer.mozilla.org/en-US/docs/Web/CSS/@media/…

Ответ №1:

 localStorage.setItem("darkMode", "true"); // or false

Затем позже вы захотите прочитать его обратно, но вам нужно будет проанализировать данные обратно.

 let isDarkMode =  JSON.parse(localStorage.getItem("darkMode"));

isDarkMode будет вашим значением, которое вы проверяете на всех последующих страницах.

Кстати, если вы хотите записать свой логический тип в localStorage, вы должны его упорядочить. Значения, хранящиеся в localStorage, являются строками (именно поэтому вы должны вызывать JSON.parse() для значения при чтении его обратно.

 localStorage.setItem("darkMode", JSON.stringify(isDarkMode));

Ответ №2:

Я сделаю это, установив :root переменные css и .dark class в body

CSS

 :root {
--background: white;
--color: black
}

.dark {
--background: black;
--color: white;
}

body {
background: var(--background);
color: var(--color);
}

А затем с помощью JavaScript вы можете переключить класс dark на тело

 const handleDarkTheme = () => {
document.body.classList.toggle('dark');
}

HTML

 <button onclick="handleDarkTheme()">Toggle Dark Mode</button>

Но это будет отображаться при каждом обновлении или повторном запуске приложения. Лучшим способом будет использовать какой-то локальный файл JSON с настройками, а затем извлекать его с помощью javascript при каждом запуске.