Theming

css vars low tech

Pyro theming means changing the style of elements with css variables. It can be done by with little frontend knowledge or provided as a customization to a third-party. It complements the more powerful Customizing features.

Global styling

Pyro comes with very unopinionated and dull styling. It's up to you to make it shine! Just by changing the basic colors it might adopt your brand's look and feel and come alive.

The global styling provides defaults, so the full default stylesheet should always be imported.

.default-global-dull-style {
  /* ... */
  
  --pyro-accent-color: #e23e3e;
  --pyro-surface-color: #fbfbfb;
  --pyro-text-color-on-surface: inherit;
  --pyro-foreground-color: #eee;
  --pyro-text-color-on-foreground: inherit;
  --pyro-hover-color: #eee;
  --pyro-disabled-color: #ccc6;

  /* ... */
}

The elements would end up having the basic styling.

Basic IB Dimiss

By changing just a few properties, they start looking very different:

.custom-css-prop-values {
  --pyro-primary-color: linear-gradient(#e66465, #9198e5);
  --pyro-accent-color: rebeccapurple;
  --pyro-text-color: #9ff;
  --pyro-switch-border-radius: 0;
  --pyro-button-spacing: 0.25em;
  --pyro-avatar-width: 40px;
  --pyro-avatar-height: 40px;
  --pyro-success-color: #0f0;
  --pyro-tag-border: 2px #00f dotted;
  --pyro-progresscircle-background: grey;
}

Basic IB Dimiss

Component specific styling

All components inherit global styles, but can have more granular controls.

In the same vein as CSS, Cascading style sheets, pyro css variables cascade. A Card will by default use the text color defined in --pyro-text-color. But it can be changed, for the card only, by setting --pyro-card-text-color to a different value. It follows the scheme of putting the component name after --pyro. This works for all components, they inherit the global value, but it can be changed for that component using the --pyro-{componentName}-{value} scheme.

/* Global primary color */
--pyro-primary-color: #0f0;
/* Button-specific primary color, prevails over the global one */
--pyro-button-primary-color: #0f0;

In the vast majority of cases the value matches the css property you think it will affect. For instance --pyro-button-border-radius will affect the border-radius of the button. If not declared it will use the global --pyro-border-radius. Sometimes this cannot be true, and ----

Full default stylesheet

.basic {
  /* text */
  --pyro-font-family: system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
  --pyro-font-size: 1em;
  --pyro-font-size-s: 0.75em;
  --pyro-font-size-l: 1.5em;
  --pyro-text-color: #050505;
  --pyro-text-color-lighter: #454545;
  --pyro-line-height: normal;

  /* spacing */
  --pyro-spacing: 0.5em;
  --pyro-spacing-s: calc(var(--pyro-spacing) * 0.5);
  --pyro-spacing-m: var(--pyro-spacing);
  --pyro-spacing-l: calc(var(--pyro-spacing) * 2);

  /* borders */
  --pyro-border-width: 1px;
  --pyro-border-style: solid;
  --pyro-border-color: #4444;
  --pyro-border: var(--pyro-border-width) var(--pyro-border-style) var(--pyro-border-color);
  --pyro-border-radius: 0.25em;

  /* colors */
  --pyro-accent-color: #e23e3e;
  --pyro-surface-color: #fbfbfb;
  --pyro-text-color-on-surface: inherit;
  --pyro-foreground-color: #eee;
  --pyro-text-color-on-foreground: inherit;
  --pyro-hover-color: #eee;
  --pyro-disabled-color: #ccc6;

  /* variant colors */
  --pyro-primary-color: #e23e3e;
  --pyro-text-color-on-primary: inherit;
  --pyro-secondary-color: #212121;
  --pyro-text-color-on-secondary: #ccc;
  --pyro-tertiary-color: #006239;
  --pyro-text-color-on-tertiary: inherit;

  /* severity colors */
  --pyro-info-color: #1c95d7;
  --pyro-success-color: #408944;
  --pyro-warning-color: #ef7d1d;
  --pyro-error-color: #d94343;
  --pyro-info-color-lighter: hsl(from var(--pyro-info-color) h s 90);
  --pyro-success-color-lighter: hsl(from var(--pyro-success-color) h s 90);
  --pyro-warning-color-lighter: hsl(from var(--pyro-warning-color) h s 90);
  --pyro-error-color-lighter: hsl(from var(--pyro-error-color) h s 90);
  /* --pyro-text-color-on-info: undefined; */
  /* --pyro-text-color-on-success: undefined; */
  /* --pyro-text-color-on-warning: undefined; */
  /* --pyro-text-color-on-error: undefined; */

  /* dimensions */
  --pyro-fields-min-width: 130px;
}