{"id":3332,"date":"2024-08-21T14:26:23","date_gmt":"2024-08-21T17:26:23","guid":{"rendered":"https:\/\/horatech.shop\/?p=3332"},"modified":"2024-11-29T14:14:26","modified_gmt":"2024-11-29T17:14:26","slug":"como-fazer-darkmode-em-pagina-com-javascript","status":"publish","type":"post","link":"https:\/\/horatech.shop\/pl\/jak-zmienic-tryb-ciemny-strony-za-pomoca-javascript\/","title":{"rendered":"Jak zmieni\u0107 tryb ciemny strony za pomoc\u0105 Javascript"},"content":{"rendered":"<p>Tryb ciemny staje si\u0119 coraz bardziej popularny w projektowaniu interfejs\u00f3w, zapewniaj\u0105c komfort wizualny i umo\u017cliwiaj\u0105c u\u017cytkownikom wyb\u00f3r preferowanego motywu. <\/p>\n\n\n\n<p>W tym artykule dowiesz si\u0119, jak utworzy\u0107 tryb ciemny na stronie przy u\u017cyciu JavaScript, HTML, CSS i nowoczesnych technik internetowych.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"795\" height=\"443\" src=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Como-fazer-darkmode-em-pagina-com-Javascript.webp?resize=795%2C443&#038;ssl=1\" alt=\"\" class=\"wp-image-3334\" srcset=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Como-fazer-darkmode-em-pagina-com-Javascript.webp?w=795&amp;ssl=1 795w, https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Como-fazer-darkmode-em-pagina-com-Javascript.webp?resize=300%2C167&amp;ssl=1 300w, https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Como-fazer-darkmode-em-pagina-com-Javascript.webp?resize=768%2C428&amp;ssl=1 768w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><figcaption class=\"wp-element-caption\"><em>Kompletny samouczek<\/em> z trybu ciemnego<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Wprowadzenie do trybu ciemnego<\/h2>\n\n\n\n<p>Tryb ciemny zyskuje na znaczeniu w projektowaniu cyfrowym, odzwierciedlaj\u0105c zmian\u0119 preferencji u\u017cytkownik\u00f3w. Pomaga on zmniejszy\u0107 zm\u0119czenie oczu w s\u0142abo o\u015bwietlonym otoczeniu, dzi\u0119ki czemu czytanie jest wygodniejsze.<\/p>\n\n\n\n<p>Ponadto urz\u0105dzenia mobilne zu\u017cywaj\u0105 mniej baterii podczas korzystania z trybu ciemnego, zw\u0142aszcza ekrany OLED. Jest to korzystne dla tych, kt\u00f3rzy korzystaj\u0105 z urz\u0105dzenia przez d\u0142ugi czas.<\/p>\n\n\n\n<p>Przy tak wielu korzy\u015bciach, wiele aplikacji i stron internetowych oferuje ju\u017c t\u0119 opcj\u0119, pozwalaj\u0105c u\u017cytkownikom spersonalizowa\u0107 swoje do\u015bwiadczenia. Tryb ciemny jest nie tylko atrakcyjny wizualnie, ale tak\u017ce sprawia, \u017ce przegl\u0105danie jest \u0142atwiejsze i przyjemniejsze.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"746\" height=\"407\" src=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Introducao-ao-Dark-Mode.webp?resize=746%2C407&#038;ssl=1\" alt=\"\" class=\"wp-image-3333\" srcset=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Introducao-ao-Dark-Mode.webp?w=746&amp;ssl=1 746w, https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Introducao-ao-Dark-Mode.webp?resize=300%2C164&amp;ssl=1 300w\" sizes=\"(max-width: 746px) 100vw, 746px\" \/><figcaption class=\"wp-element-caption\"><em>Wprowadzenie do trybu ciemnego<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dlaczego warto korzysta\u0107 z trybu ciemnego?<\/strong><\/h3>\n\n\n\n<p>Korzystanie z trybu ciemnego zapewnia bardziej komfortowe wra\u017cenia wizualne, szczeg\u00f3lnie w warunkach s\u0142abego o\u015bwietlenia. Pozwala r\u00f3wnie\u017c u\u017cytkownikom wybra\u0107 motyw, kt\u00f3ry najbardziej im si\u0119 podoba, dzi\u0119ki czemu przegl\u0105danie jest bardziej spersonalizowane.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zalety trybu ciemnego<\/h2>\n\n\n\n<p>Wdro\u017cenie trybu ciemnego ma kilka zalet. G\u0142\u00f3wn\u0105 z nich jest poprawa komfortu u\u017cytkowania poprzez u\u0142atwienie czytania, zw\u0142aszcza w ciemnym otoczeniu. <\/p>\n\n\n\n<p>Tekst na ciemnym tle zmniejsza wysi\u0142ek wizualny i zwi\u0119ksza zaanga\u017cowanie u\u017cytkownika. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"763\" height=\"382\" src=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Por-que-implementar-dark-mode.webp?resize=763%2C382&#038;ssl=1\" alt=\"\" class=\"wp-image-3335\" srcset=\"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Por-que-implementar-dark-mode.webp?w=763&amp;ssl=1 763w, https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Por-que-implementar-dark-mode.webp?resize=300%2C150&amp;ssl=1 300w\" sizes=\"(max-width: 763px) 100vw, 763px\" \/><figcaption class=\"wp-element-caption\"><em>Zalety trybu ciemnego<\/em><\/figcaption><\/figure>\n\n\n\n<p>Badania pokazuj\u0105, \u017ce ludzie sp\u0119dzaj\u0105 wi\u0119cej czasu na stronach, kt\u00f3re oferuj\u0105 t\u0119 funkcj\u0119, co wskazuje, \u017ce marki, kt\u00f3re przyjmuj\u0105 tryb ciemny, s\u0105 bardziej zgodne z potrzebami swoich klient\u00f3w.<\/p>\n\n\n\n<p>Kolejn\u0105 istotn\u0105 korzy\u015bci\u0105 jest oszcz\u0119dno\u015b\u0107 baterii w urz\u0105dzeniach mobilnych z ekranami OLED, poniewa\u017c zu\u017cywaj\u0105 one mniej energii w trybie ciemnym. <\/p>\n\n\n\n<p>Ta oszcz\u0119dno\u015b\u0107 sprawia, \u017ce tryb ciemny jest m\u0105drym wyborem dla u\u017cytkownik\u00f3w i deweloper\u00f3w.<\/p>\n\n\n\n<p><strong>Zalety trybu ciemnego:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Komfort wizualny:<\/strong> Zmniejsza zm\u0119czenie oczu w warunkach s\u0142abego o\u015bwietlenia.<\/li>\n\n\n\n<li><strong>Zwi\u0119kszone zaanga\u017cowanie:<\/strong> U\u017cytkownicy pozostaj\u0105 d\u0142u\u017cej na stronach z trybem ciemnym.<\/li>\n\n\n\n<li><strong>Oszcz\u0119dno\u015b\u0107 baterii:<\/strong> Zmniejsza zu\u017cycie energii w urz\u0105dzeniach z ekranami OLED.<\/li>\n\n\n\n<li><strong>Personalizacja:<\/strong> Oferuje u\u017cytkownikom wyb\u00f3r, kt\u00f3ry odpowiada ich preferencjom.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Korzystanie ze zmiennych CSS i LocalStorage<\/h2>\n\n\n\n<p>Zmienne CSS to praktyczny spos\u00f3b przechowywania warto\u015bci i u\u0142atwiania dostosowywania projektu. Na przyk\u0142ad, mo\u017cna u\u017cy\u0107 <code>--bg-grey-light<\/code> aby ustawi\u0107 jasny kolor t\u0142a i <code>--text-dark<\/code> dla ciemnego tekstu. Te zmienne sprawiaj\u0105, \u017ce prze\u0142\u0105czanie mi\u0119dzy jasnymi i ciemnymi motywami jest prostsze i bardziej wydajne.<\/p>\n\n\n\n<p>O <code>localStorage<\/code> to pot\u0119\u017cne narz\u0119dzie do zapisywania danych w przegl\u0105darce. Umo\u017cliwia ono zapisanie preferencji u\u017cytkownika, takich jak wyb\u00f3r motywu, i automatyczne zastosowanie ich podczas kolejnych wizyt na stronie.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Podstawowa struktura HTML<\/h2>\n\n\n\n<p>Dobrze zorganizowana struktura HTML jest niezb\u0119dna do wdro\u017cenia trybu ciemnego. Elementy takie jak przyciski zmiany motywu i wyra\u017any tekst pomagaj\u0105 w nawigacji i u\u017cyteczno\u015bci witryny.<\/p>\n\n\n\n<p><strong>Podstawowe elementy:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><button><\/code>Przycisk do prze\u0142\u0105czania mi\u0119dzy trybem jasnym i ciemnym.<\/li>\n\n\n\n<li><code>&lt;h1&gt;<\/code>Tytu\u0142 strony g\u0142\u00f3wnej.<\/li>\n\n\n\n<li><code>&lt;p&gt;<\/code>Akapity tekstu u\u0142atwiaj\u0105ce czytanie.<\/li>\n\n\n\n<li><code>&lt;div&gt;<\/code>Podzia\u0142y do grupowania i stylizowania tre\u015bci.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Stylizacja za pomoc\u0105 CSS<\/h2>\n\n\n\n<p>Wyb\u00f3r odpowiednich kolor\u00f3w ma fundamentalne znaczenie dla uczynienia trybu ciemnego przyjemnym. U\u017cywaj klas takich jak <code>.light<\/code> e <code>.dark<\/code> u\u0142atwia wymian\u0119 mi\u0119dzy tematami.<\/p>\n\n\n\n<p><strong>Przyk\u0142adowe kolory:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tekst g\u0142\u00f3wny:<\/strong> #000000 w jasnym motywie, #FFFFFF w ciemnym motywie.<\/li>\n\n\n\n<li><strong>Fundusz:<\/strong> #FFFFFF w jasnym motywie, #121212 w ciemnym motywie.<\/li>\n\n\n\n<li><strong>Linki:<\/strong> #007BFF w jasnym motywie, #82B1FF w ciemnym motywie.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Implementacja trybu ciemnego za pomoc\u0105 JavaScript<\/h2>\n\n\n\n<p>Aby utworzy\u0107 tryb ciemny za pomoc\u0105 JavaScript, nale\u017cy manipulowa\u0107 DOM, dodaj\u0105c klasy do elementu <code>cia\u0142o<\/code> strony. Pierwszym krokiem jest sprawdzenie stanu motywu w sekcji <code>localStorage<\/code>Gwarantuje to, \u017ce motyw wybrany przez u\u017cytkownika zostanie zachowany po prze\u0142adowaniu strony.<\/p>\n\n\n\n<p>Podstawowy kod do implementacji trybu ciemnego to:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (localStorage.getItem('darkMode') == 'enabled') {\n    document.body.classList.add('dark-mode');\n} else {\n    document.body.classList.remove('dark-mode');\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Obs\u0142uga zdarze\u0144 i klas CSS<\/h2>\n\n\n\n<p>Funkcja trybu ciemnego jest aktywowana za pomoc\u0105 JavaScript przy u\u017cyciu detektor\u00f3w zdarze\u0144, kt\u00f3re wykrywaj\u0105 dzia\u0142ania u\u017cytkownika, takie jak klikni\u0119cia przycisk\u00f3w w celu zmiany motywu.<\/p>\n\n\n\n<p><strong>Podstawowe kroki:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Wybierz przycisk zmiany motywu.<\/li>\n\n\n\n<li>Dodaj detektor zdarze\u0144 do wykrywania klikni\u0119\u0107.<\/li>\n\n\n\n<li>Zmie\u0144 klas\u0119 motywu na stronie.<\/li>\n<\/ol>\n\n\n\n<p>Manipulowanie klasami w JavaScript ma fundamentalne znaczenie dla implementacji trybu ciemnego. U\u017cycie <code>classList<\/code>Mo\u017cesz z \u0142atwo\u015bci\u0105 prze\u0142\u0105cza\u0107 si\u0119 mi\u0119dzy motywami.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.body.classList.toggle('dark');<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Testowanie i ulepszanie implementacji<\/h2>\n\n\n\n<p>Konieczne jest przetestowanie implementacji trybu ciemnego, aby upewni\u0107 si\u0119, \u017ce wszystko dzia\u0142a poprawnie. Sprawd\u017a, czy motyw wybrany przez u\u017cytkownika jest poprawnie stosowany po za\u0142adowaniu strony i czy zmiana motywu nast\u0119puje p\u0142ynnie.<\/p>\n\n\n\n<p><strong>Mo\u017cliwe ulepszenia:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Zaimplementuj p\u0142ynne przej\u015bcia mi\u0119dzy motywami, aby uzyska\u0107 przyjemniejsze wra\u017cenia wizualne.<\/li>\n\n\n\n<li>Oferuj opcje dostosowywania kolor\u00f3w, pozwalaj\u0105c u\u017cytkownikom wybiera\u0107 spo\u015br\u00f3d r\u00f3\u017cnych palet.<\/li>\n\n\n\n<li>Uwzgl\u0119dnij funkcje dost\u0119pno\u015bci, takie jak dostosowania dla os\u00f3b niewidomych lub niedowidz\u0105cych.<\/li>\n<\/ul>\n\n\n\n<p><strong>Korzy\u015bci z ulepsze\u0144:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>P\u0142ynne przej\u015bcia:<\/strong> Poprawiaj\u0105 one u\u017cyteczno\u015b\u0107 i zmniejszaj\u0105 zu\u017cycie wizualne.<\/li>\n\n\n\n<li><strong>Konfigurowalne palety:<\/strong> Zwi\u0119kszaj\u0105 one zadowolenie u\u017cytkownik\u00f3w i personalizacj\u0119 interfejsu.<\/li>\n\n\n\n<li><strong>Dost\u0119pno\u015b\u0107:<\/strong> Sprawia to, \u017ce do\u015bwiadczenie jest bardziej inkluzywne, zaspokajaj\u0105c r\u00f3\u017cne potrzeby wizualne.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Wnioski<\/h2>\n\n\n\n<p>Przyj\u0119cie trybu ciemnego wykracza poza aspekt wizualny; poprawia czytelno\u015b\u0107, zmniejsza zm\u0119czenie oczu i umo\u017cliwia dostosowanie, kt\u00f3re lepiej spe\u0142nia potrzeby u\u017cytkownik\u00f3w. <\/p>\n\n\n\n<p>Korzystaj\u0105c z HTML, CSS i JavaScript, mo\u017cesz zmieni\u0107 spos\u00f3b przegl\u0105dania, oferuj\u0105c bardziej elastyczny projekt dostosowany do cyfrowej przysz\u0142o\u015bci.<\/p>","protected":false},"excerpt":{"rendered":"<p>O modo escuro tem se tornado cada vez mais popular no design de interfaces, trazendo conforto visual e permitindo que os usu\u00e1rios escolham o tema que preferem. Neste artigo, voc\u00ea aprender\u00e1 como criar o modo escuro em uma p\u00e1gina utilizando JavaScript, HTML, CSS e t\u00e9cnicas web modernas. Introdu\u00e7\u00e3o ao Dark Mode O modo escuro vem [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3334,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacao"],"blocksy_meta":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Como-fazer-darkmode-em-pagina-com-Javascript.webp?fit=795%2C443&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/horatech.shop\/pl\/wp-json\/wp\/v2\/posts\/3332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/horatech.shop\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/horatech.shop\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/horatech.shop\/pl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/horatech.shop\/pl\/wp-json\/wp\/v2\/comments?post=3332"}],"version-history":[{"count":2,"href":"https:\/\/horatech.shop\/pl\/wp-json\/wp\/v2\/posts\/3332\/revisions"}],"predecessor-version":[{"id":3787,"href":"https:\/\/horatech.shop\/pl\/wp-json\/wp\/v2\/posts\/3332\/revisions\/3787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/horatech.shop\/pl\/wp-json\/wp\/v2\/media\/3334"}],"wp:attachment":[{"href":"https:\/\/horatech.shop\/pl\/wp-json\/wp\/v2\/media?parent=3332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/horatech.shop\/pl\/wp-json\/wp\/v2\/categories?post=3332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/horatech.shop\/pl\/wp-json\/wp\/v2\/tags?post=3332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}