Styling the React UI kit components
Stylesheet
The @weavy/uikit-react package contains pre-compiled stylesheets for inclusion in your app. You can either include the complete stylesheet from @weavy/uikit-react/dist/css/weavy.css, or you can reduce the css load by including stylesheets for individual Weavy apps. For instance, if you only use the Weavy chat app you can include @weavy/uikit-react/dist/css/weavy-chat.css.
You can provide the stylesheet using a <link> in your html (you will need to copy the stylesheet from the package to a proper location on your web server or use an external CDN link as in the example below).
<link href="https://cdn.jsdelivr.net/npm/@weavy/uikit-react/dist/css/weavy.css" rel="stylesheet" crossorigin="anonymous" />
If you have a build system such as webpack configured to process stylesheet includes, you can instead import the stylesheet directly from the package in your JS or typescript.
import "@weavy/uikit-react/dist/css/weavy.css";
Setting theme font and colors
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.
You may define the CSS custom properties in your own stylesheet. The simplest way to define CSS custom properties is within a :root { } selector.
The font is inherited from the container where Weavy is placed, but you may also define the font using the --wy-font-family CSS custom property.
:root {
--wy-font-family: monospace;
}
Colors
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.
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.
Weavy is using primary, neutral and error color tones 10, 20, 30, 40, 50, 60, 70, 80, 90, 95 and 99.
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;
/* neutral color */
--wy-neutral-99: #fcfdf6;
--wy-neutral-95: #f1f1eb;
--wy-neutral-90: #e2e3dc;
--wy-neutral-80: #c6c7c1;
--wy-neutral-70: #abaca6;
--wy-neutral-60: #90918c;
--wy-neutral-50: #767872;
--wy-neutral-40: #5d5f5a;
--wy-neutral-30: #454743;
--wy-neutral-20: #2f312d;
--wy-neutral-10: #1a1c18;
/* error color */
--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;
}
Dark mode
We provide a built in dark mode. To activate it you can add the className attribute wy-dark to any component or to any parent node in the DOM tree.
// Dark mode on React component
import React from 'react';
import { Messenger } from '@weavy/uikit-react';
const MyMessenger = () => {
return(
<Messenger className="wy-dark" />
)
}
export default MyMessenger;
You can set the dark mode to follow the user system config by using a matchMedia() event listener in javascript.
// Generic javascript dark mode
function setWeavyDarkMode (e) {
if (e.matches) {
document.documentElement.classList.add("wy-dark");
} else {
document.documentElement.classList.remove("wy-dark");
}
}
let colorScheme = matchMedia("(prefers-color-scheme: dark)");
// Listen to dark mode changes
colorScheme.addEventListener("change", setWeavyDarkMode);
// Set initial dark mode
setWeavyDarkMode(colorScheme);
Customizing styles
You can customize the styles in several ways, either by simply overriding the styles in your own stylesheet or by including and customizing the source SCSS files in your build pipeline.
Overriding CSS
The easiest way is to simply override any class name in your own stylesheet. All weavy class selectors starts with the .wy- prefix.
.wy-button {
border-radius: .5rem;
}
Customizing SCSS
The SCSS source files are available in the package and if you have a SCSS build pipeline, you can integrate the weavy sources into your own SCSS. This way you can customize any SCSS variables or combine overrides. Make sure you specify the node_modules path correctly relative to your scss file.
@use "../node_modules/@weavy/uikit-react/scss/weavy";
Overriding UI elements
Common UI elements such as icons, buttons, dropdowns and overlays (modals) can be overridden and customized very simply in your code to match your own UI framework. Take a copy of the UI component you want to override and place it in your own application. The overridable UI components can be found in @weavy/uikit-react/src/ui/. Modify the copied file any way you like. Note that it still needs to use the same paramenters for input.
The second step is to apply the override. You only need do this the first time you import weavy in your code, before you make use of any weavy component.
// Import overridable UI elements from Weavy
import { Icon, Button, Dropdown, Overlay } from '@weavy/uikit-react';
// Import custom UI elements
import CustomIcon from './Icon';
import CustomButton from './Button';
import CustomDropdown from './Dropdown';
import CustomOverlay from './Overlay';
// Apply the override(s)
Icon.UI = CustomIcon.UI;
Button.UI = CustomButton.UI;
Dropdown.UI = CustomDropdown.UI;
Dropdown.Item = CustomDropdown.Item;
Overlay.UI = CustomOverlay.UI;