Published
Edited
Jun 13, 2022
Importers
Insert cell
Insert cell
Insert cell
Insert cell
function setStyle(selector, element, value, asHtml = true) {
return asHtml
? html`<style>${selector} { ${element}: ${value}; }</style>`
: `<style>${selector} { ${element}: ${value}; }</style>`;
}
Insert cell
Insert cell
function setBgColor(color, asHtml = true) {
return setStyle("html", "background-color", color, asHtml);
}
Insert cell
Insert cell
function setTextColor(color, asHtml = true) {
return setStyle("html", "color", color, asHtml);
}
Insert cell
Insert cell
function setColor({background, text}) {
const bgStyle = background ? setBgColor(background, false) : "";
const textStyle = text ? setTextColor(text, false) : "";

return html`${bgStyle + textStyle}`;
}
Insert cell
Insert cell
Insert cell
// cssColors = {
// const colorsObject = await fetch(
// "https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json"
// ).then((response) => response.json());

// return Object.keys(colorsObject);
// }
Insert cell
Insert cell
setColor({ background: "salmon" })
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