html`<html>
<head>
<style>
#p-box {
background-color: white;
color: black;
}
#p-box::after {
content: " I see you prefer light mode"
}
@media (prefers-color-scheme: dark) {
#p-box {
background-color: black;
color: white;
}
#p-box::after {
content: " I see you prefer dark mode"
}
}
</style>
</head>
<body>
<h2>CSS Dark/Light Modes</h2>
<div id="p-box">Hello there!</div>
</body>
</html>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
