Demo: prefers-color-scheme: CSS Media Query for Dark and Light Modes
The block below changes its background and text colors based on system color preference; if your system uses a light theme, the block will have a light background with dark text; if you prefer a dark theme, the background will be dark with light text. If your browser doesn't support the prefers-color-scheme media query, the background will be pink with light text.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Back to: prefers-color-scheme: CSS Media Query for Dark and Light Modes