Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać tryb ciemny do witryny WordPress (prosty sposób)

Wielu użytkowników preferuje korzystanie z trybu ciemnego na swoich urządzeniach i przeglądarkach, zwłaszcza podczas przeglądania stron internetowych w nocy lub w warunkach słabego oświetlenia. Dlatego włączenie trybu ciemnego w witrynie może pomóc zmniejszyć zmęczenie oczu i stworzyć bardziej komfortowe wrażenia podczas przeglądania, dzięki czemu witryna będzie bardziej przyjazna dla użytkowników.

Dodając tryb ciemny do WordPressa, Twoja witryna dostosuje się automatycznie w oparciu o preferencje przeglądarki odwiedzającego. Możesz także dodać przełącznik trybu ciemnego, aby odwiedzający mogli łatwo przełączać się między trybem ciemnym i jasnym.

W tym artykule pokażemy, jak łatwo dodać tryb ciemny do twojej witryny internetowej WordPress.

How to add dark mode to your WordPress website

Czym jest tryb ciemny i dlaczego warto dodać go do twojej witryny internetowej?

Wiele urządzeń mobilnych i komputerów korzysta z trybu ciemnego, aby zminimalizować ilość białego światła pochodzącego z ekranu. Może to zmniejszyć zmęczenie oczu, szczególnie w warunkach słabego oświetlenia.

Niektórzy uważają nawet, że pozwala to na korzystanie z komputerów i urządzeń mobilnych do późnych godzin nocnych bez białego i niebieskiego światła rujnującego twój sen.

Niektóre urządzenia mają wbudowany tryb nocny, który po prostu wykorzystuje cieplejsze odcienie kolorów. Tryb ciemny dodaje jednak ciemne kolory do tła urządzenia.

Niektóre popularne witryny, takie jak YouTube, oferują wbudowany ciemny schemat kolorów.

YouTube's dark mode

Na komputerach stacjonarnych można przechodzić na witryny internetowe w trybie ciemnym, korzystając z rozszerzenia Chrome, takiego jak Night Eye.

Oto jak wygląda witryna internetowa WPBeginner przy użyciu tego rozszerzenia:

An example of a website, with dark mode enabled

Dodając przełącznik trybu ciemnego do twojej witryny internetowej, użytkownicy mogą wybrać preferowany tryb bez konieczności instalowania specjalnego rozszerzenia przeglądarki.

Możesz nawet dodać tryb ciemny do twojego obszaru administracyjnego WordPress. Może to być przydatne, jeśli pracujesz na swojej witrynie w nocy lub jeśli cierpisz na zmęczenie oczu.

Mając to na uwadze, zobaczmy, jak dodać tryb ciemny do publicznego interfejsu witryny i obszaru administracyjnego witryny WordPress.

Wskazówka: Chcesz używać ciemnego schematu kolorów, nawet gdy urządzenie odwiedzającego jest w trybie normalnym lub dziennym? W takim razie sprawdź naszą listę najlepszych ciemnych motywów dla WordPress.

Jak dodać tryb ciemny do twojej witryny internetowej WordPress?

Najprostszym sposobem na utworzenie trybu ciemnego dla swojej witryny jest użycie WP Dark Mode. Ta wtyczka dodaje przełącznik, dzięki któremu odwiedzający mogą włączyć tryb ciemny w witrynie. Może nawet dodać przełącznik do obszaru administracyjnego, dzięki czemu można włączyć tryb ciemny dla kokpitu WordPress.

Możesz dowiedzieć się więcej o wtyczce w naszej szczegółowej recenzji WP Dark Mode.

Najpierw musisz zainstalować i aktywować darmową wtyczkę WP Dark Mode. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Po aktywacji, odwiedź stronę WP Dark Mode ” Settings z kokpitu WordPress i przełącz przełącznik „Enable Frontend Dark Mode” na „ON”.

Gdy to zrobisz, możesz również wybrać domyślny tryb dla frontendu twojej witryny internetowej. Następnie kliknij przycisk „Zapisz zmiany”, aby zapisać twoje ustawienia.

Enable frontend dark mode

Następnie przejdź do karty „Dostosowanie”, gdzie możesz dostosować układ, rozmiar i położenie przełącznika.

Można również zmienić kolor przełącznika trybu ciemnego, ale do tego potrzebna jest wersja pro wtyczki.

Customize the dark mode switch

Po zakończeniu kliknij przycisk „Zapisz zmiany”, aby zapisać ustawienia. Teraz odwiedź swoją witrynę WordPress, aby zobaczyć przełącznik trybu ciemnego w działaniu.

Jeśli zobaczysz mobilną wersję twojej witryny internetowej, zobaczysz, że tryb ciemny działa również na smartfonach i tabletach.

Website dark mode preview

Dodanie trybu ciemnego do twojego obszaruadministracyjnego WordPressa

Możesz zmienić schemat kolorów administratora w WordPressie za pomocą wbudowanych ustawień. Jednak żaden z domyślnych schematów kolorów nie redukuje białego światła padającego z ekranu.

Jeśli pracujesz do późnych godzin wieczornych lub cierpisz na zmęczenie oczu, możesz spróbować dodać tryb ciemny do obszaru administracyjnego WordPress i edytora bloków.

Aby to zrobić, przejdź na stronę WP Dark Mode ” Settings i przełącz się na kartę „Admin Panel Dark Mode” z lewej kolumny.

W tym miejscu przełącz przełącznik opcji „Włącz tryb ciemny kokpitu administratora” na „ON” i kliknij przycisk „Zapisz zmiany”.

Add dark mode in the WordPress dashboard

Gdy to zrobisz, zauważysz, że przełącznik trybu ciemnego znalazł się w górnej części twojego kokpitu WordPress.

Z tego miejsca można przełączać przełącznik, aby włączać ten tryb w dowolnym momencie.

Toggle the dark mode switch in WordPress dashboard

Jeśli chcesz dodać tryb ciemny również dla edytora blok ów, musisz przełączyć przełącznik „Tryb ciemny edytora bloków” na „WŁ.”.

Następnie kliknij przycisk „Zapisz zmiany”.

Enable dark mode for the block editor

Teraz otwórz stronę lub post w edytorze treści. Zauważysz ikonę trybu ciemnego u góry. Kliknij ją, aby rozwinąć kartę i wybrać opcję „Tryb ciemny”.

Tak będzie wyglądał twój edytor bloków w trybie ciemnym.

Block editor dark mode preview

Film instruktażowy

Subscribe to WPBeginner

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać tryb ciemny do swojej witryny WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tego, jak wybrać idealny schemat kolorów dla swojej witryny WordPress lub zobaczyć nasze wybory ekspertów dotyczące najlepszych kreatorów motywów WordPress, aby dostosować swoją witrynę.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

18 komentarzyZostaw odpowiedź

  1. Oreofe Oyebamiji

    Great info. I really love the plug-in and easy to use

    • WPBeginner Support

      Glad you found it helpful!

      Administrator

  2. Kurt

    I generally prefer dark modes in apps that support it. Thank you for this great tip.

    • WPBeginner Support

      Glad we could share this option :)

      Administrator

    • WPBeginner Support

      You’re welcome, glad our guide was helpful :)

      Administrator

  3. Agung

    This is wonderful. Thanks I’ll try it!

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrator

  4. Bryan Durio

    This is a fantastic plugin to save people’s eyes. I’ve used dark color schemes in Windows for years and now I can add it to my WP site. I appreciate your explanation of a few of its options. Thank you profusely!

    • WPBeginner Support

      Glad you found our guide helpful :)

      Administrator

  5. Richard hickman

    What does this feature do to Accessibility requirements?

    • WPBeginner Support

      It would depend on the specific accessibility requirements you are attempting to comply with for if this does anything or not.

      Administrator

  6. Richard Mayowa

    It is just too awesome possibility

    • WPBeginner Support

      Glad you like the available option :)

      Administrator

  7. Jennifer C. Valerie

    This is awesome. Thanks!

    • WPBeginner Support

      You’re welcome :)

      Administrator

  8. Adarsh Gupta

    Wow Amazing.
    I haven’t know about the Dark mode. But it’s so easy to add dark mode in WordPress
    Thanks for Great Explained

    • WPBeginner Support

      You’re welcome, glad our guide was helpful :)

      Administrator

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.