BestHub
Sign in
Tagged articles

dark-mode

41 articles · Page 1 of 1
CodeNotes
CodeNotes
May 17, 2026 · Frontend Development

Modern CSS Development Techniques: Ditch JS, Embrace Pure CSS Possibilities

This article provides a comprehensive guide to modern CSS techniques—including custom properties, native nesting, logical properties, container queries, the :has() selector, dark‑mode theming, pure‑CSS accordions, dialogs, tabs, tooltips, scroll‑driven animations, parallax, sticky elements, advanced Grid layouts, Subgrid, @layer, @scope, color‑mix, math functions, carousels, lazy‑load placeholders, form validation, theme toggles, and performance optimizations—showing how to replace JavaScript‑heavy interactions with pure CSS solutions.

container-queriescsscss-variables
0 likes · 34 min read
Modern CSS Development Techniques: Ditch JS, Embrace Pure CSS Possibilities
JD Cloud Developers
JD Cloud Developers
Sep 19, 2025 · Mobile Development

Mastering Dark Mode in ROMA: A Complete Guide for Mobile Developers

This article explains how the ROMA cross‑platform framework supports dark mode on mobile apps, detailing configuration options, view‑mode attributes, color mapping, iOS trait protocols, and code examples for seamless theme switching, helping developers implement efficient dark‑mode adaptations.

Mobile DevelopmentROMATheme
0 likes · 11 min read
Mastering Dark Mode in ROMA: A Complete Guide for Mobile Developers
JavaScript
JavaScript
Aug 27, 2025 · Frontend Development

Turn Any Site Dark with One CSS Line: How Filter Invert & Hue‑Rotate Work

This article shows how a single CSS rule using the filter property with invert(1) and hue‑rotate(180deg) can instantly give any website a decent dark‑mode appearance, explains the underlying colour transformations, and provides simple fixes for media elements that get unintentionally inverted.

cssdark-modehack
0 likes · 5 min read
Turn Any Site Dark with One CSS Line: How Filter Invert & Hue‑Rotate Work
21CTO
21CTO
Aug 25, 2025 · Mobile Development

What New Dark‑Mode and Theming Features Arrive in Android 16 QPR2 Beta?

Google’s Android 16 QPR2 Beta 1, released in August, brings intelligent dark‑mode inversion, forced themed icon colors, parental‑control settings, improved data migration, PDF annotation, and Bluetooth LE audio sharing, with Pixel beta users receiving the update now and a full rollout slated for later this year.

AndroidBeta releaseMobile Development
0 likes · 4 min read
What New Dark‑Mode and Theming Features Arrive in Android 16 QPR2 Beta?
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Jul 23, 2024 · Frontend Development

A Comprehensive Guide to Tailwind CSS: Core Concepts, Setup, and Advanced Features

This article provides an in‑depth overview of Tailwind CSS, covering its utility‑first philosophy, atomic CSS approach, configuration options, responsive and dark‑mode design, installation steps with PostCSS, JIT compilation, performance best practices, and a preview of the upcoming v4 engine.

ConfigurationJIT CompilationTailwind CSS
0 likes · 29 min read
A Comprehensive Guide to Tailwind CSS: Core Concepts, Setup, and Advanced Features
21CTO
21CTO
Feb 22, 2024 · Frontend Development

Top 2024 Web Design Trends: AI, Minimalism, 3D Immersion & Dark Mode

This article outlines the major 2024 web design trends—including AI‑powered tools, minimalist aesthetics, immersive 3D effects, dark mode, neomorphism, artistic typography, micro‑interactions, and brutalist design—explaining their benefits and showcasing practical examples for modern front‑end developers.

3D ImmersionAI toolsMicro‑Interactions
0 likes · 8 min read
Top 2024 Web Design Trends: AI, Minimalism, 3D Immersion & Dark Mode
Alipay Experience Technology
Alipay Experience Technology
Aug 12, 2022 · Frontend Development

What’s New in Electron 20? Dark Mode, macOS Panels, Sandbox & More

Electron 20 introduces Windows immersive dark mode support, a new macOS panel BrowserWindow type, default sandboxing for renderers, updated native module build requirements, and Chrome 104/103 features like local font access and HTTP 103 early hints, all detailed with code examples and screenshots.

BrowserWindowChromeDesktop Development
0 likes · 5 min read
What’s New in Electron 20? Dark Mode, macOS Panels, Sandbox & More
Alibaba Terminal Technology
Alibaba Terminal Technology
May 19, 2022 · Frontend Development

The Future of Responsive Web Design: Component‑Driven, Container Queries & Multi‑Screen Support

This article traces the evolution of responsive web design from Ethan Marcotte’s 2010 breakthrough to today’s component‑driven approach, covering CSS media queries for user preferences, the emerging container‑query syntax, and new media features that enable layouts to adapt to multi‑screen and foldable devices.

component-drivencss container queriesdark-mode
0 likes · 55 min read
The Future of Responsive Web Design: Component‑Driven, Container Queries & Multi‑Screen Support
Xueersi 1-on-1 Technology Team
Xueersi 1-on-1 Technology Team
Oct 14, 2021 · Frontend Development

Mastering Theme Switching: 8 Proven Methods to Implement Dark/Light Modes in Web Apps

This article explores eight practical techniques for implementing theme switching in web applications—including class toggling, stylesheet swapping, CSS variables, alternate rel links, Less modifyVars, Ant Design/Vant custom themes, Element‑UI dynamic theming, and JSS—detailing code snippets, advantages, and limitations of each approach.

JSSJavaScriptTheme Switching
0 likes · 11 min read
Mastering Theme Switching: 8 Proven Methods to Implement Dark/Light Modes in Web Apps
Taobao Frontend Technology
Taobao Frontend Technology
Oct 11, 2021 · Frontend Development

Top Frontend Updates: ESLint 8 Release, New React Tooling Team, Build Tools & Dark Mode Guide

This roundup covers ESLint 8’s full ES2022 support, React’s new Developer Tooling team, several open‑source build tools such as unbuild, tsup, refine and VS Code’s Webview UI Toolkit, plus featured articles on a TypeScript‑based autonomous parking algorithm and a comprehensive guide to implementing Dark Mode on the web.

Build ToolsReActWeb Development
0 likes · 5 min read
Top Frontend Updates: ESLint 8 Release, New React Tooling Team, Build Tools & Dark Mode Guide
Taobao Frontend Technology
Taobao Frontend Technology
Aug 16, 2021 · Frontend Development

Latest Frontend Releases: Next.js 11.1, Vue 3.2, and Cutting‑Edge Open‑Source Tools

This roundup highlights the Next.js 11.1 and Vue 3.2 releases with their new features and performance boosts, introduces several emerging open‑source projects such as quickjs‑rs, MDX, mdast, Puerts, wasm‑pack, instant.page and txiki.js, and summarizes practical articles on one‑click dark‑mode support and dramatically shrinking Next.js bundle size.

Next.jsVuedark-mode
0 likes · 8 min read
Latest Frontend Releases: Next.js 11.1, Vue 3.2, and Cutting‑Edge Open‑Source Tools
21CTO
21CTO
Jun 19, 2021 · Frontend Development

Build a Dark Mode Switcher with HTML, CSS, and JavaScript

This step‑by‑step tutorial shows how to create a dark‑mode toggle for a web page using HTML structure, CSS styling (including dark‑mode rules), and a small JavaScript script that adds or removes the dark class on user interaction.

HTMLJavaScriptcss
0 likes · 9 min read
Build a Dark Mode Switcher with HTML, CSS, and JavaScript
JD.com Experience Design Center
JD.com Experience Design Center
May 18, 2021 · Frontend Development

Mastering Dark Mode: Design Principles, Color Contrast, and Accessibility

This article explains the purpose of dark mode, outlines design principles such as layer hierarchy, color contrast, saturation, text opacity, and state representation, and distinguishes dark mode from night mode, providing practical guidelines for creating accessible and visually appealing dark‑theme interfaces.

Material DesignUI designaccessibility
0 likes · 8 min read
Mastering Dark Mode: Design Principles, Color Contrast, and Accessibility
58UXD
58UXD
Apr 9, 2021 · Frontend Development

2021 UI Design Trends: From Glassmorphism to Dark Mode and Beyond

This article surveys the 2021 UI/UX design trends—including Glassmorphism, 3D elements, Dark Mode, real‑photo integration, and Colorless UI—explaining their origins, key characteristics, and why designers should consider adopting them to create richer, more engaging digital experiences.

20213D designColorless UI
0 likes · 6 min read
2021 UI Design Trends: From Glassmorphism to Dark Mode and Beyond
JD Retail Technology
JD Retail Technology
Mar 19, 2021 · Frontend Development

Design and Implementation of JD Skinning PaaS Platform

This article details the background, research, system architecture, specific implementation, SDK integration, and future planning of JD's skinning PaaS platform, which unifies UI theming across web and native apps, supports dark mode, and optimizes resource management.

CMSThemingdark-mode
0 likes · 10 min read
Design and Implementation of JD Skinning PaaS Platform
Ctrip Technology
Ctrip Technology
Feb 4, 2021 · Frontend Development

Front‑end Middle‑Platform Development for Ctrip and Trip: Componentization, Dark Mode, Internationalization, and Automated Testing

The article describes how Ctrip and Trip unified their disparate front‑end stacks by building a shared component library, splitting styles, adapting dark mode, implementing i18n/l10n, integrating automated testing in GitLab pipelines, and streamlining release and monitoring to improve development efficiency and reduce duplication.

dark-modefrontendi18n
0 likes · 19 min read
Front‑end Middle‑Platform Development for Ctrip and Trip: Componentization, Dark Mode, Internationalization, and Automated Testing
ByteFE
ByteFE
Jan 25, 2021 · Frontend Development

Technical Selection and Design Considerations for a Custom Front-End Component Library

This article outlines the decision‑making process for styling, icon, dark‑mode, RTL, and global configuration choices when building a custom front‑end component library, comparing Sass/Less, Atomic CSS, CSS‑in‑JS, various icon strategies, and implementation patterns for maintainability and scalability.

CSS-in-JSComponent LibraryRTL
0 likes · 18 min read
Technical Selection and Design Considerations for a Custom Front-End Component Library
Sohu Tech Products
Sohu Tech Products
Nov 11, 2020 · Frontend Development

Low‑Cost Dark Mode Implementation Using Pure CSS :checked, +/~ Selectors and Filter Functions

This article explains how to create a website‑wide dark mode switch with only HTML and CSS by using an invisible checkbox as a toggle, the :checked pseudo‑class together with +/~ sibling selectors, and CSS filter functions like invert() and hue‑rotate() to transform colors, images and media without any JavaScript.

Pure CSScssdark-mode
0 likes · 12 min read
Low‑Cost Dark Mode Implementation Using Pure CSS :checked, +/~ Selectors and Filter Functions
政采云技术
政采云技术
Aug 16, 2020 · Frontend Development

Comprehensive Guide to Dark Mode Adaptation for Web and Native Apps

This article provides a detailed guide on implementing dark mode across web (H5) and native mobile applications, covering system compatibility, CSS media queries, CSS variables, postcss handling, component library adaptation, and platform-specific configurations for iOS, Android, and Flutter.

ResponsiveThemedark-mode
0 likes · 17 min read
Comprehensive Guide to Dark Mode Adaptation for Web and Native Apps
WeChatFE
WeChatFE
Jun 19, 2020 · Frontend Development

Mastering Dark Mode for WeChat Articles: Techniques, Algorithms & Performance

This article explores how to implement Dark Mode in WeChat public platform articles, covering detection methods, challenges of custom inline styles, comparative algorithms from Chrome and Outlook, a custom color‑processing solution, and performance optimizations for first‑screen rendering.

color algorithmdark-modeperformance
0 likes · 16 min read
Mastering Dark Mode for WeChat Articles: Techniques, Algorithms & Performance
Huawei Cloud Developer Alliance
Huawei Cloud Developer Alliance
May 22, 2020 · Frontend Development

Mastering Dark Mode with CSS Variables: A Step‑by‑Step Guide

This article explains how to implement a flexible dark‑mode theme using modern CSS custom properties, covering variable definition, runtime theme switching, Sass/Less integration, media‑query detection, image handling, event‑bus notifications, polyfills for older browsers, and the challenges of color mapping.

Theme Switchingcss-variablesdark-mode
0 likes · 16 min read
Mastering Dark Mode with CSS Variables: A Step‑by‑Step Guide
58 Tech
58 Tech
Apr 8, 2020 · Mobile Development

Dynamic UI Skinning (Gray‑White Mode) for Mobile Apps: Analysis, Evaluation and Implementation

This article analyses the differences between PC and mobile Internet, evaluates how major Chinese apps adapted their launch, splash and home screens to a gray‑white theme for the Qingming memorial day, and discusses various technical solutions such as theme switching, skin packages, server‑side control and local color manipulation for mobile UI dynamic theming.

AndroidDynamic ThemingMobile UI
0 likes · 18 min read
Dynamic UI Skinning (Gray‑White Mode) for Mobile Apps: Analysis, Evaluation and Implementation
58 Tech
58 Tech
Mar 23, 2020 · Mobile Development

Dark Mode Adaptation Practices in the 58.com Mobile App

This article details the motivations, design goals, technical solutions for native iOS, React Native and Web pages, handling of large‑scale parallel development, compatibility strategies, performance measurements and future plans of the dark‑mode adaptation implemented in the 58.com mobile application.

AndroidMobile UIReact Native
0 likes · 20 min read
Dark Mode Adaptation Practices in the 58.com Mobile App
JD Retail Technology
JD Retail Technology
Mar 17, 2020 · Mobile Development

How JD’s Dark Mode Component Brings Night‑Mode to iOS 9+ Apps

This article explains how JD’s dark‑mode foundation component enables iOS 9+ apps to support system and manual dark mode, detailing its architecture, integration steps, custom updaters, window‑level overrides, snapshot handling, and lessons learned for reliable night‑mode implementation.

Mobile DevelopmentObjective‑CTheme Switching
0 likes · 11 min read
How JD’s Dark Mode Component Brings Night‑Mode to iOS 9+ Apps
Alibaba Terminal Technology
Alibaba Terminal Technology
Feb 27, 2020 · Frontend Development

Mastering Dark Mode: CSS & JavaScript Techniques for Seamless Light/Dark Switching

This article explains why dark mode has become a web design focus, describes system‑level dark/light themes, and provides step‑by‑step CSS and JavaScript solutions—including media queries, custom properties, color‑scheme, filters, mix‑blend‑mode, image handling, and loading strategies—to implement reliable dark mode across browsers.

JavaScriptaccessibilitycss
0 likes · 25 min read
Mastering Dark Mode: CSS & JavaScript Techniques for Seamless Light/Dark Switching
Taobao Frontend Technology
Taobao Frontend Technology
Feb 19, 2020 · Frontend Development

Mastering Dark Mode: CSS & JavaScript Techniques for Modern Web Design

This article explains why dark mode has become a web design priority, describes the system‑level nature of dark/light themes, and provides practical CSS and JavaScript solutions—including media queries, custom properties, color‑scheme, filters, mix‑blend‑mode, and transition effects—to implement seamless dark mode support across browsers.

JavaScriptWeb Developmentcss
0 likes · 25 min read
Mastering Dark Mode: CSS & JavaScript Techniques for Modern Web Design
58UXD
58UXD
Feb 19, 2020 · Frontend Development

How Design Systems Transform Product Development and Reduce Design Debt

This article explores the rise of design systems, their historical roots in component‑based development, the cost of design debt, practical examples of savings, common misconceptions, visual‑coding for dark mode, and how they enable faster prototyping, iteration, and cross‑team collaboration in modern frontend engineering.

UI/UXcomponent developmentdark-mode
0 likes · 20 min read
How Design Systems Transform Product Development and Reduce Design Debt
Youku Technology
Youku Technology
Jan 7, 2020 · Mobile Development

Comprehensive Design and Technical Summary of Full Dark Mode Support for the Youku App

The article delivers a detailed 117‑page, eleven‑chapter overview of Youku’s full Dark Mode implementation, explaining the motivation, battery and accessibility benefits, design methodology—including color token systems and contrast hierarchy—and the coordinated technical execution across iOS and Android platforms.

Androidaccessibilitydark-mode
0 likes · 13 min read
Comprehensive Design and Technical Summary of Full Dark Mode Support for the Youku App
Programmer DD
Programmer DD
Dec 31, 2019 · Frontend Development

Why Your WeChat Articles Turn Dark and How to Force Light Mode in Chrome

This article explains why WeChat articles may appear with a black background due to macOS dark mode and the CSS prefers‑color‑scheme media feature, and provides two practical solutions—command‑line tweaks for Chrome and a lightweight app—to restore the original light appearance.

Chromecssdark-mode
0 likes · 5 min read
Why Your WeChat Articles Turn Dark and How to Force Light Mode in Chrome
Baidu App Technology
Baidu App Technology
Dec 18, 2019 · Mobile Development

How Baidu’s BDPAppearance Framework Enables Efficient Dark Mode Theming on iOS

This article explains the design, implementation, and performance of Baidu’s BDPAppearance skin‑theme framework for iOS, showing how developers can adopt low‑cost APIs to switch colors and images across thousands of views, compare it with other open‑source solutions, and manage theme resources at scale.

BDPAppearanceTheme Frameworkdark-mode
0 likes · 9 min read
How Baidu’s BDPAppearance Framework Enables Efficient Dark Mode Theming on iOS
FangDuoduo UEDC
FangDuoduo UEDC
Nov 1, 2019 · Mobile Development

How to Efficiently Adapt Dark Mode for an iOS App: A Practical Walkthrough

This article details a step‑by‑step case study of adapting dark mode for the FangDuoDuo iOS app, covering why it matters, common misconceptions, color‑palette redesign, mapping tables, component adjustments, asset handling, and final verification to ensure a seamless user experience.

Mobile Developmentcolor contrastdark-mode
0 likes · 10 min read
How to Efficiently Adapt Dark Mode for an iOS App: A Practical Walkthrough
网易UEDC
网易UEDC
Feb 18, 2019 · Frontend Development

Mastering Dark Mode UI: Essential Design Tips for Elegant Interfaces

This article explores the advantages and challenges of dark mode UI, offering practical guidelines on text color, spacing, typography, icon design, button states, dividers, color usage, visual hierarchy, and whitespace to create refined and readable dark‑theme applications.

UI designdark-modefrontend
0 likes · 7 min read
Mastering Dark Mode UI: Essential Design Tips for Elegant Interfaces