{"id":9,"date":"2026-05-03T15:52:30","date_gmt":"2026-05-03T15:52:30","guid":{"rendered":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/dark-mode\/"},"modified":"2026-05-03T15:52:30","modified_gmt":"2026-05-03T15:52:30","slug":"dark-mode","status":"publish","type":"post","link":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/dark-mode\/","title":{"rendered":"Dark Mode"},"content":{"rendered":"\n<p class=\"is-lede\">Auto-detects your reader&#8217;s system preference, with an optional manual toggle in the navigation. Designed to feel like a thoughtful magazine, not a Slack screenshot.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-it-works\">How it works<\/h2>\n\n\n\n<p>When Dark Mode is enabled, the plugin adds a tiny CSS variable override that swaps the cream paper backgrounds for deep ink, and inks for soft cream. Every component that uses CSS variables (which is everything in the theme) flips automatically.<\/p>\n\n\n\n<p>The mode follows the visitor&#8217;s system setting via the <code>prefers-color-scheme<\/code> media query. A reader who has macOS set to Dark sees the dark version automatically; a reader on Light sees the light version. No flash, no JavaScript-driven hydration delay.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"enable\">Enabling Dark Mode<\/h2>\n\n\n\n<p>Go to <strong>Appearance \u2192 Customize \u2192 Pro Options \u2192 Dark Mode<\/strong>. Three settings:<\/p>\n\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mode<\/strong> \u2014 Off \/ Auto \/ Always Dark.<\/li>\n<li><strong>Show toggle<\/strong> \u2014 display a sun\/moon button in the navigation that lets readers manually override their system preference.<\/li>\n<li><strong>Toggle position<\/strong> \u2014 left, right, or in the mobile menu only.<\/li>\n<\/ul>\n\n\n\n\n<p>Manual toggle preference persists in <code>localStorage<\/code>. So if a reader on a Light system manually switches to Dark, the choice sticks for that browser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"customizing\">Customizing the dark palette<\/h2>\n\n\n\n<p>The dark palette is a set of CSS custom properties. To override any value, add custom CSS via <strong>Customize \u2192 Additional CSS<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html[data-theme=\"dark\"] {\n    --paper: #0f0f10;\n    --paper-deep: #1a1a1c;\n    --ink: #f5f0e8;\n    --accent: #e8c890;\n}<\/code><\/pre>\n\n\n\n<p>You can also target the system-preference variant if you don&#8217;t want manual override styling to differ:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (prefers-color-scheme: dark) {\n    html:not([data-theme=\"light\"]) {\n        --paper: #0f0f10;\n    }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"images\">Images in dark mode<\/h2>\n\n\n\n<p>Photographs look fine on dark backgrounds, but flat illustrations and logos sometimes don&#8217;t. The plugin adds a <code>filter: brightness(.92)<\/code> to images by default to slightly soften their punch in dark mode \u2014 this is a subtle effect and can be disabled with:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html[data-theme=\"dark\"] .fr-card-image,\nhtml[data-theme=\"dark\"] .fr-hero-image {\n    filter: none;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"performance\">Performance<\/h2>\n\n\n\n<p>The dark mode CSS is roughly 4 KB gzipped. It&#8217;s loaded as a separate file (so the cache invalidates independently from the main stylesheet) and it&#8217;s only enqueued when Dark Mode is enabled in the Customizer. There&#8217;s no flash-of-light-mode (FOUC) \u2014 the mode is detected before the body renders, via a small inline script in <code>&lt;head&gt;<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Auto-detects your reader&#8217;s system preference, with an optional manual toggle in the navigation. Designed to feel like a thoughtful magazine, not a Slack screens<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-pro-features"],"_links":{"self":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":0,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"wp:attachment":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}