This example demonstrates how to change CSS themes based on the device's theme preference. The default theme is light, but if the user prefers a dark theme, the background and text colors will change accordingly when the data-theme attribute is set to "dark". This can be done without using any JavaScript, and just using css variables and the data-theme attribute on the <html> element.
Here's an example link that changes colour based on the theme: