{"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\/sv\/hur-man-morklagger-en-sida-med-javascript\/","title":{"rendered":"S\u00e5 h\u00e4r m\u00f6rkl\u00e4gger du en sida med Javascript"},"content":{"rendered":"<p>M\u00f6rkt l\u00e4ge har blivit allt mer popul\u00e4rt i gr\u00e4nssnittsdesign, vilket ger visuell komfort och l\u00e5ter anv\u00e4ndare v\u00e4lja det tema de f\u00f6redrar. <\/p>\n\n\n\n<p>I den h\u00e4r artikeln kommer du att l\u00e4ra dig hur du skapar m\u00f6rkt l\u00e4ge p\u00e5 en sida med JavaScript, HTML, CSS och moderna webbtekniker.<\/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>Komplett handledning<\/em> fr\u00e5n m\u00f6rkt l\u00e4ge<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introduktion till m\u00f6rkt l\u00e4ge<\/h2>\n\n\n\n<p>M\u00f6rkt l\u00e4ge blir allt viktigare i digital design, vilket \u00e5terspeglar en f\u00f6r\u00e4ndring i anv\u00e4ndarpreferenser. Det hj\u00e4lper till att minska p\u00e5frestningen p\u00e5 \u00f6gonen i svagt ljus, vilket g\u00f6r l\u00e4sningen bekv\u00e4mare.<\/p>\n\n\n\n<p>Dessutom f\u00f6rbrukar mobila enheter mindre batteri n\u00e4r de anv\u00e4nder m\u00f6rkt l\u00e4ge, s\u00e4rskilt p\u00e5 OLED-sk\u00e4rmar. Detta gynnar de som anv\u00e4nder enheten under l\u00e5nga perioder.<\/p>\n\n\n\n<p>Med s\u00e5 m\u00e5nga f\u00f6rdelar erbjuder m\u00e5nga applikationer och webbplatser nu detta alternativ, vilket g\u00f6r att anv\u00e4ndarna kan anpassa sina upplevelser. M\u00f6rkt l\u00e4ge \u00e4r inte bara visuellt tilltalande, utan det g\u00f6r ocks\u00e5 surfandet enklare och roligare.<\/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>Introduktion till m\u00f6rkt l\u00e4ge<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Varf\u00f6r adoptera m\u00f6rkt l\u00e4ge?<\/strong><\/h3>\n\n\n\n<p>Att anv\u00e4nda m\u00f6rkt l\u00e4ge ger en mer visuellt bekv\u00e4m upplevelse, s\u00e4rskilt i milj\u00f6er med svagt ljus. Det till\u00e5ter ocks\u00e5 anv\u00e4ndare att v\u00e4lja det tema som passar dem b\u00e4st, vilket g\u00f6r navigeringen mer personlig.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">F\u00f6rdelar med m\u00f6rkt l\u00e4ge<\/h2>\n\n\n\n<p>Att implementera m\u00f6rkt l\u00e4ge har flera f\u00f6rdelar. Det viktigaste \u00e4r att f\u00f6rb\u00e4ttra anv\u00e4ndarupplevelsen, vilket g\u00f6r l\u00e4sningen l\u00e4ttare, s\u00e4rskilt i m\u00f6rka milj\u00f6er. <\/p>\n\n\n\n<p>Text p\u00e5 en m\u00f6rk bakgrund minskar visuell anstr\u00e4ngning och \u00f6kar anv\u00e4ndarens engagemang. <\/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>f\u00f6rdelarna med m\u00f6rkt l\u00e4ge<\/em><\/figcaption><\/figure>\n\n\n\n<p>Forskning visar att m\u00e4nniskor spenderar mer tid p\u00e5 webbplatser som erbjuder denna funktionalitet, vilket indikerar att varum\u00e4rken som anv\u00e4nder m\u00f6rkt l\u00e4ge \u00e4r mer anpassade till sina kunders behov.<\/p>\n\n\n\n<p>En annan betydande f\u00f6rdel \u00e4r batteribesparingar p\u00e5 mobila enheter med OLED-sk\u00e4rmar, eftersom de f\u00f6rbrukar mindre energi i m\u00f6rkt l\u00e4ge. <\/p>\n\n\n\n<p>Dessa besparingar g\u00f6r m\u00f6rkt l\u00e4ge till ett smart val f\u00f6r anv\u00e4ndare och utvecklare.<\/p>\n\n\n\n<p><strong>F\u00f6rdelar med m\u00f6rkt l\u00e4ge:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visuell komfort:<\/strong> Minskar \u00f6gonbelastningen i milj\u00f6er med svagt ljus.<\/li>\n\n\n\n<li><strong>\u00d6kat engagemang:<\/strong> Anv\u00e4ndare stannar l\u00e4ngre p\u00e5 sidor med m\u00f6rkt l\u00e4ge.<\/li>\n\n\n\n<li><strong>Batteribesparing:<\/strong> Minskar f\u00f6rbrukningen p\u00e5 enheter med OLED-sk\u00e4rmar.<\/li>\n\n\n\n<li><strong>Anpassning:<\/strong> Det ger anv\u00e4ndarna ett val som passar deras preferenser.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Anv\u00e4nder CSS-variabler och LocalStorage<\/h2>\n\n\n\n<p>CSS-variabler \u00e4r ett praktiskt s\u00e4tt att lagra v\u00e4rden och g\u00f6r det l\u00e4ttare att anpassa designen. Du kan till exempel anv\u00e4nda <code>--bg-gr\u00e5-ljus<\/code> f\u00f6r att st\u00e4lla in bakgrundsf\u00e4rgen ljus och <code>--text-m\u00f6rk<\/code> f\u00f6r m\u00f6rk text. Dessa variabler g\u00f6r det enklare och mer effektivt att v\u00e4xla mellan ljusa och m\u00f6rka teman.<\/p>\n\n\n\n<p>DE <code>localStorage<\/code> \u00e4r ett kraftfullt verktyg f\u00f6r att spara data i webbl\u00e4saren. Det g\u00f6r att anv\u00e4ndarnas preferenser, s\u00e5som val av tema, kan sparas och automatiskt till\u00e4mpas p\u00e5 framtida bes\u00f6k p\u00e5 webbplatsen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Grundl\u00e4ggande struktur f\u00f6r HTML<\/h2>\n\n\n\n<p>En v\u00e4lorganiserad HTML-struktur \u00e4r avg\u00f6rande f\u00f6r att implementera m\u00f6rkt l\u00e4ge. Element som temabyteknappar och tydliga texter hj\u00e4lper till med webbplatsnavigering och anv\u00e4ndbarhet.<\/p>\n\n\n\n<p><strong>V\u00e4sentliga element:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><button><\/code>: Knapp f\u00f6r att v\u00e4xla mellan ljust och m\u00f6rkt l\u00e4ge.<\/li>\n\n\n\n<li><code>&lt;h1&gt;<\/code>: Sidans huvudtitel.<\/li>\n\n\n\n<li><code>&lt;p&gt;<\/code>: Textstycken som g\u00f6r det l\u00e4ttare att l\u00e4sa.<\/li>\n\n\n\n<li><code>&lt;div&gt;<\/code>: Avdelningar f\u00f6r gruppering och styling av inneh\u00e5ll.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Styling med CSS<\/h2>\n\n\n\n<p>Att v\u00e4lja r\u00e4tt f\u00e4rger \u00e4r nyckeln till att g\u00f6ra m\u00f6rkt l\u00e4ge roligt. Anv\u00e4nd klasser som <code>.ljus<\/code> e <code>.m\u00f6rk<\/code> underl\u00e4ttar v\u00e4xling mellan teman.<\/p>\n\n\n\n<p><strong>Exemplo de Cores:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Huvudtext:<\/strong> #000000 i ljust tema, #FFFFFF i m\u00f6rkt tema.<\/li>\n\n\n\n<li><strong>Botten:<\/strong> #FFFFFF i ljust tema, #121212 i m\u00f6rkt tema.<\/li>\n\n\n\n<li><strong>L\u00e4nkar:<\/strong> #007BFF i ljust tema, #82B1FF i m\u00f6rkt tema.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Implementering av m\u00f6rkt l\u00e4ge med JavaScript<\/h2>\n\n\n\n<p>F\u00f6r att skapa m\u00f6rkt l\u00e4ge med JavaScript m\u00e5ste du manipulera DOM genom att l\u00e4gga till klasser i elementet <code>kropp<\/code> av sidan. Det f\u00f6rsta steget \u00e4r att kontrollera statusen f\u00f6r temat i <code>localStorage<\/code>, vilket s\u00e4kerst\u00e4ller att temat som valts av anv\u00e4ndaren bibeh\u00e5lls efter att sidan har laddats om.<\/p>\n\n\n\n<p>En grundl\u00e4ggande kod f\u00f6r att implementera m\u00f6rkt l\u00e4ge skulle vara:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (localStorage.getItem('darkMode') === 'enabled') {\n    document.body.classList.add('m\u00f6rkt-l\u00e4ge');\n} annat {\n    document.body.classList.remove('dark-mode');\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Eventhantering och CSS-klasser<\/h2>\n\n\n\n<p>M\u00f6rkt l\u00e4ge \u00e4r aktiverat med JavaScript med hj\u00e4lp av h\u00e4ndelseavlyssnare, som uppt\u00e4cker anv\u00e4ndar\u00e5tg\u00e4rder som knappklick f\u00f6r att \u00e4ndra tema.<\/p>\n\n\n\n<p><strong>Grundl\u00e4ggande steg:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>V\u00e4lj knappen f\u00f6r att \u00e4ndra tema.<\/li>\n\n\n\n<li>L\u00e4gg till en h\u00e4ndelseavlyssnare f\u00f6r att uppt\u00e4cka klick.<\/li>\n\n\n\n<li>\u00c4ndra temaklass p\u00e5 sidan.<\/li>\n<\/ol>\n\n\n\n<p>Att manipulera klasser i JavaScript \u00e4r grundl\u00e4ggande f\u00f6r att implementera m\u00f6rkt l\u00e4ge. Anv\u00e4nder <code>klasslista<\/code>, kan du v\u00e4xla mellan teman med l\u00e4tthet.<\/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\">Testa och f\u00f6rb\u00e4ttra implementeringen<\/h2>\n\n\n\n<p>Det \u00e4r viktigt att testa din m\u00f6rka l\u00e4gesimplementering f\u00f6r att s\u00e4kerst\u00e4lla att allt fungerar korrekt. Kontrollera att temat som valts av anv\u00e4ndaren till\u00e4mpas korrekt n\u00e4r sidan laddas och att byte av teman g\u00e5r smidigt.<\/p>\n\n\n\n<p><strong>M\u00f6jliga f\u00f6rb\u00e4ttringar:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Implementera mjuka \u00f6verg\u00e5ngar mellan teman f\u00f6r en trevligare visuell upplevelse.<\/li>\n\n\n\n<li>Erbjud f\u00e4rganpassningsalternativ, s\u00e5 att anv\u00e4ndare kan v\u00e4lja mellan olika paletter.<\/li>\n\n\n\n<li>Inkludera tillg\u00e4nglighetsfunktioner, som justeringar f\u00f6r f\u00e4rgblinda personer eller personer med synsv\u00e5righeter.<\/li>\n<\/ul>\n\n\n\n<p><strong>F\u00f6rdelar med f\u00f6rb\u00e4ttringar:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sl\u00e4ta \u00f6verg\u00e5ngar:<\/strong> De f\u00f6rb\u00e4ttrar anv\u00e4ndbarheten och minskar visuellt slitage.<\/li>\n\n\n\n<li><strong>Anpassningsbara paletter:<\/strong> \u00d6ka anv\u00e4ndarn\u00f6jdheten och anpassning av gr\u00e4nssnittet.<\/li>\n\n\n\n<li><strong>Tillg\u00e4nglighet:<\/strong> Det g\u00f6r upplevelsen mer inkluderande och m\u00f6ter olika visuella behov.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Slutsats<\/h2>\n\n\n\n<p>Att anta m\u00f6rkt l\u00e4ge g\u00e5r ut\u00f6ver den visuella aspekten; det f\u00f6rb\u00e4ttrar l\u00e4sbarheten, minskar tr\u00f6tthet i \u00f6gonen och m\u00f6jligg\u00f6r anpassning som b\u00e4ttre m\u00f6ter anv\u00e4ndarnas behov. <\/p>\n\n\n\n<p>Med HTML, CSS och JavaScript kan du f\u00f6rvandla webbupplevelsen och erbjuda en mer flexibel design anpassad till den digitala framtiden.<\/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\/sv\/wp-json\/wp\/v2\/posts\/3332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/horatech.shop\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/horatech.shop\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/horatech.shop\/sv\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/horatech.shop\/sv\/wp-json\/wp\/v2\/comments?post=3332"}],"version-history":[{"count":2,"href":"https:\/\/horatech.shop\/sv\/wp-json\/wp\/v2\/posts\/3332\/revisions"}],"predecessor-version":[{"id":3787,"href":"https:\/\/horatech.shop\/sv\/wp-json\/wp\/v2\/posts\/3332\/revisions\/3787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/horatech.shop\/sv\/wp-json\/wp\/v2\/media\/3334"}],"wp:attachment":[{"href":"https:\/\/horatech.shop\/sv\/wp-json\/wp\/v2\/media?parent=3332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/horatech.shop\/sv\/wp-json\/wp\/v2\/categories?post=3332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/horatech.shop\/sv\/wp-json\/wp\/v2\/tags?post=3332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}