Theming

How to customize the look and feel of your embeds.

Styling an embed

Our embeds are built around the Web Component specification and each embed has its own specific markup that is added to the page at load time. Styling this markup requires a special approach because it lives in something called the Shadow Dom.

We have added a number of built-in customizations which can be done through CSS variables, but also have constructed our Web Components in such a way that more advanced implementations are possible using Shadow Dom parts.

Using the Shadow Dom

The shadow DOM ensures styles cannot leak in or out of the Web Component. This prevents unintended side-effects when embedding the Web Component on a page, but it also means we cannot use regular CSS selectors to customize the Web Component’s theme. Instead, we must use a combination of CSS variables and CSS Shadow Parts in order to apply custom styles to the component.

Shadow Parts

Shadow Parts are elements within the Shadow DOM which have been exposed via a selector to allow custom styling. Any CSS property can be applied to a Shadow Part using the ::part(...) pseudo-selector:

plangraph-plan-table::part(some-shadow-part) {
/* CSS properties */
}

CSS Modules

You can also use CSS Modules for scoped styling by wrapping the Web Component in a div element:

// In a styles.module.css file
.table {
plangraph-plan-table::part(some-shadow-part) {
/* CSS properties */
}
}
// In your javascript/React/etc file
import classes from './styles.module.css';
<div className={classes.table}>
<plangraph-plan-table embed={your-embed-id}></plangraph-plan-table>
</div>

This is necessary because CSS Modules requires a class selector at the top level.

Using CSS variables

Each embed comes with its own specific customizations depending on what is being rendered. The CSS variables that can be used are different depending on the type of embed being used, but there are a number of shared variables across all embeds which can make maintaining your theme easier.

Using CSS variables is easy. You can use the `:root` selector to set variables globally on a page. These will be inherited by our Web Component to apply custom styles within the Shadow DOM. Alternatively, you can use these variables as part of the CSS for a shadow part to apply custom theming to specific parts of the Shadow DOM.

Background color example:

If you wanted to set the background color to white you would use:

:root {
--plangraph-color-background: #fff;
}

Embed-specific CSS variables

Each of our embeds have their own specific CSS variables that can be taken advantage of. They are listed on the docs page for that embed.

Shared CSS variables

Some of our CSS variables are reused across each type of embed:

/* Primary color, used for primary CTAS and focus */
--plangraph-color-brand: [your value];
/* Appears on top of --plangraph-color-brand;
Should have a high contrast */
--plangraph-color-brand-accent: [your value];
/* Primary text color */
--plangraph-color-text: [your value];
/* Secondary text color for help text, tooltips, etc.
Should be less prominent than --plangraph-color-text. */
--plangraph-color-text-secondary: [your value];
/* Appears behind text and secondary text;
should have a high contrast */
--plangraph-color-background: [your value];
/* Background color for tooltips. Appears behind text
and secondary text; should have a high contrast */
--plangraph-color-tooltip: [your value];
/* Affects the borders between cells
and borders of various other elements*/
--plangraph-border: [your value];
/* Horizontal borders between cells
and borders of various elements. */
-plangraph-border-secondary: [your value];
/* Border-radius of some elements */
--plangraph-radius: [your value];
/* Color used to show error messages
and invalid states on inputs */
--plangraph-color-error: [your value];
/* Appears on top of --plangraph-color-error */
--plangraph-color-error-accent: [your value];
/* Color used to show disabled states for
various inputs */
--plangraph-color-disabled: [your value];
/* Appears on top of --plangraph-color-disabled-accent */
--plangraph-color-disabled-accent: [your value];