Jak dodać tryb ciemny do witryny WordPress?

Przez brak czasu zwlekałem z implementacją trybu ciemnego (Dark Mode) do CodeGeek. Ale w końcu zebrałem się za siebie i go wdrożyłem . Wyszło myślę bardzo dobrze, co sami możecie ocenić przełączając trigger na górze strony.

WSTĘP (HTML/DIV/INPUT):

Całość działa bez żadnej wtyczki do implementacji wykorzystałem HTML,CSS,JS,PHP. Jeśli jest możliwość to takie rzeczy zawsze lepiej wdrażać samemu. Raz możecie się wiele nauczyć, dwa wasza strona nie traci na wydajności i po trzecie macie pełną kontrolę nad tym co jest w kodzie. Rozwiązanie może działać z każdym motywem, nie ważne czy jest wasz, darmowy czy płatny.

PRZYCISK:

Zaczynamy o dodania przycisku na stronie dzięki któremu użytkownik będzie mógł przełączać motyw.

<div class="przelacznik">
<input class="switch_trigger" type="checkbox" id="darkcodegeek">
</div>

Najważniejsze tutaj to:

  • Utworzenie odpowiednie classy div
  • do <input> dodanie id które posłuży nam w kodzie JS

Jak już mamy dodany przycisk do header dobrze będzie go trochę zmodyfikować w css aby przypominał przełącznik.

ROZWINIĘCIE (PHP/JS/CSS)

Przycisk już mamy kolejnym krokiem będzie dodanie wyzwalacza aby przełączać nasz motyw na ciemny. Do tego potrzebujemy dodać skrypt js do naszej strony. Jeśli korzystamy z WordPressa to najlepiej wykorzystać funkcje:

<?php
function darkmode(){
    ?>
    <script>
    
    </script>
    <?php
}
add_action('wp_footer', 'darkmode');

Do środka ładujemy nasz skrypt JS który będzie zmieniać css:

document.getElementById('darkcodegeek').addEventListener('change', function(event){
  (event.target.checked) ? document.body.setAttribute('codegeek-theme', 'dark') : document.body.removeAttribute('codegeek-theme');
});

Łatwa cześć za nami, teraz najżmudniejsza czyli przepisanie naszego motywu na ciemne odcienie. Do tego zabiegu wykorzystamy CSS Variables.

A powinno to wyglądać mniej więcej tak, tworzymy dwa atrybuty light and dark i w innych umieszczamy odpowiednie zachowanie, przykład poniżej:

:root, [codegeek-theme="default"] {
		--border: none;
		--image-h: 60%;
		--color-blog-read: #000;
		--color-text-blog: #000;
}
@supports (--css: variables) {
  [codegeek-theme="dark"] {
		--border: none;
		--image-h: 60%;
		--color-blog-read: #222222;
		--color-text-blog: #FFF;
}
#top .font_icon a {
	border-color: #222;
	border-color: var(--colorsocial-icon-b);
	display: block;
	color: #222;
	color: var(--colorsocial-i);
}

ZAKOŃCZENIE:

Jeśli zrobimy wszystko jak należy to powinniśmy otrzymać następujący efekt:

Subscribe
Powiadom o
guest
0 komentarzy
Inline Feedbacks
View all comments