Cześć. Postanowiłem pobawić się w zrobienie dla znajomego switcha w wordpressie trybu jasny/ciemny. Skorzystałem z rozwiązania stąd:
https://codegeek.com.pl/jak-dodac-tryb-ciemny-do-witryny-wordpress/
Wszystko działa jak najbardziej poza jednym. Po odświeżeniu strony, kliknięciu w jakiś post czy cokolwiek co powoduje przeładowanie strony witryna znów jest „jasna”. Jakby nie pamiętało wybranego trybu (jak na DP). Co jest nie tak?
Zrobiłem też na szybko prosty HTML z blokiem BG i tekstem, ale tez nie „trzyma” tych ustawień. Kod poniżej:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root, [child-theme="default"] {
--font:#333;
--bg:#fff;
}
@supports (--css: variables) {
[child-theme="dark"] {
--font:#fff;
--bg:#333;
}.styles{
background: var(--bg);
color:var(--font);
padding:25px;
}
}
</style>
</head>
<body>
<div class="dark-mode-switch">
<input type="checkbox" class="checkbox" id="dark_mode_switch_id" />
<label class="label" for="dark_mode_switch_id">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<div class="ball"></div>
</label>
</div>
<div class="styles">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt tempora, inventore rem dolorem aliquam debitis necessitatibus totam officia veritatis magnam nihil, ipsa alias error eum, molestiae quibusdam enim beatae eveniet obcaecati vero quisquam omnis temporibus rerum! </p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
document.getElementById('dark_mode_switch_id').addEventListener('change', function(event){
(event.target.checked) ? document.body.setAttribute('child-theme', 'dark') : document.body.removeAttribute('child-theme');
});
</script>
</body>
Jakieś sugestie co jest źle?