Published
Edited
Mar 15, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dark = ({
// https://github.com/vikignt/svelte-mui/blob/master/example/src/components/AppBar.svelte#L80
'bg_color': '#303134',
'fg_colors': {
'color': '#eee',
'alternate': '#000',
'primary': '#3ea6ff',
'focus-color': '#3ea6ff7f',
'accent': '#ff6fab',
'bg-popover': '#3f3f3f',
'bg-panel': '#434343',
'bg-app-bar': '#838383',
'border': '#555',
'bg-input-filled': '#ffffff0d',
'divider': '#ffffff2d',
'label': '#ffffff7f',
}
})
Insert cell
light = ({
// https://github.com/vikignt/svelte-mui/blob/master/example/assets/global.css
'bg_color': '#fbfbfb',
'fg_colors': {
'color': '#333',
'alternate': '#fff',
'primary': '#1976d2',
'focus-color': '#1976d27f',
'accent': '#f50057',
'bg-popover': '#fff',
'bg-panel': '#eee',
'bg-app-bar': '#888',
'border': '#dfdfdf',
'bg-input-filled': '#0000000d',
'divider': '#0000001a',
'label': '#00000060',
}
})
Insert cell
import {to_swatches} from '@ellemenno/color-swatches'
Insert cell
import {swatches} from '@ellemenno/color-swatches'
Insert cell

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.
Learn more