You can override this variables just as any other css variables and specify any other color, or you can reference any other variable in your existing styles, like this:
.dialect {
--dt-bg-primary: #ff00ff; /* make sure your css is imported after the dialect styles */
--dt-bg-secondary: #ff00ff !important; /* You might want to add !important tag to avoid css import ordering issue */
--dt-bg-tertiary: var(--my-cool-background); /* You can reference you css variable to avoid copy/paste and handle light/dark theme for example */
}
As an option, you can include dialect styles before your styles by importing it directly in your css file:
@import url('@dialectlabs/react-ui/index.css');
Use the following visual guide to style widget. Please note that css variables are prefixed with --dt
Font should inherit your in-app css font configuration by default. In case if it didn't happened for some reason, you can override it for .dialect css classname.
Styling modal
You can customize .dt-modal css class to change the default modal behavior. Here's the default css styles applied to modal window: