Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
dark mode

6 Articles
{
,

}
Direct link to the article A Complete Guide to Dark Mode on the Web
dark mode

A Complete Guide to Dark Mode on the Web

“Dark mode” is defined as a color scheme that uses light-colored text and other UI elements on a dark-colored background. Dark mode, dark theme, black mode, night mode… they all refer to and mean the same thing: a mostly-dark interface rather than a mostly-light interface.
Avatar of Adhuham
Adhuham on Sep 9, 2020
Direct link to the article SVG, Favicons, and All the Fun Things We Can Do With Them
dark mode favicon media queries SVG svg icons

SVG, Favicons, and All the Fun Things We Can Do With Them

Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of …

Avatar of Eric Bailey
Eric Bailey on Apr 24, 2020
Direct link to the article A Dark Mode Toggle with React and ThemeProvider
dark mode prefers-color-scheme react hooks

A Dark Mode Toggle with React and ThemeProvider

I like when websites have a dark mode option. Dark mode makes web pages easier for me to read and helps my eyes feel more relaxed. Many websites, including YouTube and Twitter, have implemented it already, and we’re starting to …

Avatar of Maks Akymenko
Maks Akymenko on Sep 25, 2019
Direct link to the article A Quick Look at the First Public Working Draft for Color Adjust Module 1
color-adjust dark mode prefers-color-scheme

A Quick Look at the First Public Working Draft for Color Adjust Module 1

We’ve been talking a lot about Dark Mode around here ever since Apple released it as a system setting in MacOS 10.14 and subsequently as part of Safari. It’s interesting because of both what it opens up as as far …

Avatar of Geoff Graham
Geoff Graham on May 29, 2019
Direct link to the article Night Mode with Mix Blend Mode: Difference
dark mode

Night Mode with Mix Blend Mode: Difference

Direct Link

Dark mode designs are all the rage right now but here’s an interesting take: Wei Gao has built a night mode on her own site that uses mix-blend-mode: difference to create an effect that looks like this:

Wei explains how …

Avatar of Robin Rendle
Shared by Robin Rendle on May 27, 2019
Direct link to the article Dark Mode in CSS
dark mode macOS media queries

Dark Mode in CSS

With the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called prefers-color-scheme which lets us detect whether the user has dark mode enabled with a media query. Safari Technology Preview 71 also …

Avatar of Robin Rendle
Robin Rendle on Dec 28, 2018
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top