Tech does not just watch: Take action against Russia’s war on Ukraine 🇺🇦, and take action against Israel’s occupation, destruction, and ethnic cleansing of Palestine (history) 🇵🇸 Hide

Frontend Dogma

“dark-mode” News Archive

Definition, related topics, and tag feed

Definition · Supertopics: design-patterns (non-exhaustive) · “dark-mode” RSS feed (per email)

Entry (Sources) and Additional TopicsDate#
“light-dark()” Isn’t Always the Same as “prefers-color-scheme” (ste)72
css, functions, colors
Dark Mode Is the New Comic Sans (and You Know It) (web)71
design, accessibility
Implementing Dark Mode Toggle Without JavaScript70
toggles, css
Top 11 CSS Tricks Every Web Developer Should Know69
css, custom-properties, layout, animations, selectors, positioning, resets, tips-and-tricks
Should the CSS “light-dark()” Function Support More Than Light and Dark Values? (sun/css)68
css, functions
7 Top 2025 Web Design Trends67
design, trends, simplicity, performance, accessibility, ai, content
Quick Dark Mode Toggles (chr/fro)66
dev-tools, browsers
Inclusive Dark Mode: Designing Accessible Dark Themes for All Users (sma)65
accessibility, design
To “light-dark()” or Not to “light-dark()” (web)64
videos, css, functions
10 Uses for Variables Beyond Light and Dark Mode (ali)63
figma, variables
Dark Mode: Essential, Not a Preference62
accessibility
Top 10 Front-End Dev Trends for 2025 (bhu)61
trends, ai, low-and-no-code, css, edge-computing, frameworks, sustainability, webauthn, interaction-design, voice
CSS “@ function” + CSS “if()” = 🤯 (bra)60
css, functions, conditionals, custom-properties
Adding Dark Mode to My Site, Shaving Yaks, and Questioning My Sanity (hl)59
maintenance, hugo
CSS “light-dark()” (may/5t3)58
css, functions
Native HTML Light and Dark Color Scheme Switching (pep/mat)57
html, css, javascript, functionality
No Fuss Light/Dark Modes (chr/fro)56
css
Come to the “light-dark()” Side (sar/css)55
html, css, colors
An HTML Email Template With Basic Typography and Dark/light Modes (chr/fro)54
templates, html, email, typography
Querying the Color Scheme (kiz)53
css, container-queries, custom-properties
How to Easily Add Dark Mode to Your Website52
how-tos, html, css, javascript, functionality
Why Is This Thing in Dark Mode? (chr/fro)51
email
Notes on Implementing Dark Mode50
javascript, tailwind
Dark Mode and Accessibility Myth (ste)49
accessibility, myths
What’s Going On in Dark Theme / Light Theme Land (chr/fro)48
css, functions
What if You Had Real Control Over Light Mode / Dark Mode on a Per-Site Basis? (bra)47
apis
CSS Color-Scheme-Dependent Colors With “light-dark()” (bra/dev)46
css, functions, colors
Setting and Persisting Color Scheme Preferences With CSS and a “Touch” of JavaScript (ole/sma)45
colors, css, javascript
Web Tech Trends to Watch in 2024 and Beyond (web)44
trends, design, ai, sustainability, minimalism
A Simple Mistake That Can Screw Up Your Light/Dark Theme (and How to Fix It) (kev)43
videos, mistakes, css
Nested Dark Mode via CSS Proximity (doc)42
css
The New “light-dark()” Function to Switch Theme Color in CSS (ami)41
css, functions
The Future of CSS: Easy Light-Dark Mode Color Switching With “light-dark()” (bra)40
css, functions
Easy Dark Mode With “color-scheme” (sar)39
slides, html, css, accessibility
Dark Mode: How Users Think About It and Issues to Avoid (nng)38
user-experience, accessibility, best-practices
All the Places Where You Can Use “prefers-color-scheme” Media Query (ami)37
css, media-queries, javascript, html
Cracking the Theme Switcher and Dark Mode36
css, javascript
Dark Mode in 3 Lines of CSS and Other Adventures (sto)35
css
Dark Mode Toggle and “prefers-color-scheme”34
toggles, css
HTML Dark Mode (bt)33
html
These 3* Lines of CSS Will Give You Dark Mode for Free* (jac)32
css
Unlocking the Power of Design Tokens to Create Dark Mode UI31
design-tokens
Simplified Dark Mode With Style Queries (5t3)30
css, style-queries
Why Is Making a Dark Mode Greyscale So Hard to Get Right?29
contrast, colors, design
Minimal Dark Mode Styling (mey)28
css, minimalism
Progressively-Enhanced Dark Mode (dar)27
progressive-enhancement
Do You Know “color-scheme”? (sar/mat)26
css
Minimal Dark Mode (j9t)25
css, minimalism
Detect System Theme Preference Change Using JavaScript (dav)24
javascript
Dark Mode With Design Tokens (luk/uxd)23
design-tokens
Light/Dark Mode22
css, javascript
Welcome to the Dark Side (yat)21
accessibility, usability
How I Built a Dark Mode Toggle (hdv)20
toggles
One Line of CSS to Add Basic Dark/Light Mode (cod)19
css
How to Create Dark Mode for Your Designs in Figma (uxd)18
how-tos, figma
Peering Into the Accessibility of Dark Mode (uxd)17
accessibility
Light and Dark Mode in Just 14 Lines of CSS (whi)16
css
Why Is Dark Mode So Captivating? (uxd)15
Shedding Light on Fiverr’s Dark Mode Creation Process14
design
Auto Dark Theme (chr/css)13
browsers, usability
Easy Dark Mode (and Multiple Color Themes) in React (css)12
react, theming
Using JavaScript to Detect High Contrast and Dark Modes (sco)11
javascript, accessibility, colors, contrast
A Lazy Dark Mode10
react
Implementing Dark Mode in React Apps Using styled-components (sma)9
react, components, javascript
SVG, Favicons, and All the Fun Things We Can Do With Them (eri/css)8
images, favicons, svg
Dark Mode and Variable Fonts (fon/css)7
variable-fonts, fonts, css
Why “Dark Mode” Causes More Accessibility Issues Than It Solves6
accessibility
The Complete Guide to the Dark Mode Toggle5
guides, toggles
Dark Mode vs. Light Mode: Which Is Better? (nng)4
usability, accessibility, comparisons
Dark Mode Favicons (chr/css)3
favicons, images
Dark Mode in CSS (fon/css)2
css, media-queries
Redesigning Your Product and Website for Dark Mode (mal)1
design, css