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

Articles Tagged
dark mode

11 Articles
{
,

}
Direct link to the article Auto Dark Theme
dark mode google

Auto Dark Theme

There are a number of ways to approach a dark mode for your website, but essentially you get all the styles ready for it and then apply them when the user has indicated they want them, whether by direct …

Avatar of Chris Coyier
Chris Coyier on Dec 20, 2021
Direct link to the article Easy Dark Mode (and Multiple Color Themes!) in React
dark mode react

Easy Dark Mode (and Multiple Color Themes!) in React

I was working on a large React application for a startup, and aside from just wanting some good strategies to keep our styles organized, I wanted to give this whole “dark mode” thing a shot. With the huge ecosystem around …

Avatar of Abram Thau
Abram Thau on Nov 11, 2021
Direct link to the article SVG Favicons in Action
dark mode favicon

SVG Favicons in Action

Ever heard of favicons made with SVG? If you are a regular reader of CSS-Tricks, you probably have. But does your website actually use one?

The task is more non-trivial than you might think. As we will see in this …

Avatar of Philippe Bernard
Philippe Bernard on Jul 9, 2021
Direct link to the article Flash of inAccurate coloR Theme (FART)
dark mode fart

Flash of inAccurate coloR Theme (FART)

There is a lot to think about when implementing a dark mode theme on a website. We have a huge guide on it. There are some very clever quick wins out there, but there are also some quite tricky things …

Avatar of Chris Coyier
Chris Coyier on Apr 15, 2021 (Updated on May 14, 2021)
Direct link to the article A DRY Approach to Color Themes in CSS
custom properties dark mode

A DRY Approach to Color Themes in CSS

The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I had run into this issue in the past but hadn’t come up with a …

Avatar of Christopher Kirk-Nielsen
Christopher Kirk-Nielsen on Feb 24, 2021
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 Jul 1, 2020 (Updated on Oct 24, 2021)
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 (Updated on Feb 8, 2022)
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

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
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 Nov 14, 2018 (Updated on Dec 28, 2018)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top