BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

Web Development

442:is() and :where() for Grouping Selectors
443Specificity Differences: :is() vs :where()
444:has() - The Parent Selector
445Practical :has() Patterns
446:not() with Complex Selectors
447:focus-visible for Keyboard Navigation
448:focus-within for Container Highlighting
449:placeholder-shown for Input States
450:in-range and :out-of-range for Form Validation
451:valid and :invalid for Real-Time Feedback
452:user-valid and :user-invalid
453:empty for Conditional Content Display
454:only-child and :only-of-type
455Combining Modern Pseudo-Classes
456Browser Support and Progressive Enhancement
457Introduction to Logical Properties and Flow-Relative Values
458Block and Inline Axes
459Logical Margin and Padding Properties
460Logical Border Properties
461Logical Position Properties (inset)
462Logical Sizing Properties
463Logical Text Alignment
464Writing Modes and Direction
465When to Use Logical vs Physical Properties
466Browser Support and Fallback Strategies
467What are CSS Custom Properties?
468Declaring and Using Custom Properties
469The :root Selector for Global Variables
470Scoping Custom Properties
471Fallback Values in var()
472Custom Properties and Specificity
473Custom Properties in Calculations
474Theming with Custom Properties
475Dark Mode with Custom Properties
476Custom Properties and JavaScript
477Custom Properties vs Preprocessor Variables
478Browser Support and Invalid Values
479calc() for Dynamic Values
480min(), max(), and clamp() for Responsive Sizing
481var() and Custom Property Fallbacks
482Color Functions: rgb(), hsl(), and hwb()
483color-mix() for Dynamic Color Blending
484url() and Image Functions
485Transform Functions: translate(), rotate(), scale()
486Filter Functions for Visual Effects
487Gradient Functions: linear-gradient() and radial-gradient()
488conic-gradient() and repeating-gradient()
489Math Functions: sin(), cos(), tan(), and Trigonometry
490Combining Functions for Advanced Effects
491Understanding Color Spaces: sRGB, Display-P3, and Beyond
492The color() Function and Specifying Color Spaces
493LCH and OKLCH: Perceptually Uniform Color Models
494LAB and OKLAB Color Functions
495Wide-Gamut Colors for High-End Displays
496Fallbacks for Browsers Without Modern Color Space Support
497Color Interpolation and Gradients in Modern Color Spaces
498Using color-mix() with Modern Color Spaces
499Gamut Mapping and Out-of-Gamut Colors
500When to Use Modern Color Spaces in Production

Web Development

442:is() and :where() for Grouping Selectors
443Specificity Differences: :is() vs :where()
444:has() - The Parent Selector
445Practical :has() Patterns
446:not() with Complex Selectors
447:focus-visible for Keyboard Navigation
448:focus-within for Container Highlighting
449:placeholder-shown for Input States
450:in-range and :out-of-range for Form Validation
451:valid and :invalid for Real-Time Feedback
452:user-valid and :user-invalid
453:empty for Conditional Content Display
454:only-child and :only-of-type
455Combining Modern Pseudo-Classes
456Browser Support and Progressive Enhancement
457Introduction to Logical Properties and Flow-Relative Values
458Block and Inline Axes
459Logical Margin and Padding Properties
460Logical Border Properties
461Logical Position Properties (inset)
462Logical Sizing Properties
463Logical Text Alignment
464Writing Modes and Direction
465When to Use Logical vs Physical Properties
466Browser Support and Fallback Strategies
467What are CSS Custom Properties?
468Declaring and Using Custom Properties
469The :root Selector for Global Variables
470Scoping Custom Properties
471Fallback Values in var()
472Custom Properties and Specificity
473Custom Properties in Calculations
474Theming with Custom Properties
475Dark Mode with Custom Properties
476Custom Properties and JavaScript
477Custom Properties vs Preprocessor Variables
478Browser Support and Invalid Values
479calc() for Dynamic Values
480min(), max(), and clamp() for Responsive Sizing
481var() and Custom Property Fallbacks
482Color Functions: rgb(), hsl(), and hwb()
483color-mix() for Dynamic Color Blending
484url() and Image Functions
485Transform Functions: translate(), rotate(), scale()
486Filter Functions for Visual Effects
487Gradient Functions: linear-gradient() and radial-gradient()
488conic-gradient() and repeating-gradient()
489Math Functions: sin(), cos(), tan(), and Trigonometry
490Combining Functions for Advanced Effects
491Understanding Color Spaces: sRGB, Display-P3, and Beyond
492The color() Function and Specifying Color Spaces
493LCH and OKLCH: Perceptually Uniform Color Models
494LAB and OKLAB Color Functions
495Wide-Gamut Colors for High-End Displays
496Fallbacks for Browsers Without Modern Color Space Support
497Color Interpolation and Gradients in Modern Color Spaces
498Using color-mix() with Modern Color Spaces
499Gamut Mapping and Out-of-Gamut Colors
500When to Use Modern Color Spaces in Production

← Web Development

Lesson 475 of 2,982·8. Advanced CSS Selectors and FeaturesPro lesson

Dark Mode with Custom Properties

Implementing dark mode by switching custom property values with prefers-color-scheme media query.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course