{"id":10693,"date":"2023-08-13T17:49:00","date_gmt":"2023-08-13T15:49:00","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=10693"},"modified":"2023-08-13T11:50:42","modified_gmt":"2023-08-13T09:50:42","slug":"css-only-dark-mode-without-js-simon-dalvai","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2023\/08\/13\/css-only-dark-mode-without-js-simon-dalvai\/","title":{"rendered":"CSS only dark mode without JS – Simon Dalvai"},"content":{"rendered":"\n
\n

This css one liner can define how your site looks on a device with dark mode set in the browser settings.<\/p>\n\n\n\n

@media (prefers-color-scheme: dark)<\/code><\/pre>\n\n\n\n
Or if your main style is dark mode, you can define how the light mode will look.<\/p>\n\n\n\n
@media (prefers-color-scheme: light)<\/code><\/pre>\nSource: CSS only dark mode without JS – Simon Dalvai<\/a><\/em><\/cite><\/blockquote>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\n
Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"quote","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","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}},"categories":[46],"tags":[324],"class_list":["post-10693","post","type-post","status-publish","format-quote","hentry","category-web","tag-css","post_format-post-format-quote"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-2Mt","jetpack-related-posts":[{"id":5369,"url":"https:\/\/monodes.com\/predaelli\/2019\/03\/19\/8-useful-css-tricks-parallax-images-sticky-footers-and-more\/","url_meta":{"origin":10693,"position":0},"title":"8 useful CSS tricks: Parallax images, sticky footers and more","author":"Paolo Redaelli","date":"2019-03-19","format":"link","excerpt":"8 useful CSS tricks: Parallax images, sticky footers and more This article shares some of my most satisfying \u201cah-hah!\u201d moments learning CSS, and I hope it can prompt some \u201cah-hah!\u201d moments for you too. Sticky Footer Zoom-on-Hover Images Instant Night Mode Custom Bullet Points Parallax Images Animation with Cropped Images\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7689,"url":"https:\/\/monodes.com\/predaelli\/2020\/10\/17\/11-frontend-tricks-that-most-frontend-developers-dont-know-about-by-daniel-anderson-javascript-in-plain-english-oct-2020-medium\/","url_meta":{"origin":10693,"position":1},"title":"11 Frontend tricks that most Frontend Developers don\u2019t know about | by Daniel Anderson | JavaScript In Plain English | Oct, 2020 | Medium","author":"Paolo Redaelli","date":"2020-10-17","format":false,"excerpt":"Interesting tricks you can do with HTML\/JS\/CSS Source: 11 Frontend tricks that most Frontend Developers don\u2019t know about | by Daniel Anderson | JavaScript In Plain English | Oct, 2020 | Medium 11 Frontend tricks that most Frontend Developers don\u2019t know about Interesting tricks you can do with HTML\/JS\/CSS Below\u2026","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"Image for post","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2020\/10\/10U-rN1M_Vh0a2Cs_TAnGKw.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":8272,"url":"https:\/\/monodes.com\/predaelli\/2021\/03\/26\/2-css-tricks-you-must-know-2021\/","url_meta":{"origin":10693,"position":2},"title":"2 CSS Tricks You Must Know 2021","author":"Paolo Redaelli","date":"2021-03-26","format":false,"excerpt":"Taken from https:\/\/www.youtube.com\/watch?v=dVnzbPOeDYk background-blend-modeclip-path (Clippy - Bennett Feely may be useful here) The video from CodeWellTech propose also Google Fonts. But we should lower our dependency on the great mother-in-law.","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10748,"url":"https:\/\/monodes.com\/predaelli\/2023\/08\/30\/my-little-printer-friendly-css\/","url_meta":{"origin":10693,"position":3},"title":"My little printer-friendly CSS","author":"Paolo Redaelli","date":"2023-08-30","format":false,"excerpt":"Here is my little \"Printer friendly CSS\" that I add to each and every page using Simple Custom CSS and JS \/* override styles when printing *\/ @media print { @page { margin: 2cm; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } } \/* target the first\u2026","rel":"","context":"In "Tricks"","block_context":{"text":"Tricks","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/tricks\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5071,"url":"https:\/\/monodes.com\/predaelli\/2018\/12\/18\/are-your-js-project-fat\/","url_meta":{"origin":10693,"position":4},"title":"Are your js project fat?","author":"Paolo Redaelli","date":"2018-12-18","format":false,"excerpt":"https:\/\/css-tricks.com\/how-to-worry-about-npm-package-weight\/ tells you how to curb your import madness","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":11412,"url":"https:\/\/monodes.com\/predaelli\/2024\/03\/05\/css-for-printing-to-paper\/","url_meta":{"origin":10693,"position":5},"title":"CSS for printing to paper","author":"Paolo Redaelli","date":"2024-03-05","format":false,"excerpt":"CSS for printing to paper I do like articles explaining how to use CSS for printing! CSS for printing to paper Introduction Sample files @page @media print Width, height, margin, and padding Element positioning Multi-page documents with repeating elements Portrait \/ Landscape mode Data source Essentials cheatsheet Introduction At work,\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/10693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=10693"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/10693\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=10693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=10693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=10693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}