# Theming Flo.w RDF

Flo.w RDF uses CSS Custom Properties (opens new window) to theme its web components.

Typically, you will include the core.css file from the flow-rdf NPM package in your application to define default values for theme properties. Override the default values to change the theme.

TIP

You can use the same theming properties when writing CSS for your own application-specific UI and components to ensure your application has a single, consistent theme.

# CSS Files

Flo.w RDF provides the following CSS files:

Package Path	Description
`flow-rdf/dist/flow-rdf/css/core.css`	Core theme properties (required).
`flow-rdf/dist/flow-rdf/css/typography.css`	Font and heading styles to match Flo.w RDF components.
`flow-rdf/dist/flow-rdf/css/normalize.css`	Browser reset styles based on normalize.css (opens new window).
`flow-rdf/dist/flow-rdf/css/structure.css`	Body sizing and other styles suitable for a non-scrollable full-page visualization.
`flow-rdf/dist/flow-rdf/css/flow-rdf.bundle.css`	Includes all of the above in a convenient bundle.

To include one or more of CSS file include <link> tags in your HTML <head> section, or use the CSS bundling capability of your chosen build system. For example, to include using the jsDelivr (opens new window) CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flow-rdf/dist/flow-rdf/css/flow-rdf.bundle.css" />

# Theme Colors

Flo.w RDF uses the following theme colors throughout its web components:

Color	CSS Property	Description
primary	`--flow-color-primary`	Primary UI element color.
secondary	`--flow-color-secondary`	Secondary or accent color.
success	`--flow-color-success`	Color used for icons and text indicating success.
warning	`--flow-color-warning`	Color used for warning icons and text.
danger	`--flow-color-danger`	Color used for danger icons and text.
gray	`--flow-color-gray`	Mid-gray.
text	`--flow-color-text`	Text color.
background	`--flow-color-background`	Background color.
surface	`--flow-color-surface`	Surface element background color e.g. dialogs and gauges.

# Color Variants

For each of the above colors a number of variants are also defined:

Color Variant	CSS Property	Description
contrast	`--flow-color-[base]-contrast`	Contrasting text color to use on top of the base color.
shade	`--flow-color-[base]-shade`	A darker variant of the base color.
tint	`--flow-color-[base]-tint`	A lighter variant of the base color.
rgb	`--flow-color-[base]-rgb`	The base color as an RGB triplet (e.g. `255, 255, 255`).

# Step Colors

A number of 'step' colors are also provided that transition smoothly between the background color and text color. These are used to style UI elements such as borders, dividers and shadows.

Color Step	CSS Property	Description
Background	`--flow-color-background`	Background color.
...	`--flow-color-step-25`	97.5% Background + 2.5% Text.
...	`--flow-color-step-50`	95% Background + 5% Text.
...	...	...
...	`--flow-color-step-950`	5% Background + 95% Text.
...	`--flow-color-step-975`	2.5% Background + 97.5% Text.
Text	`--flow-color-text`	Text color.

# Default Themes

Two default themes are provided:

light - a theme with a white background and black text.
dark - a theme with a dark gray background and light text.

To apply a default theme, add the CSS class flow-theme-light (default) or flow-theme-dark to your <body> element. Theme classes can also be applied to any element (such as a container <div>) to change themes for different parts of your UI.

# Custom Themes

To customize the default themes it is usually sufficient to override the primary and secondary colors. For example, to use the dark theme with custom primary and secondary colors:

<head>
  <style>
    body.flow-theme-dark {
      --flow-color-primary: #389DFF;
      --flow-color-secondary: #7C4DFF;
    }
  </style>
</head>
<body class="flow-theme-dark">
  ...
</body>

If your choose a light primary or secondary color, you should also override the contrast variants to ensure that text displayed on top of the primary or secondary color is visible. For example:

<head>
  <style>
    body.flow-theme-dark {
      --flow-color-primary: white;
      --flow-color-primary-contrast: black;
    }
  </style>
</head>
<body class="flow-theme-dark">
  ...
</body>

← Vue Debugging →