Javascript UI kit styling
The JS UI kit is a complete user interface that is generated on the Weavy environment 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.
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.
<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.
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 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.
: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 a weavy app using javascript. Define them in javascript as a string using the .css property or the .className property on a weavy app.
This way you can style apps individually with their own fonts, colors and even dark mode.
You may also set these properties in the default options so that the are used as initial values when instantiating the app.
// js default styling
Weavy.defaults.css = ":root { --wy-font-family: serif; }"
Weavy.defaults.className = "wy-dark"
// js app styling
const messenger = new Messenger({
css: ":root { --wy-theme-color: #ff0000; }",
className: "messenger-example"
});
// change properties at a later time
messenger.css = ":root { --wy-link-decoration: underline; }";
messenger.className = "wy-light";
// 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 in either the default options or on a weavy app.
// Initial dark mode on all apps
Weavy.defaults.className: "wy-dark";
// Dark mode on a single app
let messenger = new Messenger({
className: "wy-dark"
});
You can set the dark mode to follow the user system config by using a matchMedia() event listener in javascript.
Note: You need to change the className on each app you have. You can easily use a query selector to process an array of apps at once.
const setWeavyDarkMode = (e) => {
messenger.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;
}