Dark Mode | Techlist.io

discordAug 4, 20262 min readCurated summary

Squircles, Styles, and Spacing: How Your Feedback is Helping Improve Mobile

Discord is updating its mobile app to align more closely with the refreshed desktop experience. The changes introduce consistent themes and shape conventions, improve accessibility and customization, and simplify the chat bar. The overall goal is to make Discord feel familiar and consistent regardless of platform. ## Desktop Themes Come to Mobile - Mobile now includes all four desktop base themes: - Light - Ash - Dark - Onyx - Ash restores the classic dark appearance with improved contrast for accessibility. - Onyx provides true black AMOLED backgrounds instead of dark gray, potentially reducing battery use on OLED displays. - Users can adjust contrast and saturation through Accessibility settings. - Nitro users’ voice and video tile backgrounds now match their selected profile theme across desktop and mobile. ## More Flexible Theme Customization - Users can choose which Light and Dark themes activate based on their device’s appearance mode. - The “Same as Device Theme” option is available under Appearance settings. - Device-theme synchronization takes priority over “Sync Across Devices.” - Themes such as Mint Apple for Light mode and Noir for Dark mode can be assigned to different times of day. ## Consistent Shapes Across the Interface - Discord now follows a simple visual rule: - People, including friends and bots, use circular avatars. - Servers and apps use squircle-shaped icons. - The distinction helps users identify people versus things while scanning lists. - Rounded corners on buttons, inputs, and containers have also been standardized. - Direct messages and group DMs remain circular to preserve their “friend circle” identity. ## A Less Crowded Chat Bar - The chat bar has been reorganized to create more space for composing messages. - Emoji, Gift, Voice Message, and frequently used quick actions remain visible near the right side. - Threads and app usage have moved into the **+** menu. - Long-pressing **+** provides a shortcut to any action without opening the full menu. - Although Threads and Apps now require an additional tap, the long-press gesture is intended to keep them readily accessible. Together, these updates make mobile Discord more visually consistent with desktop while giving users greater control over themes and preserving quick access to common actions.

Read original

Dark Mode Design Systems Discord Accessibility+3

discordFeb 18, 20262 min readCurated summary

How to Change Your Theme to Bring Your Vibe to Discord

Discord’s theme settings let users personalize the app across desktop and mobile. Everyone gets four default themes, while Nitro members receive 28 additional color themes, custom theme creation, and extra app icons. Themes generally sync across devices, making it easy to maintain a consistent look. ## Changing Themes on Desktop - Open **User Settings > Appearance**. - Choose from: - **Default Themes**, available to everyone - **Color Themes**, available to Nitro members - Themes apply instantly. - Use **Preview Themes** to view any theme, including Nitro-exclusive options, before selecting it. ## Changing Themes on Mobile - Open the **You** tab. - Tap the gear icon, then go to **Appearance > Theme**. - Scroll horizontally through the available themes and select one. - Themes sync between desktop and mobile by default. - Disable **Sync Across Clients** if you want separate themes on different devices. ## Default Themes for Everyone All Discord users can choose among four themes: - Light - Ash - Dark - Onyx Additional options include: - **Sync with computer/device**, which automatically switches between Light and Dark. - **Dark Sidebar**, available with Light theme, keeping navigation areas dark while conversations remain light. ## Nitro Color Themes Nitro members get 28 additional color themes, including: - Chroma Glow - Citrus Sherbert - Midnight Blurple - Retro Raincloud These options appear under the **Color Themes** section in Appearance settings. ## Custom Themes with Nitro - Nitro members can create custom color themes using up to **five colors**. - Custom themes must currently be created on desktop. - Once created, they sync to mobile devices. ## Custom Discord App Icons Nitro also includes approximately 23 alternative app icons, with styles such as vaporwave, space, and gaming. - On desktop, the selected icon appears inside the app. - On mobile, it changes the device’s homescreen icon. - Icon choices are device-specific, so desktop and mobile can use different icons. To personalize Discord, open Appearance settings, select a theme or custom color scheme, and optionally choose a matching app icon.

Read original

Dark Mode Discord Desktop App Mobile App+1

tossDec 14, 2025Original article

Painting the Wheels of a Moving Train: (opens in new tab)

Toss Design System (TDS) underwent its first major color system overhaul in seven years to address deep-seated issues with perceptual inconsistency and fragmented cross-platform management. By transitioning to a perceptually uniform color space and an automated token pipeline, the team established a scalable infrastructure capable of supporting the brand's rapid expansion into global markets and diverse digital environments. ### Legacy Issues in Color Consistency * **Uneven luminosity across hues:** Colors sharing the same numerical value (e.g., Grey 100 and Blue 100) exhibited different perceptual brightness levels, leading to "patchy" layouts when used together. * **Discrepancies between Light and Dark modes:** Specific colors, such as Teal 50, appeared significantly more vibrant in dark mode than in light mode, forcing designers to manually customize colors for different themes. * **Accessibility hurdles:** Low-contrast colors often became invisible on low-resolution devices or virtual environments, failing to meet consistent accessibility standards. ### Technical Debt and Scaling Barriers * **Interconnected palettes:** Because the color scales were interdependent, modifying a single color required re-evaluating the entire palette across all hues and both light/dark modes. * **Fragmentation of truth:** Web, native apps, and design editors managed tokens independently, leading to "token drift" where certain colors existed on some platforms but not others. * **Business expansion pressure:** As Toss moved toward becoming a "super-app" and entering global markets, the manual process of maintaining design consistency became a bottleneck for development speed. ### Implementing Perceptually Uniform Color Spaces * **Adopting OKLCH:** Toss shifted from traditional HSL models to OKLCH to ensure that colors with the same lightness values are perceived as equally bright by the human eye. * **Automated color logic:** The team developed an automation logic that extracts accessible color combinations (backgrounds, text, and assets) for any input color, allowing third-party mini-apps to maintain brand identity without sacrificing accessibility. * **Chroma Clamping:** To ensure compatibility with standard RGB displays, the system utilizes chroma clamping to maintain intended hue and lightness even when hardware limitations arise. ### Refined Visual Correction and Contrast * **Solving the "Dark Yellow Problem":** Since mathematically consistent yellow often appears muddy or loses its "yellowness" at higher contrast levels, the team applied manual visual corrections to preserve the color's psychological impact. * **APCA-based Dark Mode optimization:** Utilizing the Advanced Perceptual Contrast Algorithm (APCA), the team increased contrast ratios in dark mode to compensate for human optical illusions and improve legibility at low screen brightness. ### Designer-Led Automation Pipeline * **Single Source of Truth:** By integrating Token Studio (Figma plugin) with GitHub, the team created a unified repository where design changes are synchronized across all platforms simultaneously. * **Automated deployment:** Designers can now commit changes and generate pull requests directly; pre-processing scripts then transform these tokens into platform-specific code for web, iOS, and Android without requiring manual developer intervention. The transition to a token-based, automated color system demonstrates that investing in foundational design infrastructure is essential for long-term scalability. For organizations managing complex, multi-platform products, adopting perceptually uniform color spaces like OKLCH can significantly reduce design debt and improve the efficiency of cross-functional teams.

Dark Mode Figma Design Systems Accessibility+4

figmaNov 20, 20243 min readCurated summary

The Making of the Figma Pattern Library | Figma Blog

Figma rebuilt its internal design system during the UI3 redesign after years of growth had produced inconsistent components, detached instances, and a fragmented workflow. The resulting Figma Pattern Library (FPL) was created through close designer-engineer collaboration and uses variables, APIs, and shared standards to keep design intent aligned with shipped code. Its goal is to provide both a reliable source of truth and a flexible foundation for building consistent, accessible products across Figma’s product suite. ## Why Figma rebuilt its design system - Figma’s internal system had become increasingly fragmented as the company and product portfolio expanded. - Components that were intended to be identical had accumulated subtle but important differences. - Detached component instances made consistency difficult to maintain. - The upcoming UI3 rollout made these problems impossible to ignore. - The team needed a foundation that could support consistent, efficient development across all Figma products. ## A paired design-and-engineering approach - A five-person team of designers and engineers led the rebuild. - The team modeled its workflow on pair programming: - One discipline would actively build. - The other would review and provide immediate feedback. - This collaboration helped bridge the gap between design intent and technical implementation. - The system was designed to be both: - A source of truth for shared UI decisions. - A springboard for future product development. - The effort resulted in the new Figma Pattern Library, or FPL. ## Using variables as a shared language - The previous system relied on Figma styles for designers and a separate Google Sheet for engineers’ color tokens. - Because the spreadsheet often lagged behind product changes, designs and production code diverged. - FPL replaced this disconnected process with Figma variables and the Figma REST API. - Typography variables were introduced and aliased through existing typography styles. - Color styles were migrated to color variables as a centralized source of truth. - CSS definitions were added to color variables so Dev Mode could display the correct variable names during inspection. ## Primitive and semantic color systems - FPL organized colors into two main variable collections: - **Primitive variables:** Color ramps organized by hue and numbered from 100 to 1000. - **Semantic variables:** Contextual names based on Figma’s dark-mode schema. - Semantic variables support multiple themes and products, including: - Light and dark modes. - Figma Design. - FigJam. - Slides. - Dev Mode. - Semantic variables alias primitive variables, allowing colors to be changed across themes and products without manually updating every component. - This structure enables shared components to adapt to different contexts while preserving visual consistency. The practical lesson is that a scalable design system requires more than a component library: it needs shared ownership, synchronized design and engineering tokens, and variable-based foundations that can support multiple products and themes.

Read original

Dark Mode Figma Design Systems Accessibility+4

figmaJul 20, 20223 min readCurated summary

Illuminating dark mode | Figma Blog

Dark mode looked like a simple color swap, but Figma found it required a broad redesign of its UI architecture and engineering processes. The project aimed not only to satisfy user demand and improve accessibility, but also to create a scalable foundation for future themes. Figma ultimately treated dark mode as a systems problem involving product scope, shared components, edge cases, and maintainability. ## Accessibility and User Demand - Dark mode became Figma’s most requested feature after users complained about bright screens during late-night work. - It could improve legibility for people with certain visual impairments and aligned with Figma’s mission of making design accessible. - The team also considered WCAG contrast requirements rather than treating the feature as purely cosmetic. - Figma shipped dark mode in May 2022 after months of product, design, and engineering work. ## The Complexities of Color - The initial idea was to replace light colors with dark ones, but this approach would not scale as the product evolved. - Figma wanted a solution that: - Made new features support dark mode by default. - Simplified onboarding for engineers. - Reduced regressions when experimenting with themes. - Could support additional themes in Figma and FigJam. - Some decisions were straightforward: - Light editor panels would become dark. - Text and icons would become light foreground elements. - Toolbars and menus already dark in light mode would remain dark. - Other questions required product decisions: - Which parts of Figma should support dark mode? - Should user-created canvas content, such as the canvas background, change with the theme? - Should colors rendered by the C++ editor engine, including the transparency grid, also change? ## Auditing the Product Surface - Before coding began, team members audited Figma’s UI to estimate the work required for each surface. - The project involved far more than the main editor: - Modals - Panels - Toolbars - Dropdowns and submodals - Hidden states and complex edge cases - Each surface needed its full range of views and states considered, not just its most commonly seen appearance. ## Building a Systematic Approach - At kickoff, ten product engineering teams owned major parts of Figma’s interface. - Shared UI components had to be refactored so they could support dark mode where appropriate while remaining unchanged on unsupported surfaces. - The team recognized that a small central engineering group could not manually handle every component and state. - This drove the need for a systematic, regression-resistant approach that could scale across teams and continue supporting future product development. Figma’s experience shows that theme support should be designed as an extensible system, not implemented as a one-time recoloring exercise. Teams planning similar work should begin with a full product audit, define theme boundaries clearly, and invest in shared components and automation that make future themes easier to add.

Read original

Dark Mode Design Systems User Interface Accessibility+2