[Web #7] How To Add Dark Mode Styling To A WordPress Theme? (Explaining prefers-color-scheme in CSS)
When I wrote the “Adding Dark Mode Styles (CSS) To A WordPress Theme” article, I didn't have this snazzy new YouTube channel. Yet, even a few years later, that article is one of the most popular articles at Photics.com.
So, this is the video of that article. It explains how to add a dark mode theme to an existing template.
To get technical, it covers the “prefers-color-scheme” media query in CSS. A lot of people struggle with adding CSS to their website. Admittedly, that was me not too long ago. I wasn't a big fan of CSS. But now, CSS is quite powerful. Features like dark mode are why modern CSS is quite nice.
CHAPTERS
00:00 Dark Mode Introduction
00:42 The Twenty-Sixteen Theme
00:51 Plain Vanilla CSS
01:06 A Great WordPress Feature
01:16 Prefers Color Scheme
01:33 Document Object Model
01:42 Targeting Elements
02:08 CSS Selectors
02:37 Viewing The Source Code
03:31 Previewing The Changes
03:55 Dark Mode Content Issue
CREDITS
Original Photics Article…
https://photics.com/adding-dark-mode-...
Can I Use (Prefers Color Scheme)
https://caniuse.com/?search=prefers-c...
Wikipedia (CSS)
https://en.wikipedia.org/wiki/CSS
MDN Web Docs (CSS Selectors)
https://developer.mozilla.org/en-US/d...