styles = html`<style>
body{
font-family: 'avenir next', avenir, sans-serif;
}
blockquote { border-left: 2px solid currentColor; padding-left: 1em; margin-left: 0; }
details { padding-left: 1em; position: relative }
details summary { cursor: pointer; text-indent: -1em }
details[open] summary { text-decoration: underline; background-color: white }
:not(pre) > code {color: #222f; background-color: #0002; padding-left: 2px; padding-right: 2px}
.contains-task-list { list-style-type: none; padding-left: 0;}
ul ul, ol ol, ul ol, ol ul { padding-left: 40px;}
abbrev { text-decoration: 1px dotted underline; cursor: help}
a[target=_blank]:after {
display: inline-grid;
place-items:center;
content:"↗";
font-size: .5em;
vertical-align: super;
width: 1.2em;
height: 1.2em;
border-radius: 3px;
border: 1px solid currentColor;
}
figure > h2,
figure > h3 {
font-family: var(--sans-serif);
}
figure > h2, figure > .title {
font-size: 20px;
}
figure > h3,figure > .subtitle {
font-size: 16px;
font-weight: normal;
}
</style>`
darkMode = html`<style>
:root {--bg-color: #fff;}
@media (prefers-color-scheme: dark) {
/* Invert all elements on the body while attempting to not alter the hue substantially. */
body {
filter: invert(100%) hue-rotate(180deg);
}
/* Workarounds and optical adjustments. */
/* Firefox workaround: Set the background colour for the html
element separately because, unlike other browsers, Firefox
doesn’t apply the filter to the root element’s background. */
:root {
--bg-color: #000;
}
html {
background-color: var(--bg-color);
}
/* Do not invert media (revert the invert). */
img, video, iframe {
filter: invert(100%) hue-rotate(180deg);
}
/* Improve contrast on icons. */
.icon {
filter: invert(15%) hue-rotate(180deg);
}
/* Re-enable code block backgrounds. */
pre {
filter: invert(6%);
}
/* Improve contrast on list item markers. */
li::marker {
color: #666;
}
}</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.
