Drop-in UI styling

The drop-in UI is a complete user interface that is generated on the Weavy backend and rendered in your application using iframes.

The styling in Weavy is built so that it can easily be configured from outside the stylesheet. To change the look and feel you can instead pass CSS Custom properties (also known as CSS variables) to set colors and basic styling or provide additional styling that will override the built-in defaults.

Setting theme font and colors

You may define font and colors as CSS custom properties in your own stylesheet. The simplest way to define CSS custom properties is within a :root { } selector.

MDN: Using CSS custom properties

The font is normally inherited from the container where Weavy is placed, but you may also define the font using --wy-font-family as a CSS custom property.

You may also pass a single color and let Weavy generate the color tones for you based on that color. The theme color is defined by setting --wy-theme-color as a CSS custom property.

:root {
  --wy-font-family: monospace;
  --wy-theme-color: #00ff00;
}

Color by <meta>-tag

The theme color can also be picked up from any <meta> tag named theme-color in the <head> on your page, matching any already defined theme color. If you already have this tag present, you can skip setting the CSS custom property.

MDN: <meta> theme-color

<meta name="theme-color" content="#00ff00" />

Color shades

The weavy theming is based on the color system of Material Design v3. You may use the Material design color tool to generate colors that you may pass to Weavy.

Material Theme Builder

If you want more precise control of the coloring you can define all color tones for the primary color instead of setting a single theme color. The colors shades match the Material Design 3 tonal palettes, which consists of 13 tones. They are named from 0 to 100, similar (but not equal) to lightness of the HSL color model, where 0 is dark and 100 is light.

We recommend generating colors tones using Material Theme Builder to get matching color tones and proper dark mode out of the box. This will usually meet Web color contrast standards to get minimum contrast ratio of 3:1.

Material design: Color & accessibility

:root {
  /* Tones based on #00ff00 generated using Material Theme Builder */

  /* Primary color  */
  --wy-primary-99: #f7ffee;
  --wy-primary-95: #cbffb8;
  --wy-primary-90: #77ff61;
  --wy-primary-80: #02e600;
  --wy-primary-70: #03c700;
  --wy-primary-60: #03a800;
  --wy-primary-50: #038b00;
  --wy-primary-40: #026e00;
  --wy-primary-30: #015300;
  --wy-primary-20: #013a00;
  --wy-primary-10: #002200;
}

Custom CSS and class names

You may also define css or add any class name you like to the weavy instance or a weavy app using javascript. Define them in javascript as a string using the .css property or the .className property on the weavy instance or on a weavy app.

This way you can style apps individually with their own fonts, colors and even dark mode.

// js instance styling

// initial properties
const weavy = new Weavy({
  css: ":root { --wy-font-family: serif; }",
  className: "wy-dark"
});

// change properties at a later time
weavy.css = ":root { --wy-link-decoration: underline; }";
weavy.className = "wy-light";

// remove css
weavy.css = "";
// js app styling

let messenger = weavy.app({
  type: "messenger",
  css: ":root { --wy-theme-color: #ff0000; }",
  className: "messenger-example"
});

// remove class name
messenger.className = "";

Dark mode

We provide a built in dark mode. To activate it you set the className option to wy-dark on either the weavy instance or on a weavy app.

// Dark mode on all apps and modals
const weavy = new Weavy({
  className: "wy-dark",
  ...options
});
// Dark mode on a single app
let messenger = weavy.app({
  type: "messenger",
  className: "wy-dark",
  ...options
});

You can set the dark mode to follow the user system config by using a matchMedia() event listener in javascript.

function setWeavyDarkMode (e) { 
  weavy.className = e.matches ? "wy-dark" : "";
}

let colorScheme = matchMedia("(prefers-color-scheme: dark)");

// Listen to dark mode changes
colorScheme.addEventListener("change", setWeavyDarkMode);

// Set initial dark mode
setWeavyDarkMode(colorScheme); 

Generated colors as CSS custom properties

Here is an example of all colors defined in weavy, generated using Material Theme Builder.

Note: All these colors are generated automatically in Weavy when only specifying --wy-theme-color.

:root {
  /* All defined color tones based on theme color #00658e */

  --wy-black: #000000;
  --wy-white: #ffffff;
  --wy-shadow: #000000;

  --wy-primary-99: #fbfcff;
  --wy-primary-95: #e4f3ff;
  --wy-primary-90: #c7e7ff;
  --wy-primary-80: #84cfff;
  --wy-primary-70: #53b5ec;
  --wy-primary-60: #2f9ad0;
  --wy-primary-50: #007fb2;
  --wy-primary-40: #00658e;
  --wy-primary-30: #004c6c;
  --wy-primary-20: #00344c;
  --wy-primary-10: #001e2e;

  --wy-secondary-99: #fffbff;
  --wy-secondary-95: #fff2a4;
  --wy-secondary-90: #f6e468;
  --wy-secondary-80: #d9c84f;
  --wy-secondary-70: #bcad36;
  --wy-secondary-60: #a0921a;
  --wy-secondary-50: #857800;
  --wy-secondary-40: #6a5f00;
  --wy-secondary-30: #504700;
  --wy-secondary-20: #373100;
  --wy-secondary-10: #201c00;

  --wy-tertiary-99: #fffbff;
  --wy-tertiary-95: #fff2a4;
  --wy-tertiary-90: #f6e468;
  --wy-tertiary-80: #d9c84f;
  --wy-tertiary-70: #bcad36;
  --wy-tertiary-60: #a0921a;
  --wy-tertiary-50: #857800;
  --wy-tertiary-40: #6a5f00;
  --wy-tertiary-30: #504700;
  --wy-tertiary-20: #373100;
  --wy-tertiary-10: #201c00;

  --wy-error-99: #fffbff;
  --wy-error-95: #ffedea;
  --wy-error-90: #ffdad6;
  --wy-error-80: #ffb4ab;
  --wy-error-70: #ff897d;
  --wy-error-60: #ff5449;
  --wy-error-50: #de3730;
  --wy-error-40: #ba1a1a;
  --wy-error-30: #93000a;
  --wy-error-20: #690005;
  --wy-error-10: #410002;

  --wy-neutral-99: #fcfcff;
  --wy-neutral-95: #f0f1f3;
  --wy-neutral-90: #e2e2e5;
  --wy-neutral-80: #c5c6c9;
  --wy-neutral-70: #aaabae;
  --wy-neutral-60: #8f9193;
  --wy-neutral-50: #75777a;
  --wy-neutral-40: #5c5e61;
  --wy-neutral-30: #454749;
  --wy-neutral-20: #2e3133;
  --wy-neutral-10: #191c1e;

  --wy-neutral-variant-99: #fbfcff;
  --wy-neutral-variant-95: #ebf1f8;
  --wy-neutral-variant-90: #dde3ea;
  --wy-neutral-variant-80: #c1c7ce;
  --wy-neutral-variant-70: #a5acb2;
  --wy-neutral-variant-60: #8b9198;
  --wy-neutral-variant-50: #71787e;
  --wy-neutral-variant-40: #595f65;
  --wy-neutral-variant-30: #41484d;
  --wy-neutral-variant-20: #2b3136;
  --wy-neutral-variant-10: #161c21;

  --wy-surface-1-light: #f0f4f9;
  --wy-surface-2-light: #e8f0f6;
  --wy-surface-3-light: #e0ebf2;
  --wy-surface-4-light: #deeaf1;
  --wy-surface-5-light: #d9e7ef;

  --wy-surface-1-dark: #1e2428;
  --wy-surface-2-dark: #212a2f;
  --wy-surface-3-dark: #242f36;
  --wy-surface-4-dark: #253138;
  --wy-surface-5-dark: #27343c;

  --wy-blue-light: #7aadfa;
  --wy-indigo-light: #8489e0;
  --wy-purple-light: #bd78c2;
  --wy-pink-light: #d072a2;
  --wy-red-light: #da717c;
  --wy-orange-light: #ef9646;
  --wy-yellow-light: #d9c84f;
  --wy-green-light: #56a15c;
  --wy-teal-light: #00a29d;
  --wy-cyan-light: #008398;
  --wy-gray-light: #75777a;

  --wy-blue-dark: #a7c8ff;
  --wy-indigo-dark: #8489e0;
  --wy-purple-dark: #da92de;
  --wy-pink-dark: #ee8cbe;
  --wy-red-dark: #da717c;
  --wy-orange-dark: #ef9646;
  --wy-yellow-dark: #d9c84f;
  --wy-green-dark: #56a15c;
  --wy-teal-dark: #00a29d;
  --wy-cyan-dark: #009fb8;
  --wy-gray-dark: #8f9193;
}
Weavy Docs