Скачать или смотреть Automatic Light/Dark Mode in GenerateBlocks (should this be standard practice in 2025?)

Designing for both light and dark mode is way easier than it looks — the browser does most of the heavy lifting if you wire things up correctly. In this tutorial, I show you how to build a light/dark color system in GeneratePress + GenerateBlocks that automatically switches using system preferences, plus how to plan it in Figma and handle edge cases.

You’ll learn how to:

Plan light/dark palettes in Figma with variables (surface, text, border, brand)
Map those colors to the GeneratePress color palette
Enable automatic theming with a single CSS declaration:
:root { color-scheme: light dark; }
Use the new light-dark() CSS function to swap values per mode (e.g. --surface: light-dark(#fff,#000))
Keep certain colors constant (e.g. brand or button text) with dedicated swatches
Preview quickly by toggling your OS theme while working in the editor

What we build

A section styled with palette variables (surface, text, border, brand)
Global CSS that auto-switches between light and dark based on user preference
Practical fixes for common pitfalls (e.g. button text that stays accessible in both modes)


💻 Visit Our Website: https://theadmin.bar/yt-tab

🗨 Join Our Free Community: https://theadmin.bar/yt-community

📨 Get the Best of The Admin Bar Delivered: https://theadmin.bar/yt-tfc

🔁 Sell More Care Plans: https://theadmin.bar/yt-wom

🧮 Use My Website Price Calculator: https://theadmin.bar/yt-calculator

📜 Get My Proposal Template: https://theadmin.bar/yt-proposal

☑️ Get More Done with My Checklists: https://theadmin.bar/yt-checklists

🔴 Live Event Schedule: https://theadmin.bar/yt-events

🔧 The Tools I Use: https://theadmin.bar/yt-tools

⚡ My Agency, OGAL Web Design: https://theadmin.bar/yt-agency