{"id":2906,"date":"2025-07-28T07:01:34","date_gmt":"2025-07-28T07:01:34","guid":{"rendered":"https:\/\/sertifikasiprofesi.id\/blog\/?p=2906"},"modified":"2025-07-28T07:01:35","modified_gmt":"2025-07-28T07:01:35","slug":"cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern","status":"publish","type":"post","link":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/","title":{"rendered":"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern"},"content":{"rendered":"\n<p>Dark mode kini menjadi fitur yang sangat populer dalam pengembangan antarmuka pengguna. Dengan mengaktifkan fitur ini, tampilan aplikasi atau website akan beralih ke latar gelap secara otomatis, tergantung preferensi pengguna atau waktu perangkat. <\/p>\n\n\n\n<p>Artikel ini membahas pengertian, manfaat, cara implementasi dark mode otomatis, serta penutup sebagai rangkuman.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#Pengertian_Fitur_Dark_Mode_Otomatis\" >Pengertian Fitur Dark Mode Otomatis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#Manfaat_Fitur_Dark_Mode_Otomatis\" >Manfaat Fitur Dark Mode Otomatis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#Cara_Membuat_Fitur_Dark_Mode_Otomatis\" >Cara Membuat Fitur Dark Mode Otomatis<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#1_Gunakan_Media_Query_CSS\" >1. Gunakan Media Query CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#2_Gunakan_JavaScript_Berdasarkan_Waktu_Opsional\" >2. Gunakan JavaScript Berdasarkan Waktu (Opsional)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#3_Tambahkan_Tombol_Manual_Opsional\" >3. Tambahkan Tombol Manual (Opsional)<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#Penutup\" >Penutup<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pengertian_Fitur_Dark_Mode_Otomatis\"><\/span>Pengertian Fitur Dark Mode Otomatis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Dark mode otomatis adalah fitur yang memungkinkan tampilan aplikasi atau website beralih ke mode gelap secara otomatis berdasarkan pengaturan sistem pengguna atau waktu tertentu. <\/p>\n\n\n\n<p>Fitur ini memanfaatkan media query CSS (<code>prefers-color-scheme<\/code>) atau skrip waktu untuk menyesuaikan antarmuka secara dinamis.<\/p>\n\n\n\n<p>Dark mode tidak hanya menjadi tren visual, tetapi juga mendukung kenyamanan pengguna, terutama saat menggunakan perangkat dalam kondisi cahaya redup.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-center\"><em><strong>Baca Juga: <a href=\"https:\/\/sertifikasiprofesi.id\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Manfaat_Fitur_Dark_Mode_Otomatis\"><\/span>Manfaat Fitur Dark Mode Otomatis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pahami beberapa manfaat Fitur Dark Mode Otomatis:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Ramah Mata:<\/strong> Mengurangi ketegangan mata saat penggunaan malam hari atau dalam kondisi minim cahaya.<\/li>\n\n\n\n<li><strong>Efisiensi Energi:<\/strong> Pada perangkat dengan layar OLED, dark mode membantu menghemat daya baterai.<\/li>\n\n\n\n<li><strong>Pengalaman Pengguna Lebih Baik:<\/strong> Memberikan opsi tampilan yang sesuai preferensi pengguna.<\/li>\n\n\n\n<li><strong>Modern dan Profesional:<\/strong> Tampilan dark mode meningkatkan kesan estetika dan teknologi mutakhir.<\/li>\n\n\n\n<li><strong>Meningkatkan Aksesibilitas:<\/strong> Memudahkan pengguna dengan sensitivitas cahaya untuk tetap nyaman menggunakan aplikasi atau situs web.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cara_Membuat_Fitur_Dark_Mode_Otomatis\"><\/span>Cara Membuat Fitur Dark Mode Otomatis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Simak langkah-langkah dalam membuat Fitur Dark Mode Otomati dibawah ini sebagai berikut:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Gunakan_Media_Query_CSS\"><\/span>1. Gunakan Media Query CSS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Untuk menyesuaikan mode berdasarkan sistem perangkat:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n  background-color: white;\n  color: black;\n}\n\n@media (prefers-color-scheme: dark) {\n  body {\n    background-color: #121212;\n    color: white;\n  }\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Gunakan_JavaScript_Berdasarkan_Waktu_Opsional\"><\/span>2. Gunakan JavaScript Berdasarkan Waktu (Opsional)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Jika ingin menerapkan dark mode otomatis berdasarkan waktu pengguna:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const now = new Date();\nconst hour = now.getHours();\n\nif (hour &gt;= 18 || hour &lt; 6) {\n  document.body.classList.add('dark-mode');\n}\n<\/code><\/pre>\n\n\n\n<p>Lalu, buat CSS untuk class <code>.dark-mode<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.dark-mode {\n  background-color: #121212;\n  color: white;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Tambahkan_Tombol_Manual_Opsional\"><\/span>3. Tambahkan Tombol Manual (Opsional)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Untuk fleksibilitas, Anda bisa menyediakan toggle manual agar pengguna bisa memilih:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button onclick=\"toggleMode()\"&gt;Toggle Dark Mode&lt;\/button&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>function toggleMode() {\n  document.body.classList.toggle('dark-mode');\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Penutup\"><\/span>Penutup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Menerapkan fitur dark mode otomatis tidak hanya meningkatkan estetika, tetapi juga kenyamanan pengguna. Dengan memanfaatkan CSS media query atau JavaScript sederhana, Anda dapat memberikan pengalaman pengguna yang lebih baik dan fleksibel. Fitur ini kini menjadi standar baru dalam desain modern, dan dapat dengan mudah diintegrasikan ke dalam proyek web atau aplikasi Anda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dark mode kini menjadi fitur yang sangat populer dalam pengembangan antarmuka pengguna. Dengan mengaktifkan fitur ini, tampilan aplikasi atau website akan beralih ke latar gelap secara otomatis, tergantung preferensi pengguna atau waktu perangkat. Artikel ini membahas pengertian, manfaat, cara implementasi dark mode otomatis, serta penutup sebagai rangkuman. Pengertian Fitur Dark Mode Otomatis Dark mode otomatis [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","inline_featured_image":false,"footnotes":""},"categories":[70],"tags":[293,291,292],"class_list":["post-2906","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sertifikasi-web-developer","tag-css-prefers-color-scheme","tag-dark-mode-otomatis","tag-tutorial-dark-mode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern - sertifikasiprofesi<\/title>\n<meta name=\"description\" content=\"Dark Mode Otomatis bukan hanya tren, tapi juga solusi UX modern. Ikuti tutorial lengkap membuat fitur ini secara otomatis sesuai sistem.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern - sertifikasiprofesi\" \/>\n<meta property=\"og:description\" content=\"Dark Mode Otomatis bukan hanya tren, tapi juga solusi UX modern. Ikuti tutorial lengkap membuat fitur ini secara otomatis sesuai sistem.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/\" \/>\n<meta property=\"og:site_name\" content=\"sertifikasiprofesi\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-28T07:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-28T07:01:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Profesi-14.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/e3316a4045caff62185868cc440acc0b\"},\"headline\":\"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern\",\"datePublished\":\"2025-07-28T07:01:34+00:00\",\"dateModified\":\"2025-07-28T07:01:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/\"},\"wordCount\":317,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Profesi-14.png\",\"keywords\":[\"css prefers-color-scheme\",\"dark mode otomatis\",\"tutorial dark mode\"],\"articleSection\":[\"Sertifikasi Web Developer\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/\",\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/\",\"name\":\"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern - sertifikasiprofesi\",\"isPartOf\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Profesi-14.png\",\"datePublished\":\"2025-07-28T07:01:34+00:00\",\"dateModified\":\"2025-07-28T07:01:35+00:00\",\"description\":\"Dark Mode Otomatis bukan hanya tren, tapi juga solusi UX modern. Ikuti tutorial lengkap membuat fitur ini secara otomatis sesuai sistem.\",\"breadcrumb\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#primaryimage\",\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Profesi-14.png\",\"contentUrl\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Profesi-14.png\",\"width\":600,\"height\":400,\"caption\":\"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sertifikasiprofesi.id\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#website\",\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/\",\"name\":\"sertifikasiprofesi\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sertifikasiprofesi.id\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#organization\",\"name\":\"sertifikasiprofesi\",\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2022\/04\/cropped-Logo-Black.png\",\"contentUrl\":\"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2022\/04\/cropped-Logo-Black.png\",\"width\":209,\"height\":58,\"caption\":\"sertifikasiprofesi\"},\"image\":{\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/e3316a4045caff62185868cc440acc0b\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/sertifikasiprofesi.id\"],\"url\":\"https:\/\/sertifikasiprofesi.id\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern - sertifikasiprofesi","description":"Dark Mode Otomatis bukan hanya tren, tapi juga solusi UX modern. Ikuti tutorial lengkap membuat fitur ini secara otomatis sesuai sistem.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/","og_locale":"en_US","og_type":"article","og_title":"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern - sertifikasiprofesi","og_description":"Dark Mode Otomatis bukan hanya tren, tapi juga solusi UX modern. Ikuti tutorial lengkap membuat fitur ini secara otomatis sesuai sistem.","og_url":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/","og_site_name":"sertifikasiprofesi","article_published_time":"2025-07-28T07:01:34+00:00","article_modified_time":"2025-07-28T07:01:35+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Profesi-14.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#article","isPartOf":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/"},"author":{"name":"admin","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/e3316a4045caff62185868cc440acc0b"},"headline":"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern","datePublished":"2025-07-28T07:01:34+00:00","dateModified":"2025-07-28T07:01:35+00:00","mainEntityOfPage":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/"},"wordCount":317,"commentCount":0,"publisher":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/#organization"},"image":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#primaryimage"},"thumbnailUrl":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Profesi-14.png","keywords":["css prefers-color-scheme","dark mode otomatis","tutorial dark mode"],"articleSection":["Sertifikasi Web Developer"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/","url":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/","name":"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern - sertifikasiprofesi","isPartOf":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#primaryimage"},"image":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#primaryimage"},"thumbnailUrl":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Profesi-14.png","datePublished":"2025-07-28T07:01:34+00:00","dateModified":"2025-07-28T07:01:35+00:00","description":"Dark Mode Otomatis bukan hanya tren, tapi juga solusi UX modern. Ikuti tutorial lengkap membuat fitur ini secara otomatis sesuai sistem.","breadcrumb":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#primaryimage","url":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Profesi-14.png","contentUrl":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Profesi-14.png","width":600,"height":400,"caption":"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern"},{"@type":"BreadcrumbList","@id":"https:\/\/sertifikasiprofesi.id\/blog\/cara-praktis-membuat-dark-mode-otomatis-di-situs-web-modern\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sertifikasiprofesi.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern"}]},{"@type":"WebSite","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#website","url":"https:\/\/sertifikasiprofesi.id\/blog\/","name":"sertifikasiprofesi","description":"","publisher":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sertifikasiprofesi.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#organization","name":"sertifikasiprofesi","url":"https:\/\/sertifikasiprofesi.id\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2022\/04\/cropped-Logo-Black.png","contentUrl":"https:\/\/sertifikasiprofesi.id\/blog\/wp-content\/uploads\/2022\/04\/cropped-Logo-Black.png","width":209,"height":58,"caption":"sertifikasiprofesi"},"image":{"@id":"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/e3316a4045caff62185868cc440acc0b","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sertifikasiprofesi.id\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/sertifikasiprofesi.id"],"url":"https:\/\/sertifikasiprofesi.id\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/posts\/2906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/comments?post=2906"}],"version-history":[{"count":1,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/posts\/2906\/revisions"}],"predecessor-version":[{"id":2908,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/posts\/2906\/revisions\/2908"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/media\/2907"}],"wp:attachment":[{"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/media?parent=2906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/categories?post=2906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sertifikasiprofesi.id\/blog\/wp-json\/wp\/v2\/tags?post=2906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}