{"id":3331,"date":"2019-10-15T10:26:22","date_gmt":"2019-10-15T04:56:22","guid":{"rendered":"http:\/\/reliablesoftwares.com\/blog\/?p=3331"},"modified":"2019-10-15T10:28:09","modified_gmt":"2019-10-15T04:58:09","slug":"enable-dark-mode-in-a-website-using-css","status":"publish","type":"post","link":"http:\/\/reliablesoftwares.com\/blog\/enable-dark-mode-in-a-website-using-css\/","title":{"rendered":"Enable Dark mode in a website using CSS"},"content":{"rendered":"<p><a href=\"http:\/\/reliablesoftwares.com\/blog\/enable-dark-mode-in-a-website-using-css\/darkmode-ios\/\" rel=\"attachment wp-att-3332\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3332\" data-permalink=\"http:\/\/reliablesoftwares.com\/blog\/enable-dark-mode-in-a-website-using-css\/darkmode-ios\/\" data-orig-file=\"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2019\/10\/darkmode-ios.jpg?fit=1200%2C1137\" data-orig-size=\"1200,1137\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"darkmode ios\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2019\/10\/darkmode-ios.jpg?fit=800%2C758\" class=\"alignleft size-medium wp-image-3332\" src=\"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2019\/10\/darkmode-ios.jpg?resize=300%2C284\" alt=\"\" width=\"300\" height=\"284\" srcset=\"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2019\/10\/darkmode-ios.jpg?resize=300%2C284 300w, https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2019\/10\/darkmode-ios.jpg?resize=768%2C728 768w, https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2019\/10\/darkmode-ios.jpg?resize=1024%2C970 1024w, https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2019\/10\/darkmode-ios.jpg?w=1200 1200w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>In the latest iOS and Android versions now use can enable dark mode on their phones. To make sure your site is compatible with it just do this small change in your CSS:<\/p>\n<pre>@media (prefers-color-scheme: dark) {\r\nbody {\r\nbackground-color: #444;\r\ncolor: #e4e4e4;\r\n}\r\na {\r\ncolor: #e39777;\r\n}\r\nimg {\r\nfilter: grayscale(30%);\r\n}\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>This works in Firefox, Safari, and Chrome among other browsers.<\/p>\n<p>Try it out and let me know if any issues.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the latest iOS and Android versions now use can enable dark mode on their phones. To make sure your<\/p>\n","protected":false},"author":1,"featured_media":3332,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3,8],"tags":[584,656],"class_list":["post-3331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-programming","tag-css","tag-dark-mode"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/pgLsB5-RJ","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3659,"url":"http:\/\/reliablesoftwares.com\/blog\/the-hidden-power-of-dark-mode-not-just-about-looks\/","url_meta":{"origin":3331,"position":0},"title":"The Hidden Power of Dark Mode: Not Just About Looks","author":"saifuddin","date":"November 27, 2025","format":false,"excerpt":"Dark Mode started as a design trend \u2014 a stylish alternative to bright user interfaces. Today, it has become a standard feature on smartphones, operating systems, and apps. Whether you use Android, iOS, macOS, Windows, or ChromeOS, chances are you\u2019ve seen a button somewhere that says \u201cSwitch to Dark Mode.\u201d\u2026","rel":"","context":"In &quot;Article&quot;","block_context":{"text":"Article","link":"http:\/\/reliablesoftwares.com\/blog\/category\/article\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2025\/11\/darkmode.png?fit=1200%2C800&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2025\/11\/darkmode.png?fit=1200%2C800&resize=350%2C200 1x, https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2025\/11\/darkmode.png?fit=1200%2C800&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2025\/11\/darkmode.png?fit=1200%2C800&resize=700%2C400 2x, https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2025\/11\/darkmode.png?fit=1200%2C800&resize=1050%2C600 3x"},"classes":[]},{"id":2975,"url":"http:\/\/reliablesoftwares.com\/blog\/youtube-vanced-with-background-play-dark-mode-and-no-ads-for-android\/","url_meta":{"origin":3331,"position":1},"title":"&#8216;YouTube Vanced&#8217; with background play, Dark Mode, and No ads for Android","author":"saifuddin","date":"August 14, 2018","format":false,"excerpt":"Number one reason I love modified YouTube Vanced is the ability to play even when the app is in the background. Sometimes you use youtube to only listen to things or while watching a video you just need that few seconds to reply to a message and you don't want\u2026","rel":"","context":"In &quot;App&quot;","block_context":{"text":"App","link":"http:\/\/reliablesoftwares.com\/blog\/category\/blog\/app\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2018\/07\/YouTube-Vanced.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3656,"url":"http:\/\/reliablesoftwares.com\/blog\/pixel-10-breaks-the-wall-android-to-iphone-airdrop-sharing-is-finally-here\/","url_meta":{"origin":3331,"position":2},"title":"Pixel 10 Breaks the Wall: Android-to-iPhone AirDrop Sharing Is Finally Here","author":"saifuddin","date":"November 25, 2025","format":false,"excerpt":"If you\u2019re into smartphones, you\u2019ll know how seamless file sharing between devices is one of the things that makes owning one ecosystem (say Apple) feel compelling. The problem: Android and iPhone have long operated as walled gardens.Now, with the launch of the Google\u202fPixel\u202f10, that\u2019s beginning to change. What\u2019s actually new\u2026","rel":"","context":"In &quot;Android&quot;","block_context":{"text":"Android","link":"http:\/\/reliablesoftwares.com\/blog\/category\/blog\/android\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2025\/11\/google-pixel-10-ga10240-ga10243-us-indigo.jpeg?fit=337%2C400&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3800,"url":"http:\/\/reliablesoftwares.com\/blog\/never-forget-a-birthday-or-any-event-again\/","url_meta":{"origin":3331,"position":3},"title":"Never Forget a Birthday or any event Again","author":"saifuddin","date":"August 18, 2026","format":false,"excerpt":"You did not forget them \u2014 you forgot the date. Admonere tracks every birthday and anniversary on the Gregorian and Hijri calendars, then sends your greeting in your name on the morning it matters. Free to start, on web, Android and iOS.","rel":"","context":"In &quot;Android&quot;","block_context":{"text":"Android","link":"http:\/\/reliablesoftwares.com\/blog\/category\/blog\/android\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_q9z7d0q9z7d0q9z7-scaled.png?fit=1200%2C675&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_q9z7d0q9z7d0q9z7-scaled.png?fit=1200%2C675&resize=350%2C200 1x, https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_q9z7d0q9z7d0q9z7-scaled.png?fit=1200%2C675&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_q9z7d0q9z7d0q9z7-scaled.png?fit=1200%2C675&resize=700%2C400 2x, https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2026\/08\/Gemini_Generated_Image_q9z7d0q9z7d0q9z7-scaled.png?fit=1200%2C675&resize=1050%2C600 3x"},"classes":[]},{"id":3733,"url":"http:\/\/reliablesoftwares.com\/blog\/gravity-flip-one-tap-two-surfaces-800-pixels-per-second-of-neon-death\/","url_meta":{"origin":3331,"position":4},"title":"Gravity Flip: One Tap. Two Surfaces. 800 Pixels Per Second of Neon Death.","author":"saifuddin","date":"April 24, 2026","format":false,"excerpt":"You run. You die. You run again. Gravity Flip is an endless auto-runner built on a single mechanic: tap the screen to flip gravity. Your character hurtles through a neon tunnel, stuck to the floor. Obstacles appear. You tap. Gravity inverts. You launch to the ceiling. More obstacles. Tap again.\u2026","rel":"","context":"In &quot;AI&quot;","block_context":{"text":"AI","link":"http:\/\/reliablesoftwares.com\/blog\/category\/blog\/ai\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2026\/04\/gravityflip.jpeg?fit=540%2C1200&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2026\/04\/gravityflip.jpeg?fit=540%2C1200&resize=350%2C200 1x, https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2026\/04\/gravityflip.jpeg?fit=540%2C1200&resize=525%2C300 1.5x"},"classes":[]},{"id":3687,"url":"http:\/\/reliablesoftwares.com\/blog\/liquid-pour-the-most-satisfying-physics-game-on-your-phone\/","url_meta":{"origin":3331,"position":5},"title":"Liquid Pour: The Most Satisfying Physics Game on Your Phone","author":"saifuddin","date":"April 10, 2026","format":false,"excerpt":"Tilt your phone. Watch the liquid move. Fill to the line. Don't spill. It sounds simple. It is simple. And it's one of the most satisfying mobile experiences you can have. The Concept Liquid Pour is a precision pouring game. Your phone becomes a vessel. Two containers sit on screen\u2026","rel":"","context":"In &quot;AI&quot;","block_context":{"text":"AI","link":"http:\/\/reliablesoftwares.com\/blog\/category\/blog\/ai\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2026\/04\/liquid_pour.jpeg?fit=540%2C1200&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2026\/04\/liquid_pour.jpeg?fit=540%2C1200&resize=350%2C200 1x, https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2026\/04\/liquid_pour.jpeg?fit=540%2C1200&resize=525%2C300 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/reliablesoftwares.com\/blog\/wp-content\/uploads\/2019\/10\/darkmode-ios.jpg?fit=1200%2C1137","_links":{"self":[{"href":"http:\/\/reliablesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/3331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/reliablesoftwares.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/reliablesoftwares.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/reliablesoftwares.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/reliablesoftwares.com\/blog\/wp-json\/wp\/v2\/comments?post=3331"}],"version-history":[{"count":3,"href":"http:\/\/reliablesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/3331\/revisions"}],"predecessor-version":[{"id":3335,"href":"http:\/\/reliablesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/3331\/revisions\/3335"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/reliablesoftwares.com\/blog\/wp-json\/wp\/v2\/media\/3332"}],"wp:attachment":[{"href":"http:\/\/reliablesoftwares.com\/blog\/wp-json\/wp\/v2\/media?parent=3331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/reliablesoftwares.com\/blog\/wp-json\/wp\/v2\/categories?post=3331"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/reliablesoftwares.com\/blog\/wp-json\/wp\/v2\/tags?post=3331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}