Темный режим HTML с чистым JavaScript

Question

Темный режим HTML с чистым JavaScript

Я хочу добавить темный режим на свой сайт с помощью javascript. Технически это работает, но не так, как я хотел. Он только установил черный цвет корпуса. Но проблема в том, чтобы установить цвет тегов "

". Честно говоря, я плохо разбираюсь в JavaScript, поэтому не знаю, как это делать. Вот мой код:

document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
document.div.style.backgroundColor = sessionStorage.getItem('cardbg');
document.div.style.color = sessionStorage.getItem('cardcc');
function darker() {
     if ( sessionStorage.getItem('bg') === 'rgb(241, 241, 241)') {

            sessionStorage.setItem('bg', 'rgb(6, 23, 37)');
            sessionStorage.setItem('cc', '#fff');
            sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)');
            sessionStorage.setItem('cardcc', '#fff');


     }
    else if (sessionStorage.getItem('bg') == null || undefined) {
        sessionStorage.setItem('bg', 'rgb(6, 23, 37)');
        sessionStorage.setItem('cc', '#000');
        sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)');
        sessionStorage.setItem('cardcc', '#fff');

    }
    else if( sessionStorage.getItem('bg') === 'rgb(6, 23, 37)') {

        sessionStorage.setItem('bg', 'rgb(241, 241, 241)');
        sessionStorage.setItem('cc', '#000');
        sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)');
        sessionStorage.setItem('cardcc', '#fff');


    }
document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
document.div.style.backgroundColor = sessionStorage.getItem('cardbg');
document.div.style.color = sessionStorage.getItem('cardcc');
}

<html>
<head>
<style>
body {
  background-color: #f1f1f1;
  color: #000;
}

.card {
  background-color: red;
  color: black;
}
</style>
</head>
<body>
<div class="card">
<h5>Title</h5>
<p>Some text...</p>
<p>Another text..</p>
</div>
</body>
<script src="assets/js/darker.js"></script>
</html>

0

javascript html linux apache2 darkmode

Источник

user14038646 28 авг '20 в 12:10

1 ответ

Решение

Другие вопросы по тегам javascript html linux apache2 darkmode

user13258211 28 авг '20 в 12:21 2020-08-28 12:21 · Accepted Answer · 2020-08-28 12:21

Вы можете хранить свои темы в объекте и переключать их во время выполнения, используя document.documentElement.style.setProperty()

Пример:

const dark = {
  'background-color': '#FFFFFF'
}

const light = {
  'background-color': '#000000'
}

В вашем CSS (Примечание: чтобы использовать только стиль div body > div)

--background-color: #000000 // this is the default

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

И, наконец, если вам нужно переключить тему, вы можете:

function setTheme(a_oTheme) {
  Object.keys(a_oTheme).forEach(k =>
    document.documentElement.style.setProperty(`--${k}`, a_oTheme[k])
  );
}