# Dark Mode Published articles for Dark Mode. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## The Death of the Static UI: Building Context-Aware Mobile Apps in 2026 DevFeed: [The Death of the Static UI: Building Context-Aware Mobile Apps in 2026]() Original publisher: [Read original article]() Author: Rudraksh Shukla Published: 2026-09-14T17:02:27Z Content type: tutorial Language: en Sources: [Flutter Community - Medium]() Topics: [Mobile](), [ui](), [User experience (UX)](), [personalization](), [Flutter](), [real-time]() Tags: [agentic-ai](), [artificial-intelligence](), [dark-mode](), [flutter](), [machine-learning](), [mobile](), [mobile-development](), [personalization](), [real-time](), [recommendations](), [ui](), [ux]() ### AI overview This developer article argues that mobile interfaces are evolving from fixed layouts into context-aware surfaces that adapt navigation, touch targets, color, density, and surfaced actions using on-device signals. It discusses motion, location, time, usage history, and device or network state, with Flutter examples and references to patterns associated with Spotify and Netflix. ### Source excerpt Every app you've ever shipped made the same quiet assumption: the interface is a fixed thing. You design a screen, you lay out the widgets, and every user sees the same arrangement in the same order -- a 22-year-old on a commuter train at 8am and a 60-year-old at home on a Sunday get pixel-identical layouts. For thirty years that was simply what a UI was. That assumption is dying. In 2026 the leading mobile apps treat the interface as a live surface that reshapes itself in real time -- reordering navigation, resizing touch targets, shifting color and density, surfacing the one action you're most likely to want next -- driven by on-device signals about who you are, where you are, and what you're doing right now. The static screen is becoming the exception, not the default. Here's what's actually driving it, what it takes to build, and what it looks like in code -- with Flutter examples throughout. From static layout to living surface The old personalization playbook was recommendation, not adaptation. Netflix reordered a content row; Spotify built you a playlist. The chrome around those recommendations -- the navigation, the layout, the visual system -- stayed frozen. Context-aware UX pushes personalization down into the interface itself. Concretely, an adaptive UI reacts to signals like these: Motion and activity -- accelerometer and gyroscope tell you the user is walking, driving, or still. A UI can enlarge touch targets and simplify layout when it detects movement, cutting mis-taps. Location and environment -- outdoors in bright light, boost contrast and switch to a high-legibility mode; on a known Wi-Fi network at home, load richer media. Time and calendar -- automatic dark mode at night, a leaving-for-a-meeting layout when the next calendar event is 15 minutes out. Usage history -- promote the three features this user actually touches, demote the ones they never open. A finance app foregrounds transfer for a power user and check balance for a casual one. Device and networ ## Maestro CLI 2.9.0: test light and dark mode in one flow DevFeed: [Maestro CLI 2.9.0: test light and dark mode in one flow]() Original publisher: [Read original article]() Author: Manu Armani Published: 2026-08-31T15:00:00Z Content type: release Language: en Sources: [mobile.dev - Medium]() Topics: [Command-line interface](), [Mobile](), [WebView](), [Web](), [Chrome](), [YAML]() Tags: [2-9-0](), [android](), [angular](), [chrome](), [cli](), [dark-mode](), [ios](), [react](), [release](), [vue](), [web](), [webview](), [yaml]() ### AI overview Maestro CLI 2.9.0 adds commands for testing light and dark themes within a single flow across iOS, Android, and Web. It also introduces negation globs for YAML files and improves Android WebView inspection, Chrome Web flows, Android reliability, and upload-status polling. ### Source excerpt Maestro CLI 2.9.0 adds dark-mode commands for iOS, Android, and Web, negation globs in config.yaml, and reliability work for Android WebViews and modern Chrome. ## What's !important #18: , Syntax ::highlight()ing, named-feature(), and More DevFeed: [What's !important #18: , Syntax ::highlight()ing, named-feature(), and More]() Original publisher: [Read original article]() Author: Daniel Schwarz Published: 2026-08-31T14:08:55Z Content type: article Language: en Sources: [CSS-Tricks]() Topics: [Web Development](), [Dark Mode]() Tags: [api](), [articles](), [chrome](), [css](), [custom-highlight-api](), [dark-mode](), [developers](), [how-to](), [news]() ### AI overview A CSS-focused roundup covering delayed tooltips, progressive enhancement for geolocation, Custom Highlight API syntax highlighting, CSS grid data in custom properties, and dark-mode choices. ### Source excerpt Well, that's a wrap. No, not a flex-wrap, but rather today marks a new day, week, month, season, aaaand new edition of What's important (#18), bringing you the best content that developers have produced over the last couple of weeks or so. What's !important #18: , Syntax ::highlight()ing, named-feature(), and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well. ## Making room for what's next in the GitLab UI DevFeed: [Making room for what's next in the GitLab UI]() Original publisher: [Read original article]() Author: Jeremy Elder Published: 2026-08-26T00:00:00Z Content type: article Language: en Sources: [GitLab]() Topics: [User interface design](), [Dark Mode]() Tags: [ai](), [chrome](), [dark-mode](), [design](), [duo](), [enterprise](), [product](), [themes](), [ui](), [ux]() ### AI overview GitLab describes a UI reduction effort using neutral controls, reduced color, and design tokens to improve clarity and make room for self-surfacing interactions. ### Source excerpt Throughout this year, the product interface has been in a season of reduction. On the heels of dark mode, the tide has been moving out with a quieter application chrome, overall color reduction, and neutral controls. It can feel like loss, low tide always does. But low tide is also when you can see the shape of the shoreline clearly enough to build something new on it. What's coming in is a user interface built for a different kind of work where you don't search for the right button, it surfaces at the moment you need it. This is a conceptual shift that needs room to breathe, and we're clearing the way for it. Tech goes through cycles like this. Touchscreens replacing physical buttons felt like a loss at first, until gestures, voice, and haptics enabled a deeper kind of interaction and expression. Cords gave way to wireless and each generational change introduced real friction for a time. The tide going out isn't the point, it's the possibility of what comes in with it. Here's what's changed in the GitLab UI: Neutralized actions and controls (buttons, form controls, toggles, tabs) with increased contrast Enhanced instance theming addressing more surface area Neutral palette update and tinted neutrals for themes New bloom-style glow visual element draws attention to GitLab Duo interaction and moments requiring user input The journey to the new design Our version of that cycle started years ago when we removed many of the old Bootstrap variants and continued as we moved to design tokens. Instead of sharing a crowded palette, we scoped categories like actions, feedback, and controls more narrowly. Color in the product had a real problem of trying to do too many jobs at once and resulted in some screens feeling "lit up like a Christmas tree." Generally speaking, enterprise software limits color so that when it shows up it means something. That's the direction we've been iterating on for years. Changes like this are rarely perfect on the first pass. Something looks fine ## Fedora Badges Revamp Project: From The Ground Up DevFeed: [Fedora Badges Revamp Project: From The Ground Up]() Original publisher: [Read original article]() Author: Akashdeep Dhar Published: 2026-08-19T08:00:00Z Content type: article Language: en Sources: [Fedora Magazine]() Topics: [Fedora](), [App](), [Front end](), [User interface design](), [Dark Mode](), [Server]() Tags: [community](), [dark-mode](), [fedora-project-community](), [production](), [technical](), [user-interface]() ### AI overview The article describes a ground-up rebuild of the Fedora Badges application service, which is moving toward production. It highlights a modern responsive single-page interface, navigation updates, customizable color schemes with persistent dark and light modes, badge collection analytics, contribution history charts, friend comparisons, mentoring discovery, and badge rarity tiers. ### Source excerpt After years of technical research and foundational work, the Fedora Badges application service has been rebuilt from the ground up, and it is heading to production. Whether you have been collecting badges for years or you are brand new to the Fedora Project community, here is what is waiting for you there. Completely modernized user interface The archaic server rendered pages are now gone. The Fedora Badges application service [...] ## Dark mode toggles: two states are enough DevFeed: [Dark mode toggles: two states are enough]() Original publisher: [Read original article]() Author: Geoff Graham Published: 2026-08-17T14:15:50Z Content type: article Language: en Sources: [CSS-Tricks]() Topics: [Dark Mode](), [Web Development]() Tags: [browser](), [dark-mode](), [links](), [os](), [ui](), [ui-ux-design](), [ux]() ### AI overview The article argues that persistent light/dark theme controls generally need only two states. Sites should follow the system preference by default and let users override it, reducing interface complexity and cognitive load. ### Source excerpt Lea's pushing back on light/dark mode implementations that display three state options for visitors: light, dark, and system. Dark mode toggles: two states are enough originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well. ## Modern CSS theming with light-dark(), contrast-color(), and style queries DevFeed: [Modern CSS theming with light-dark(), contrast-color(), and style queries]() Original publisher: [Read original article]() Published: 2026-06-22T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [modern web development](), [color](), [Media Queries]() Tags: [color](), [css](), [dark-mode](), [dynamic-theming](), [media](), [scheme](), [support](), [themes]() ### AI overview This tutorial explains how to combine light-dark(), contrast-color(), style queries, custom properties, and related CSS color features to create adaptive themed components. It covers light and dark color schemes, context-sensitive palettes, automatic text contrast, and different elevation effects for each theme. ### Source excerpt Combine three new CSS features to build fully adaptive themed components. ## How The New York Times Games Team Delivered Accessible, Cross-Platform Dark Mode DevFeed: [How The New York Times Games Team Delivered Accessible, Cross-Platform Dark Mode]() Original publisher: [Read original article]() Author: The NYT Open Team Published: 2026-04-16T15:35:45Z Content type: article Language: en Sources: [New York Times]() Topics: [Dark Mode](), [Mobile](), [Android](), [iOS](), [Jetpack Compose](), [ui](), [Design system](), [XML](), [pull-requests](), [SwiftUI](), [Objective-C]() Tags: [accessible](), [android](), [collaboration](), [cross-platform](), [dark-mode](), [design](), [design-system](), [engineering](), [ios](), [jetpack-compose](), [pull-requests](), [swiftui]() ### AI overview The New York Times Games team describes implementing accessible, brand-consistent dark mode across its mobile app. The work coordinated design and engineering across Android and iOS, including XML and Jetpack Compose screens, legacy and modern interfaces, shared assets, external libraries, and testing. ### Source excerpt Bringing accessible, brand-consistent dark mode to life in The New York Times Games app through cross-platform design and engineering collaboration.Illustration by Allie Sullberg By Vanessa Johnson, Daniel Falokun, Michael Ingber and Oleksandr Zabiiako The Games Mobile App introduced dark mode back in October. This seamless implementation was a collaborative effort, requiring careful planning and management of design, cross-platform coordination, and engineering work across both legacy and modern user interface systems. The process to implement dark mode across the app included consideration on the visuals, colors, and icons that are mode specific to maintain legibility and brand consistency. The New York Times Games team is excited to have delivered this feature before the end of 2025, and thrilled to be able to roll out a feature that continues to make our app accessible for all. Development Work on Mobile On the development side, the mobile and web engineers synchronized assets which were colors, fonts, and images to ensure that hybrid screens showed the correct styles and colors. This was possible since our design system across mobile was constructed in a way that encouraged consistency and scalability across platforms. With clear and easy to follow designs supported by our internal design system, Android and iOS could ensure consistency on both platforms. Screens in dark mode From an Android perspective, it required separate approaches for XML (Extensive Markup Language) based screens which use an imperative, hierarchical approach and Jetpack Compose screens that use a more modern declarative approach. XML and Jetpack Compose are different ways the UI can be constructed. To ensure dark mode compatibility, all features were revisited to make sure they were adapted, especially the additions that were being worked on during the dark mode project. Another aspect of this development was updating external libraries that required making pull requests, creating a versi ## Engineering Den: Ship in style with official Redpanda terminal themes DevFeed: [Engineering Den: Ship in style with official Redpanda terminal themes]() Original publisher: [Read original article]() Author: Simon Soriano Published: 2026-04-01T00:00:00Z Content type: article Language: en Sources: [Redpanda]() Topics: [Terminal](), [Dark Mode](), [Syntax Highlighting](), [Artificial Intelligence](), [GitHub]() Tags: [ai](), [announcements](), [apache](), [dark-mode](), [engineering](), [github](), [terminal](), [themes]() ### AI overview Redpanda introduces official terminal themes in dark and light variants, with configurations for Ghostty, iTerm2, Windows Terminal, Alacritty, Kitty, and WezTerm. The themes use Redpanda's brand colors while preserving readable syntax highlighting and diffs, and were generated with Claude. ### Source excerpt Add a "paws-itive" flair to your terminal with Redpanda themes. Light and dark mode included. ## Building a Self-Hosted Analytics Dashboard in One Session DevFeed: [Building a Self-Hosted Analytics Dashboard in One Session]() Original publisher: [Read original article]() Published: 2026-03-25T00:00:00Z Content type: tutorial Language: en Sources: [Alex Korbonits]() Topics: [dashboards](), [Self-hosted](), [Netlify](), [Supabase](), [Astro](), [Serverless](), [Dark Mode]() Tags: [analytics](), [building](), [cookies](), [dark-mode](), [dashboard](), [google-analytics](), [netlify](), [self-hosted]() ### AI overview A tutorial describing how to build a self-hosted analytics dashboard without Google Analytics or third-party tracking scripts. The implementation uses a beacon, a Netlify serverless function, Supabase, build-time rendering, and an authenticated analytics page. ### Source excerpt No Google Analytics, no third-party scripts, no cookies. Just a Netlify function, Supabase, and a Chart.js dashboard I actually own. ## Automated accessible text with contrast-color() DevFeed: [Automated accessible text with contrast-color()]() Original publisher: [Read original article]() Published: 2026-03-12T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [CSS](), [modern web development](), [Web Development](), [Media Queries]() Tags: [color](), [css](), [dark-mode](), [design-system]() ### AI overview The article explains how CSS contrast-color() can automatically choose the higher-contrast text color for a given background. It covers its contrast-ratio behavior, use in design-system buttons, dark mode, hover states, and algorithmically generated color palettes. ### Source excerpt Let the browser pick the most readable text color for any background with this new CSS function. ## The Python Insider Blog Has Moved! DevFeed: [The Python Insider Blog Has Moved!]() Original publisher: [Read original article]() Author: Jacob Coffee Published: 2026-03-03T00:00:00Z Content type: article Language: en Sources: [Python Insider]() Topics: [Python](), [Git](), [Astro](), [RSS Feed](), [Markdown](), [Pull Request](), [YAML](), [Dark Mode](), [Open Graph protocol](), [Content Management System]() Tags: [astro](), [blog](), [community](), [content](), [dark-mode](), [development](), [git](), [html](), [markdown](), [pull-request](), [python](), [rss]() ### AI overview The Python Insider blog has moved from Blogger to blog.python.org, using a Git repository and Markdown-based contributions. The migration includes all 307 previous posts, automatic redirects, and continued RSS compatibility. The new Astro-based static site adds filtering, author pages, search, dark mode, and automatically generated Open Graph images. ### Source excerpt Python Insider now lives at blog.python.org, backed by a Git repository. All 307 posts from the Blogger era have been migrated, and old URLs redirect automatically. ## New Initializr and Build Server Migration Plan DevFeed: [New Initializr and Build Server Migration Plan]() Original publisher: [Read original article]() Author: Shai Almog Published: 2026-02-21T00:00:00Z Content type: article Language: en Sources: [CodeName One]() Topics: [migration](), [Tooling](), [Deployment](), [Dark Mode](), [GitHub](), [ui](), [User Experience]() Tags: [android](), [dark-mode](), [deployment](), [dogfooding](), [github](), [infrastructure](), [ios](), [migration](), [server](), [tooling](), [ui](), [update](), [user-experience](), [ux-improvements]() ### AI overview Codename One announces a new Initializr built with Codename One that runs on the client machine and no longer depends on a backend service. The article also outlines staged Android and iOS build server upgrades, with Android beginning February 27-28, 2026, and iOS beginning March 5, 2026. ### Source excerpt We are launching a new Codename One Initializr and sharing the staged migration plan for Android and iOS build servers. ## Moving from WordPress to Hugo + Cloudflare Pages DevFeed: [Moving from WordPress to Hugo + Cloudflare Pages]() Original publisher: [Read original article]() Author: Shai Almog Published: 2026-02-17T00:00:00Z Content type: opinion Language: en Sources: [CodeName One]() Topics: [Hugo](), [Cloudflare](), [WordPress](), [Giscus](), [Git](), [Markdown](), [Pull Request](), [Caching](), [Dark Mode]() Tags: [caching](), [cloudflare](), [dark-mode](), [development](), [git](), [github](), [hugo](), [markdown](), [pull-request](), [wordpress]() ### AI overview The article explains why Codename One moved its website from WordPress to Hugo and Cloudflare Pages. It describes a Git-based publishing workflow, simpler deployments, improved performance and caching, better JavaDocs, a light/dark mode toggle, and Giscus-powered discussions. ### Source excerpt Why we moved the Codename One website from WordPress to Hugo and Cloudflare Pages, what improved, and how to use Giscus for discussions. ## Color themes with Baseline CSS features DevFeed: [Color themes with Baseline CSS features]() Original publisher: [Read original article]() Author: David A Herron Homepage Published: 2025-12-11T08:00:00Z Content type: tutorial Language: en Sources: [web.dev: Articles]() Topics: [Web Development](), [Dark Mode](), [User interface design]() Tags: [css](), [dark-mode](), [how-to](), [themes](), [ui]() ### AI overview A CSS tutorial on building color themes with Baseline features, using relative colors and OkLCh to derive palette values and support light and dark modes. ### Source excerpt Learn how to create color themes with Baseline web features available in CSS. ## Creativity meets precision with Google's Nano Banana Pro DevFeed: [Creativity meets precision with Google's Nano Banana Pro]() Original publisher: [Read original article]() Author: Noah Levin Published: 2025-11-20T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [AI Models](), [Artificial Intelligence](), [Google](), [Dark Mode]() Tags: [ai](), [ai-models](), [creativity](), [dark-mode](), [design](), [figma](), [gemini](), [google](), [image](), [images](), [model](), [models](), [platform](), [prototyping]() ### AI overview The article examines Google's Gemini 3 Pro with Nano Banana for creative image prompting in Figma. It describes generating visual variations, adapting illustrations, and preserving brand elements such as palette, texture, typography, composition, and logos across Figma Buzz, Figma Design, and Figma Slides. ### Source excerpt From quick style variations to precise edits, Nano Banana Pro helps teams stay creative without losing context or brand integrity. ## My Private Mini Kubernetes Cluster - Secured by Tailscale DevFeed: [My Private Mini Kubernetes Cluster - Secured by Tailscale]() Original publisher: [Read original article]() Author: Techno Tim Published: 2025-11-07T13:00:00Z Content type: tutorial Language: en Sources: [Techno Tim]() Topics: [Kubernetes](), [Virtual Private Network](), [5G](), [rancher](), [GitOps](), [Ubuntu](), [networking]() Tags: [5g](), [dark-mode](), [firewall](), [gitops](), [homelab](), [intel](), [kubernetes](), [latency](), [rancher](), [ssd](), [tailscale](), [ubuntu](), [unifi-cloud-gateway](), [vpn]() ### AI overview A tutorial documenting a private, three-node RKE2 Kubernetes cluster built on Beelink Mini PCs and connected securely through Tailscale over a 5G WAN. It covers UniFi networking, Ubuntu installation, PiKVM access, cluster bootstrapping, and Flux-based GitOps management. ### Source excerpt A compact Kubernetes cluster, completely private and connected over 5G - powered by Tailscale. 📺 Watch the video Why Build a Private Kubernetes Cluster? I wanted a way to run a full Kubernetes cluster that I could access securely from anywhere - no open ports, no complicated VPN setup, no public exposure. Tailscale made that possible by creating a secure network for exposing and connect... ## The New York Times Games' Path to Dark Mode DevFeed: [The New York Times Games' Path to Dark Mode]() Original publisher: [Read original article]() Author: The NYT Open Team Published: 2025-09-25T15:25:52Z Content type: tutorial Language: en Sources: [New York Times]() Topics: [Dark Mode](), [Design system](), [Accessibility](), [User Experience](), [Web Development]() Tags: [accessibility](), [dark-mode](), [design](), [design-systems](), [development](), [front-end-development](), [games](), [user-experience]() ### AI overview The New York Times Games explains why implementing Dark Mode required more than inverting colors. The project involved accessibility decisions, preserving each game's brand, and creating a consistent design system across eight games and three surfaces. ### Source excerpt How we designed a deceptively complex featureIllustration by Alessandro Gottardo By Joel Urena, Jenna Kim, Kenneth Ofosu, Shaka Clark, Raven Adaramola, Dylan Campbell At least once a day, our players requested a Dark Mode feature for The New York Times Games, particularly those who enjoy playing at night. The bright screens were negatively impacting their satisfaction and hindering accessibility. Our players often wondered why this seemingly simple feature -- just a switch from white to black -- took so long to deliver. People may think designing for Dark Mode is about inverting colors from white to black, one of the points players often cited when asking for Dark Mode. But there are numerous factors that make up little decisions when designing and implementing Dark Mode. Not only do we have to consider the color accessibility, we have to make intentional color decisions to preserve the brand of each game and The New York Times Games. A compilation of negative Games app reviews that reference dark modePrimer: Design Systems & Feature Discovery In the Spring of 2023, The New York Times Games was evolving quickly and we found ourselves with a user experience that was vastly different depending on which game you played and where you played it. We began to rectify this problem with the development of a Design Systems strategy. Like most other tech orgs, we hypothesized that if we began approaching product design and front-end development systematically, surely that would orient us toward a more consistent product experience, right? The answer: yes, eventually. From a business and user impact perspective, the clearest Design Systems opportunity to prioritize first was Dark Mode. However, given the maturity of The New York Times Games digital product, the operational complexity we were tackling was massive. At the time, we had eight live games spread across three surfaces: The New York Times Games apps, the The New York Times news app and on the web. We also had ancillary e ## Smooth Theme Transitions in Compose with Animated ColorSchemes DevFeed: [Smooth Theme Transitions in Compose with Animated ColorSchemes]() Original publisher: [Read original article]() Author: Michael Evans Published: 2025-07-02T03:38:27Z Content type: article Language: en Sources: [Gadget Habit]() Topics: [Jetpack Compose](), [Compose](), [Dark Mode](), [ui](), [Code](), [GitHub]() Tags: [animation](), [code](), [compose](), [dark-mode](), [github](), [jetpack-compose](), [themes](), [ui]() ### AI overview This article explains how to create smooth light and dark theme transitions in Jetpack Compose by animating ColorScheme properties. It compares individual color animations with a cleaner updateTransition-based approach that shares timing and easing, reduces scattered animation logic, and remains easier to extend. ### Source excerpt If your Jetpack Compose app supports light and dark themes, you've probably noticed the default behavior: a sudden cut between color schemes when the system UI mode changes. I think we've all seen theme changes that look like this: Your browser does not support the video tag. We can do better. By wrapping your theme setup with some animation, we can achieve smooth transitions between light and dark themes that feel much more polished -- without rebuilding your entire app structure. The Idea: Animate the ColorScheme Jetpack Compose's MaterialTheme accepts a ColorScheme. If we gradually animate the colors inside that scheme when the system toggles between dark and light, we can fade the colors smoothly across the entire app. Here's a simplified example: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 @Composable fun AnimatedTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val targetScheme = if (darkTheme) DarkColorScheme else LightColorScheme val animatedScheme = targetScheme.copy( primary = animateColorAsState(targetScheme.primary).value, background = animateColorAsState(targetScheme.background).value, surface = animateColorAsState(targetScheme.surface).value, onPrimary = animateColorAsState(targetScheme.onPrimary).value, // Add more swatches as needed... ) MaterialTheme( colorScheme = animatedScheme, typography = Typography, shapes = Shapes, content = content ) } You can expand this to include all 20+ color swatches if you want -- but we'll show a better way shortly. The Problem: Too Many Animations Manually animating every color swatch with animateColorAsState works, but: It's verbose It runs a lot of recompositions (even for unused swatches) It can be hard to keep up if ColorScheme changes A Better Approach: Animating with updateTransition A cleaner solution is to animate all properties as part of a single Transition. That way, Compose shares the animation clock and easing, and you're not scattering a dozen independent ## 🖤 Automatic Dark mode for Hugo using Tailwind CSS DevFeed: [🖤 Automatic Dark mode for Hugo using Tailwind CSS]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2025-04-04T23:01:08Z Content type: tutorial Language: en Sources: [Kaushik Gopal's Site]() Topics: [Dark Mode](), [CSS](), [Tailwind CSS](), [Hugo](), [implementation]() Tags: [css](), [dark-mode](), [html5](), [hugo](), [implementation](), [scheme](), [tailwind](), [tailwind-css]() ### AI overview This tutorial explains how to add automatic dark-mode support to a Hugo site using Tailwind CSS 4.0 and the CSS prefers-color-scheme media feature. The implementation updates theme color variables and adds a dark class to the root HTML element. ### Source excerpt On a ✈ back home, I decided to add Dark mode support to Henry. Having recently upgraded to Tailwind CSS 4.0, this was a piece of cake to do. I leverage the widely supported CSS @media prefers-color-scheme feature and Tailwind's native dark-mode support. The implementation only required a few changes: 1. update main theme.css ### In my main theme.css file where I declare the existing colors, I add the CSS @media selector for the "dark" variable indicator. @theme { /* henry background */ --color-hbg: var(--color-slate-50); --color-hbg-dark: var(--color-slate-200); /* ... */ } @media (prefers-color-scheme: dark) { .dark { /* henry background */ --color-hbg: #1c2b33; --color-hbg-dark: #152027; /* ... */ } } 2. update base html body ### In my root html page, I simply add the "dark" variable indicator class Now CSS automatically knows to pull in the dark variant of colors when the system indicates light/dark mode. There is no step 3! Your browser doesn't support HTML5 video. Download the video instead. This was so easy to do, in fact, that I even managed to catch up on Gladiator II on the plane ride which I personally give a solid 3.0 just for Denzel. ## Bootstrap 5.3.4 DevFeed: [Bootstrap 5.3.4]() Original publisher: [Read original article]() Author: Mark Otto Published: 2025-04-03T15:22:00Z Content type: release Language: en Sources: [Bootstrap.com]() Topics: [Bootstrap](), [changelog](), [CSS](), [Sass]() Tags: [bug-fixes](), [changelog](), [css](), [dark-mode](), [display](), [npm](), [padding](), [release](), [v5]() ### AI overview Bootstrap v5.3.4 is a release containing bug fixes and documentation updates. Highlighted changes include fixes for modal and offcanvas headers, close-button display, carousel behavior across color modes, floating-label alignment, Sass nested-rule deprecation warnings, and popover toggling. ### Source excerpt Bootstrap v5.3.4 is here with several bug fixes and a load of documentation updates. Here are a handful of highlights from the CSS and JS changes: Fixed modal and offcanvas headers collapsing when any padding variables were set to 0. Fixed close button display in color modes. Fixed light mode carousel when in dark mode. Updated floating labels for better