# Dark Mode A light-on-dark color scheme --also called black mode, dark mode, dark theme, night mode, or lights-out -- is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background. It is often discussed in terms of computer user interface design and web design. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## 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. ## 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. ## 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. ## 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. ## 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. ## Now in Android #121 DevFeed: [Now in Android #121]() Original publisher: [Read original article]() Author: Daniel Galpin Published: 2025-10-20T22:09:39Z Content type: article Language: en Sources: [Android Developers - Medium]() Topics: [Android](), [now-in-android](), [android-development](), [Android Studio](), [Jetpack Compose](), [media3](), [migration](), [Accessibility](), [Bluetooth LE](), [Dark Mode](), [iOS](), [pdf]() Tags: [accessibility](), [android](), [android-16](), [android-studio](), [bluetooth-le](), [featured](), [ios](), [jetpack-compose](), [media](), [migration](), [now-in-android](), [pdf]() ### AI overview This edition of Now in Android covers Android 16 QPR2 Beta 1, Android Studio Narwhal's feature drop, Jetpack Compose 1.9, Media3 1.8, and related Android development updates. It highlights new platform APIs and changes involving accessibility, data migration between Android and iOS, PDF editing, media, Bluetooth LE Audio, and connectivity. ### Source excerpt Compose 1.9, Media 3 1.8, QPR2 Beta 1, Narwhal Feature Drop, and more! Welcome to Now in Android, your ongoing guide to what's new and notable in the world of Android development. Read on for coverage of Android 16 QPR2 beta 1, the Android Studio Narwhal feature drop, Jetpack Compose 1.9, Media 3 1.8, Shape Morphing and Autofill in Compose, and much more. You can watch a video summary: https://medium.com/media/87a24ed0bca13b2d58bd3e59517b4273/href And we also have a podcast: https://medium.com/media/ef0552e532d340d1dd8ced3c6b6d85c5/href But this post has the most in-depth information, so read on! Android 16 QPR2 Beta 1 is here ✨ The first beta of Android 16 QPR2 is now available, the inaugural Android release with an Android minor SDK version. Minor SDK versions can include new APIs that extend platform features but cannot introduce targetSdkVersion gated behavior changes, minimizing the amount you need to test your apps against it. You can call new APIs by checking SDK_INT_FULL against the VERSION_CODES_FULL enumeration: if (Build.VERSION.SDK_INT_FULL >= Build.VERSION_CODES_FULL.BAKLAVA_1) { // Call new APIs from the Android 16 QPR2 release } VERSION_CODES_FULL cannot be used in uses-sdk manifest attributes. Here are some key updates from QPR2 Beta 1. UI, System Experience, and Accessibility: An expanded dark theme option intelligently inverts light apps for users preferring a dark appearance. Auto-themed app icons can be generated by the system if your app doesn't provide a monochrome layer. Interactive chooser sessions keep your app UI active while the sharesheet is open, using ChooserManager and ChooserSession. A new Data Transfer API enables more reliable and secure data migration between Android and iOS, requiring updates to your app's data extraction rules XML and BackupAgent implementation. The android.graphics.pdf package has expanded to support annotating and editing PDF documents via PdfRenderer.Page. ViewConfiguration values are now tailored to individua ## 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. ## How I prototype with colors in Jetpack Compose DevFeed: [How I prototype with colors in Jetpack Compose]() Original publisher: [Read original article]() Author: sinasamaki Published: 2025-02-21T07:25:13Z Content type: tutorial Language: en Sources: [sinasamaki]() Topics: [Jetpack Compose](), [Compose](), [Dark Mode](), [Kotlin](), [ui](), [TailwindCSS](), [Android Studio]() Tags: [android-studio](), [article](), [compose](), [dark-mode](), [jetpack-compose](), [kotlin](), [tailwindcss](), [ui]() ### AI overview A tutorial on prototyping Jetpack Compose UI colors by adapting TailwindCSS's predefined palette into Kotlin color objects and using an infix extension function to select light or dark variants. ### Source excerpt Don't waste time choosing colors in Jetpack Compose ## Starlight turns one year old! DevFeed: [Starlight turns one year old!]() Original publisher: [Read original article]() Author: Chris Swithinbank; HiDeoo; Yan Thomas; Reuben Tier; Sarah Rainsberger Published: 2024-06-05T00:00:00Z Content type: article Language: en Sources: [The Astro Blog]() Topics: [Documentation](), [Template](), [Astro](), [Open Source](), [GitHub](), [MDX](), [Markdown](), [Accessibility](), [Search engine optimization (SEO)](), [Dark Mode]() Tags: [accessibility](), [astro](), [content](), [dark-mode](), [docs](), [github](), [markdown](), [open-source](), [releases](), [seo]() ### AI overview Starlight celebrates its first year as an easy-to-use documentation template. The article reviews its built-in features, including search, navigation, internationalization, accessibility, SEO, typography, code highlighting, dark mode, GitHub editing, MDX, and Markdoc support, and highlights its adoption and ongoing development. ### Source excerpt Discover the latest news from 12 months of Starlight development ## Catalyst: Application layouts, navigation menus, description lists, and more DevFeed: [Catalyst: Application layouts, navigation menus, description lists, and more]() Original publisher: [Read original article]() Published: 2024-05-24T20:00:00Z Content type: release Language: en Sources: [Tailwind CSS Blog]() Topics: [Web Development](), [Dark Mode]() Tags: [api](), [dark-mode](), [react](), [ui](), [update]() ### AI overview Catalyst's first major update adds application layouts, navigation components, and description lists, and marks Catalyst as stable for production use with Headless UI v2.0 for React. ### Source excerpt We just published the first major update to Catalyst since releasing the development preview, with two new application layouts, navbar and sidebar components, description lists, and more. ## Change App Theme - Personalizing Accessibility DevFeed: [Change App Theme - Personalizing Accessibility]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2025-06-11T04:23:10.332000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Accessibility](), [personalization](), [Dark Mode](), [color](), [Users]() Tags: [accessibility](), [color](), [dark-mode](), [personalization](), [settings](), [users]() ### AI overview This tutorial explains how to add an app theme setting as part of personalizing accessibility. It presents four options: system settings, light, dark, and high-contrast themes, and describes storing the selection and applying the corresponding theme. ### Source excerpt I'm continuing the theme of personalizing accessibility, which I've started with my two posts. You can find them from the following links: Personalizing Accessibility with Settings Toggle Labels With Icons -- Personalizing Accessibility As a quick recap, in the previous posts, I've discussed how personalization can generally be the key to improving accessibility, and given a concrete example of adding a setting to hide or display labels with icons. In this blog post, I will continue with concrete examples. We will add a setting to change the app's theme. The user will have four options: follow system settings (the default), light, dark, and high-contrast color theme. Let's dive in. Why? Sometimes, users want to use their apps with a different theme than what their phone has as its theme. Personally, I use everything in dark mode, but I've encountered some apps with dark themes with colors that are unusable for me. They either have too much contrast, or sometimes, too little. In those cases, I wanted to change to a light theme. Usually, there has been no such option, so I've either abandoned the app or used it as little as possible if I needed to use it. So it's all about giving users the control. The minimum options for this type of setting would be the system default, light, and dark. But what about the high-contrast theme? Why would you want to add that? Who even needs it? High-Contrast Theme A high-contrast theme has a limited color palette with higher contrast colors. One concrete example is Windows High-Contrast Mode, which was developed for Windows 7 and later. Android provides a setting for high-contrast text, but it only applies to text, not graphics. WebAIM surveyed low-vision users in 2018, showing that 51.4% of the respondents (n=248) used a high-contrast mode. Low-vision users are a large group needing high-contrast themes, but there are others as well. For example, people with migraines, Irlene syndrome, or some people with dyslexia might benefit from hi ## We're hiring a Design Engineer + Staff Engineer DevFeed: [We're hiring a Design Engineer + Staff Engineer]() Original publisher: [Read original article]() Published: 2024-03-19T18:00:00Z Content type: article Language: en Sources: [Tailwind CSS Blog]() Topics: [Web Development](), [modern web development](), [Dark Mode]() Tags: [apis](), [css](), [dark-mode](), [design](), [documentation](), [react](), [tailwind](), [ui](), [work]() ### AI overview Tailwind CSS is hiring a Design Engineer and a Staff Software Engineer for new projects. The Design Engineer role covers interface design, Tailwind CSS prototypes, UI components, documentation demos, and related web projects. ### Source excerpt We just tagged the first public v4.0.0-alpha so you can start experimenting with it and help us get to a stable release later this year. ## Why Your App Should Have Both Dark And Light Themes DevFeed: [Why Your App Should Have Both Dark And Light Themes]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2024-03-07T04:11:46.439000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Accessibility](), [Dark Mode](), [Android](), [Jetpack Compose](), [XML](), [Material Design](), [Flutter]() Tags: [accessibility](), [android](), [android-development](), [dark-mode](), [flutter](), [jetpack-compose](), [material-design](), [xml]() ### AI overview This article explains why apps should support both dark and light themes for accessibility. It discusses how different visual conditions and preferences can make either theme more suitable, then outlines Android support for system theme switching and references implementation guidance for XML themes, Jetpack Compose, Material Design 3, and Flutter. ### Source excerpt You might have heard that your app should have a dark theme available. Some say it's because of preference, but it's actually also an accessibility thing. This blog post itself doesn't have the code to enable dark and light themes for the user. Instead, it explains why having both of them is essential and provides further reading on the topic -- yes, with links to some code and instructions as well. Accessibility of Dark and Light Themes Many people use everything they can in a dark theme. After all, staring at screens for a long time might be easier if the user interface uses darker colors. Using a dark theme instead of a light one also saves some battery. However, many people choose to use the dark theme because it is more accessible for them. For example, some vision issues might cause discomfort because of light or even wash out the rest of the person's vision. A white (or similar) background behind the text can cause these issues. Another reason is that dark themes often have better contrast (if they're designed properly). Now, if the dark theme is so great, why not just have the dark theme for the app and forget about the light theme? While dark theme is more accessible for many, some people benefit from light theme. For example, people with astigmatism may find light theme more accessible, and people with dyslexia might prefer light mode for readability. For reference, see, for example, this article: Dark mode: How accessible design raises the bar - Layth Sihan Luckily, defining light and dark themes in modern Android development is straightforward. Let's discuss the technical considerations of light and dark themes next. Technical Considerations Starting from Android 10 (SDK 29), there is a system setting for switching between dark and light modes. If you define your themes correctly, your app will respect that system-wide setting by default. To define a dark theme for your app using themes from XML files, follow the instructions in Android documentation: Imp ## Introducing, the Techno Tim Shop DevFeed: [Introducing, the Techno Tim Shop]() Original publisher: [Read original article]() Author: Techno Tim Published: 2024-02-17T13:00:00Z Content type: release Language: en Sources: [Techno Tim]() Topics: [Dark Mode]() Tags: [collection](), [dark-mode](), [life](), [merch](), [shop]() ### AI overview Techno Tim announces the launch of the Techno Tim Shop and its first drop, the Dark Mode Everything collection. The collection was designed in-house, and supplies are limited for the initial drop. ### Source excerpt Today marks a very special day for me. It's something I've been working on for quite some time, and it's finally ready for everyone to see! 🎉 Today, I launched the Techno Tim Shop with its first drop: the "Dark Mode Everything" collection. This collection was designed in-house, quite literally, by my wife in our own house, and it represents my love for Dark Mode. There's something for everyone... ## All I want for Christmas... from Slack DevFeed: [All I want for Christmas... from Slack]() Original publisher: [Read original article]() Author: Kelsey Mills Published: 2023-12-18T16:50:24Z Content type: opinion Language: en Sources: [The incident.io Blog]() Topics: [Slack](), [incident](), [Messaging](), [Dark Mode](), [Forms](), [changelog]() Tags: [changelog](), [dark-mode](), [forms](), [incident](), [incident-channel](), [incident-management](), [incident-response](), [messaging](), [outage](), [post-mortem](), [product-design](), [slack](), [slack-incident](), [web]() ### AI overview This article presents incident.io's Christmas wishlist for Slack, focusing on improvements to Slack Block Kit. It requests broader support for inline images, richer text block capabilities, accessories in rich text blocks, theme-aware attachment colors, and more flexible attachment placement. The article also describes how incident.io uses Slack for incident declaration, response, announcements, and updates. ### Source excerpt At incident.io we're big fans of the Slack Block Kit, and proud of what we've built with it. This is our Christmas wishlist for the features we'd love to see next year. ## How Firebase Added Independent Dark and Light Themes to the Firebase Console DevFeed: [How Firebase Added Independent Dark and Light Themes to the Firebase Console]() Original publisher: [Read original article]() Author: Przemek Abratowski; Amanda Ke Published: 2023-11-13T00:00:00Z Content type: article Language: en Sources: [Firebase Blog]() Topics: [Dark Mode](), [Firebase](), [Accessibility](), [CSS](), [ui](), [Design system]() Tags: [accessibility](), [css](), [dark-mode](), [firebase](), [firebase-console](), [launch](), [themes](), [tokens](), [ui]() ### AI overview Firebase describes the design and implementation of dark mode and a light-theme refresh for the Firebase Console. The article explains why the themes were made independent, how accessibility and legibility shaped the design, and how CSS-variable-based design tokens support the modes. ### Source excerpt News, tutorials, and updates from the Firebase team. ## Next.js 13.5 DevFeed: [Next.js 13.5]() Original publisher: [Read original article]() Author: Tobias Koppers Published: 2023-09-19T18:00:00Z Content type: release Language: en Sources: [Next.js Blog]() Topics: [web applications](), [Dark Mode]() Tags: [dark-mode](), [dev](), [memory](), [next-js](), [performance](), [startup]() ### AI overview Next.js 13.5 improves local development startup, Fast Refresh, and memory use, while adding optimized package imports and other feature improvements. ### Source excerpt Next.js 13.5 includes 22% faster local server startup, 29% faster HMR (Fast Refresh), 40% less memory usage, and more. ## Bootstrap 5.3.2 DevFeed: [Bootstrap 5.3.2]() Original publisher: [Read original article]() Author: Julien Déramond Published: 2023-09-14T14:30:00Z Content type: release Language: en Sources: [Bootstrap.com]() Topics: [Bootstrap](), [Dark Mode](), [Dart](), [Documentation](), [npm]() Tags: [bug-fixes](), [compatibility](), [dark-mode](), [dart](), [documentation](), [npm](), [release](), [v5]() ### AI overview Bootstrap v5.3.2 is a release focused on bug fixes, documentation improvements, and color mode enhancements. It fixes Dart Sass deprecation warnings and collapse targets using multiple IDs, improves contrast in light and dark modes, adds color customization, and updates documentation and community links. ### Source excerpt Bootstrap v5.3.2 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights! Highlights Passing a percentage unit to the global abs() is deprecated since Dart Sass v1.65.0. It resulted in a deprecation warning when compiling Bootstrap with Dart Sass. This has been fixed internally by changing the values passed to the divide() function. The divide() function has not been fixed itself so that we can keep supporting node-sass cross-compatibility. In v6, this won't be an issue as we plan to drop support for node-sass. Using multiple ids in a collapse target wasn't working anymore and has been fixed. Color modes Increased color contrast of form range track background in light and dark modes. Fixed table state rendering for color modes with a focus on the striped table in dark mode to increase color contrast. Allow color customization for color modes. Docs Added alternative CDNs section in Getting started -> Download. Added Discord and Bootstrap subreddit links in README and Getting started -> Introduction: Discord maintained by the community Bootstrap subreddit Get the release Head to https://getbootstrap.com for the latest. It's also been pushed to npm: ## Customising Android app UI with themes DevFeed: [Customising Android app UI with themes]() Original publisher: [Read original article]() Author: Maxim Kostenko Published: 2023-07-19T11:14:44Z Content type: tutorial Language: en Sources: [Revolut Engineering]() Topics: [Android](), [ui](), [Dark Mode](), [Development](), [Mobile]() Tags: [android](), [android-app-development](), [android-development](), [dark-mode](), [fintech](), [layout](), [themes](), [ui](), [ui-design]() ### AI overview This tutorial explains how to customize Android app interfaces with themes. It covers light and dark mode, Android 12 Dynamic Color, and user-selectable color themes, drawing on Revolut's experience and a demo project. ### Source excerpt Keeping an app fresh and engaging is important to provide users with an enjoyable experience. One effective method is to add a personal touch to your app by supporting different themes in the application. In this article, we'll explore the various options that developers have to enhance user experience with the themes. We'll also share our company's experience in building themes, and the technical hurdles we faced during Android development. Let's dive in! Depending on your app and company goals, you have several options to consider when implementing theming in your Android app. Here are a few: Switching between light and dark mode: This has become almost a necessity on mobile platforms due to users' preference for dark mode Implementing dynamic colours. Android 12 introduced Dynamic Color, allowing you to adapt your app's colour scheme to match the user's wallpaper Going above and beyond, as we did in Revolut: We offer all the options mentioned above, and also provide our customers with the ability to choose colour-based themes in the app. This allows them to select their favourite colour from a predefined palette, and the app's appearance changes to match it By leveraging these options, you can create an app with a look and feel that aligns with your company's branding and goals. In this article, we'll build a simple app that takes advantage of all the mentioned customisations options: Switching between light and dark mode With many platforms now offering system-wide dark mode, implementing a dark theme in your app has become almost an industry standard. While there are numerous resources available for implementing dark mode, we won't delve into all the technical details here. That said, if you're interested in learning more about implementing a dark theme in Android, you can refer to the official guide. In our demo app, we support dark and light mode by defining two styles: Light:https://medium.com/media/68c7ff182cdd7a8095299976aa1eee50/hrefDark:https://medium.co ## Threads as a Social Platform for Developers DevFeed: [Threads as a Social Platform for Developers]() Original publisher: [Read original article]() Author: Eric Elliott Published: 2023-07-13T21:32:22Z Content type: opinion Language: en Sources: [Eric Elliot]() Topics: [ui](), [image slider](), [Dark Mode]() Tags: [ai](), [app](), [dark-mode](), [design](), [developers](), [features](