Automatic Light/Dark Mode in GenerateBlocks  ## Metadata - Author: [[The Admin Bar]] - Full Title: Automatic Light/Dark Mode in GenerateBlocks - Category: #articles - Document Note: ````markdown --- tags: [Assign relevant tags or keywords to the notee to facilitate organization and retrieval. Add a # before each tag. Tags cannot have special characters. Do not use the tag #articles] - #wordpress - #generatepress - #generateblocks - #css - #colorscheme - #preferscolorscheme - #lightdark - #designtokens - #figma - #accessibility - #a11y - #education - #opensource - #ospo Author: Unspecified (YouTube tutorial creator) Source: YouTube Reference: https://www.youtube.com/watch?v=OYDatNGrwVw date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} --- # Title: Automatic Light/Dark Mode in GenerateBlocks (Should this be standard in 2025?) ## Table of Contents: - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes (Timeline Outline)](#-notes-timeline-outline) - [📖 References](#-references) - [🗣️ Paraphrase](#-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB (Diversity, Equity, Inclusion, and Belonging) Assessment](#-deib-diversity-equity-inclusion-and-belonging-assessment) - [✅ Logical validity](#-logical-validity) - [🕵️ DARVO Analysis](#-darvo-analysis) - [🔍 SEO Evaluation](#-seo-evaluation) - [🎯 Conclusion](#-conclusion) ### References: Include a list of sources consulted and cited in the article. --- ## 📝 Summary: The video walks through implementing **automatic light/dark mode** for a WordPress site using **GeneratePress** + **GenerateBlocks** with a **design-token** workflow and a small amount of **CSS**. Plan palettes in **Figma** (surface, text, border, brand), register the **light** palette in GeneratePress, then connect tokens to CSS Color 5’s `light-dark()` inside a `body` rule, and declare `:root { color-scheme: light dark; }` so the browser adapts built-in UI and defaults to the user’s OS preference. It also covers a common pitfall (button text flipping to the wrong color) and suggests a fix via **constant tokens**; a user-controlled toggle is proposed for a follow-up. --- ## 📖 Main Content: A **standards-first** approach (no JS required) delivers automatic theming that respects the user’s OS setting while keeping design consistent and maintainable. The flow is: 1) **Design** palettes in Figma with named variables. 2) **Register** tokens in GeneratePress as the **light** set (theme limitation). 3) **Bridge** tokens to `light-dark()` pairs via CSS on `body`. 4) **Verify** by switching OS appearance; handle edge cases with constant tokens (e.g., `--white` for button text). **Starter CSS (from the walkthrough):** ```css :root { color-scheme: light dark; } body{ --surface: light-dark(#ffffff, #000000); --text: light-dark(#000000, #ffffff); --border: light-dark(#e5e7eb, #1f2937); --brand: light-dark(#6d28d9, #6d28d9); /* constant brand color */ } /* Example usage */ .section { background: var(--surface); color: var(--text); } .section { border-block-start: 1px solid var(--border); } .button--brand { background: var(--brand); color: #fff; } /* constant token for legibility */ ```` > **Fallback tip:** If `light-dark()` isn’t fully supported in a target browser, pair this with custom properties and a media query: ```css body{ --surface: #fff; --text: #000; } @media (prefers-color-scheme: dark){ body{ --surface: #000; --text: #fff; } } ``` ### 🗒️ Notes (Timeline Outline) > Direct timestamp links jump to the exact moment on YouTube. * **Why dual modes** — trend & UX * [0:00–0:12](https://www.youtube.com/watch?v=OYDatNGrwVw&t=0): Clients are increasingly asking for both light & dark designs. * [0:14–0:26](https://www.youtube.com/watch?v=OYDatNGrwVw&t=14): Many sites already follow OS preferences; users may never notice the other mode. * [0:28–0:36](https://www.youtube.com/watch?v=OYDatNGrwVw&t=28): Browsers do much of the heavy lifting if you use the right CSS hooks. * **Plan first in Figma** — token thinking * [0:54–1:06](https://www.youtube.com/watch?v=OYDatNGrwVw&t=54): Retrofitting is harder; plan both palettes early. * [1:17–1:35](https://www.youtube.com/watch?v=OYDatNGrwVw&t=77): Variables: **surface**, **text**, **borders**, **brand**. * [1:42–2:11](https://www.youtube.com/watch?v=OYDatNGrwVw&t=102): Light vs dark palette choices; brand stays constant. * **WordPress setup** — GeneratePress & GenerateBlocks * [2:19–2:41](https://www.youtube.com/watch?v=OYDatNGrwVw&t=139): Structure exists; colors not yet tokenized in blocks. * [2:49–3:11](https://www.youtube.com/watch?v=OYDatNGrwVw&t=169): OS toggle demo shows the site doesn’t respond yet. * [3:22–4:18](https://www.youtube.com/watch?v=OYDatNGrwVw&t=202): Add **light** tokens in Customizer first due to theme limitation. * **Assign tokens to UI** * [4:21–5:02](https://www.youtube.com/watch?v=OYDatNGrwVw&t=261): Section bg → `surface`; text → `text`; border → `border`; button bg → `brand`; button text → `surface` (sets up a pitfall). * **Enable auto-theming via CSS** * [5:42–6:20](https://www.youtube.com/watch?v=OYDatNGrwVw&t=342): `:root { color-scheme: light dark; }` to inform the UA. * [6:36–7:08](https://www.youtube.com/watch?v=OYDatNGrwVw&t=396): GeneratePress can’t store `light-dark()` in palette fields; override in CSS. * **Wire tokens with `light-dark()`** * [7:10–8:24](https://www.youtube.com/watch?v=OYDatNGrwVw&t=430): Redeclare tokens on `body` with `light-dark()`; confirm live by OS switching. * [8:40–9:26](https://www.youtube.com/watch?v=OYDatNGrwVw&t=520): Add `--text` and `--border` pairs. * [9:32–10:12](https://www.youtube.com/watch?v=OYDatNGrwVw&t=572): `--brand` uses same value for both modes (future flexibility retained). * **Common pitfall & fix** * [10:14–10:34](https://www.youtube.com/watch?v=OYDatNGrwVw&t=614): Button text uses `--surface` (flips to black in dark mode) → illegible. * [10:40–11:30](https://www.youtube.com/watch?v=OYDatNGrwVw&t=640): Fix with a **constant token** (e.g., `--white`) or a palette swatch that never flips; update hover, too. * **Authoring experience & QA** * [11:33–12:03](https://www.youtube.com/watch?v=OYDatNGrwVw&t=693): OS switching works in-editor → better QA while building. * **User choice vs OS preference** * [12:05–12:32](https://www.youtube.com/watch?v=OYDatNGrwVw&t=725): Consider adding a **site toggle** for users who prefer the other mode. --- ## 📖 References: * MDN: `color-scheme` — [https://developer.mozilla.org/docs/Web/CSS/color-scheme](https://developer.mozilla.org/docs/Web/CSS/color-scheme) * MDN: `@media (prefers-color-scheme)` — [https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) * CSS Color Module Level 5 `light-dark()` — [https://drafts.csswg.org/css-color-5/#light-dark](https://drafts.csswg.org/css-color-5/#light-dark) * GeneratePress Docs — [https://docs.generatepress.com](https://docs.generatepress.com) * GenerateBlocks Docs — [https://generateblocks.com/docs/](https://generateblocks.com/docs/) * Figma Variables — [https://help.figma.com/hc/en-us/articles/1500007748302-Create-variables](https://help.figma.com/hc/en-us/articles/1500007748302-Create-variables) --- ## 🗣️ Paraphrase: 1. **Design upfront** ([0:54–1:06](https://www.youtube.com/watch?v=OYDatNGrwVw&t=54)) *Original:* Retrofitting is possible but tougher; plan light/dark with variables. *Paraphrase:* “Bolting on dark mode later works, but it’s clunky. Define surface/text/border/brand tokens on day one and build two palettes from the start.” 2. **CSS-only auto theming** ([5:42–8:24](https://www.youtube.com/watch?v=OYDatNGrwVw&t=342)) *Original:* Declare `color-scheme` and attach tokens to `light-dark()` for automatic OS–driven switching. *Paraphrase:* “Tell the browser you support both themes, then bind your design tokens to paired values. The site follows the user’s OS without any JavaScript.” - Summary: 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 - URL: https://www.youtube.com/watch?v=OYDatNGrwVw Maybe it's just something in the air, but I've had quite a few clients come to me recently wanting me to design their website in both light mode and dark mode. And as I've explored this idea more and more, I've started to realize there's a lot of sites out there that are built this way. Many of them follow your system preferences. So if you're not switching those preferences back and forth from light mode to dark mode often, you might only have ever seen the site in one color mode, but switch those system preferences and all of a sudden you get a completely different experience. It's actually something that's pretty simple to set up and the browser does a lot of the work for you if you know a couple little tricks inside of CSS. So, in today's video, I'm going to show you how you can set up a light mode and dark mode website inside of Generate Press and Generate Blocks. It's going to require just a little bit of CSS, but it's going to make your website automatically switch from light mode to dark mode just based on those system preferences. If that sounds interesting to you, then stick around and let's get started. Now, we're going to start things off here inside Figma because setting up a light and dark mode is a whole lot easier when you can pre-plan it. If you try to retrofit a site that was already built without light mode and dark mode in mind, it is possible, but it is much more difficult. So, I want to show you what I set up here inside Figma first as kind of my inspiration for this design and how we're going to make the light and dark mode work. So, you can see here I have this section built up with a heading, some text, a button, and a few images. Now, right now I have this set in light mode. But if I go over here to my appearance panel and switch this to dark mode, you can see what this design is going to look like in dark. Now, in Figma, I did this using some of the pro features where we have different color modes set up with my variables. So, here you can see I've set up surface, text, borders, and brand. Now, in light mode, we'll go ahead and switch that back. You can see in light mode, the surface is white, the text is black, my borders are this light gray color, and the brand color is this purple color. And then when we switch over here to dark mode, these dark mode colors are taking precedent. And you can see the surface is black, the text is white, the border color is quite a bit darker. And I'm actually using the same brand color here. And I want to show you why you might or might not want to use this light dark mode function for colors that aren't going to switch when it's in light or dark mode. So, let's go ahead and hop over to WordPress now so we can see how we can get this all moving forward. So, as you can see, I already gave us a head start and started building some of this out. We have most of the structure taken care of here, but I haven't set any of the colors. So, if I select this H1, you can see that this text color doesn't have anything on it right now. It's just defaulting from what's inside the HTML. The only deviation from that is the button here where I went ahead and gave it a black background and white text, but I didn't assign any color variables. In fact, we'll just take a look here. You can see I just set this to a black color. Now I'm going to use a keyboard shortcut on my keyboard to switch from my preferences being light mode to dark mode. If I hit control shift C on my Mac, it's actually switching everything to dark mode. Now you can't see that right now, but if I open up my taskbar up here, you can see everything's dark. And if I press control shift C again, you can see it went to light mode. And even though I'm changing my system preferences, it's not changing anything on the website. And what we want to set up for this light dark example is to automatically switch the website from light mode to dark mode based on the user's preferences. So the first thing we need to go do is set up all of our color palette inside the Generate Press theme. So I'm going to go ahead and save our changes. We'll hop out of here and go into the customizer and we'll open up our color palette. You can see there's nothing in here yet. So, we need to set up all of our color variables, which are just going to match what we had inside Figma. Now, due to some limitations inside Generate Press, we're going to have to set this up as our light variation first, and then we're going to add a little bit of CSS that's going to allow us to switch back and forth from light and dark. So, we need to set up all of our light variables here. I'll just go ahead and start adding those in. We had our surface color, which was white. We had our text color, so I'll type in text, and that was black. We had our border color. I'll go ahead and type in border and paste in that hex value. And then lastly, we had our brand color. So, I'll type in brand and paste in our brand variable. So, now we got all of our global colors set up. I'll go ahead and publish these changes. We'll go back into the page here that we're working on and we'll go ahead and assign all those colors. So, for my section under the background color, I'm going to go ahead and set that to my surface color. For these bits of text here, I will set them to my text color. Again, just selecting those from the color palette. We have a border on top of this. So, I'm going to go in and select my border color. And then for our button, I do have a class set up for those. So, I'll go ahead and select my brand color as the background. And under the typography, I'll set my surface color as the text color. we're actually going to run into an issue with this, but I'm doing this on purpose to show some workarounds you're going to need to keep in mind when you're switching from a light and dark theme. But since this button does have the same color as my background here, I'm going to go ahead and set that as my surface color. Now, I'm not going to get too complex with all the hover styles. So, I'm going to go ahead and set the background and text colors the same on hover as they are by default, just to keep things simple. We'll go ahead and save these changes now that everything's had a color assigned to it. And let's go take a look at this on the front end. As you can see, our layout looks great. And if I switch my system preferences here, again, I'm going to show the taskbar here. So, you can just see me switching in between. It's not changing anything on our website yet. So, let's go ahead and hop into the customizer. We'll go into our additional CSS. And here's where we're going to need to write a little bit of CSS. The first thing we're going to add is the setup we need in order to tell the browser that our site is going to function in both light and dark mode and follow the user system preferences. That sounds complicated, but it's pretty easy if we just type in colon root and open and close our curly brackets. Here we're going to type in color scheme with a hyphen in between. And then after the colon, we're going to put light space dark and then go ahead and end that with a semicolon. Now, if I hover over our taskbar again here and switch from light mode to dark mode, you can see part of our website is actually changing colors here. What's really nice about this color scheme declaration, anything that's being assigned a color by default by the browser is going to get affected here now that we're showing this website is in both light and dark mode. Of course, even though that those things are changing, just the browser defaults, you can see nothing in our design itself is changing because we need to set up those light dark variants. Now, we're going to have to do this in CSS because of the limitation I mentioned ago inside generate press. What we're going to be using is a light dark function, and we're not actually able to assign those to our color swatches here in the customizer. You can type them in, but as soon as you save, they just disappear. I've already wrote Tom about this and hopefully it's an addition they'll make to the theme coming soon, but it's pretty easy to do with CSS. So, let's just go ahead and jump in here. Now, in order to override those defaults from the theme, what we're going to have to target here is just our body selector. So, I'm going to type in body and open and close our curly brackets. Now, what we need to do is target all those variables we set up inside of our color palette. So if I just go back into our color palette here, you can see the surface is set up as the variable surface. So I just want to reassign those colors here on the body. To do that, I just type in the double dash, which is what you have to use for any kind of variable. And I'm going to type in the word surface just as we had named it before inside the color swatches. Now here, what I'm going to do is type in light hyphen dark and then open and close parenthesis. This is our light dark function that's going to give us the ability to switch back and forth. Now, you can see right now my system preferences are in dark mode. I'm going to go ahead and switch that back to light mode so we can see what we're working on. But inside of these parentheses is where we're going to assign our light value and our dark value. So, the first one is our light value, which we know is going to be fff for white. Then, we put a comma. And now we can assign our dark value, which we know is going to be black. So, we'll just put 00 0. We'll go ahead and add a semicolon to the end of that. And now, if I switch back and forth between light and dark system preferences, you can see our background color that we assigned to that surface variable is switching between white and black. So, that's exactly what we needed. We just need to set up all of our other variables. Again, we're going to go with our light dark function here. For our text, we wanted black text in light mode and white text in dark mode. Again, let's just go ahead and use that shortcut. And we can see that everything's swapping over nicely. Next, we had our border. So, I'll just go ahead and type in border light hyphen dark. Open and close our parenthesis. And now, we need to put in our light hex value and our dark hex value. I'll go ahead and copy that light mode hex value. We'll jump back over here, type in the pound sign, and paste that in a comma. Pound sign again. And let's go ahead and grab our dark variant. I'm just going to steal this from Figma. We'll go back into our website and paste that in. And now, if you watch this border at the top here, as I switch from light and dark mode, it's switching between those two colors. It's a little hard to tell because they're not totally different, but it is switching between these. Now, the last one we want to take care of here is our brand color. In our Figma design, we're not actually switching that color from light and dark. It's staying the same no matter what. So, we don't necessarily have to use the light dark function on this, but we can still do it by just typing in brand light- dark open and close our parenthesis. And we'll just go back into Figma here and grab that color. You can see it's the same in dark mode and light mode. We'll go ahead and jump back in here. And I'll paste that in there, making sure to put the pound sign before it. We'll put a comma, and we'll just put that same value in again. This gives us the ability to switch that later if we do decide we want a slightly different color in dark or light mode. We can get that taken care of. Now, the problem I alluded to earlier that we kind of created for ourselves is with this button text here. In light mode, we want it to be that same color as the background, which is white. So, we just assigned it to the surface variable. But when we switch over to dark mode, now the surface variable is actually black. And this doesn't work as well inside of our button. I actually want that to stay white no matter what. So, we need to set up another color that's not going to switch back and forth. Now, like you saw, we can do that by setting up a variable and giving it the same value in both light and dark mode. But, if there's ones that you know are not going to switch, you could just go back in here into your global styles. And maybe we just call this white by default. And we'll just give it a white value and go ahead and publish those changes. We'll go back in here and edit the page. We'll grab our button and go into the class. And here under typography, instead of setting this as the surface color, I'm just going to set it as white. This way, when we switch between light mode and dark mode, that button text is staying white no matter what. We do want to go ahead and set that on hover as well. So, I'll go into my class and set that same white color as the hover text color. And now when we switch back and forth, we can see that button text is staying white no matter what because we didn't assign it a different light and dark color. One thing I love about this setup is I can quickly switch between light mode and dark mode on my keyboard again using control shift C. And everything works here in the back end as well. It's really important when you're building out a light and dark mode site that you're able to check all these things as you're building them out just to make sure quirks like this button text don't pop up long before you notice them. We were able to sus this out pretty quickly and come up with a solution by just using a white color that doesn't change. And being able to switch here inside the editor makes it a whole lot easier to make sure you're on track as you're building things out. This setup works really well if you're comfortable with your site just going from light mode to dark mode based on the user system preferences. Of course, there are some people who use dark mode who might prefer your website in light mode or vice versa. So, it would be better to give them some kind of toggle or switch to be able to go back and forth in between. I've actually worked up a solution that works pretty well inside Generate Blocks for that. So, if you'd be interested in seeing how to set up that toggle, let me know down in the comments and maybe I can do a follow-up to this video. Hopefully, you learned something today. If you did, I would really appreciate a thumbs up. And if you want to make sure to catch the next one, hit subscribe and we'll see you, Automatic Light/Dark Mode in GenerateBlocks, The Admin Bar, 01k5c8fyjbwxz9svr1ryvbzzne.