viewof isDark = inputMode({ value: false })
invokeMode(isDark)
styleDark()
// repurposed from original notebook from Observable
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "body_mass_g",
fill: "species"
}).plot({
color: {
scheme: isDark ? "blues" : "cool"
} /** change color scheme depending on dark mode? */
})
Inputs.button("Does nothing")
inputMode = function ({
label = "Dark mode",
value = window.matchMedia("(prefers-color-scheme: dark)").matches,
disabled = false
} = {}) {
return Inputs.toggle({ label, value, disabled });
}
invokeMode = function (isDark) {
// side effect: change class of root elment
const rootElement = document.documentElement;
if (isDark) {
rootElement.classList.remove("theme-light");
rootElement.classList.add("theme-dark");
} else {
rootElement.classList.remove("theme-dark");
rootElement.classList.add("theme-light");
}
return isDark;
}
styleDark = function ({ dark = {}, light = {} } = {}) {
// defualts - I'm sure there's a cleaner way, but I don't know how to nest
// destructuring in the arguments.
const dflt = {
dark: {
background: "#282828",
color: "white",
tableHeaderBorder: "#484848",
tableCellBorder: "#3A3A3A"
},
light: {
color: "black",
background: "white"
}
};
dark = { ...dflt.dark, ...dark };
light = { ...dflt.light, ...light };
return html`
<style>
.theme-light {
background-color: ${light.background};
}
.theme-dark {
background-color: ${dark.background};
color: ${dark.color};
--syntax-normal: currentColor;
}
.theme-dark h1, .theme-dark h2, .theme-dark h3,
.theme-dark h4, .theme-dark h5, .theme-dark h6,
.theme-dark td {
color: currentColor;
}
.theme-dark input {
background-color: transparent;
}
.theme-dark table thead th {
background-color: transparent;
color: currentColor;
}
.theme-dark table tr td, .theme-dark table tr th {border-bottom-color: ${dark.tableHeaderBorder};}
.theme-dark table tr:not(:last-child) td, .theme-dark table tr:not(:last-child) th {border-bottom-color: ${dark.tableCellBorder};}
.theme-dark button {
color: ${light.color}
}
svg[fill=currentColor] {background: transparent;}
svg[class$="-ramp"] {background: transparent;}
svg[fill=currentColor] {background: transparent;}
</style>
`;
}
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.
