Customizing Styles
It's just css
Out of the box, RDF provides a gray scale palate that works in both light and dark mode. Each form element scales to 100% of the form container width.
Wrap and go
Styles in RDF also "flat" so a namespaced wrapper is all you ever need to override defaults.
For example, to make the toggle switch color blue (it is Apple green by default), you can simply wrap the RDF component with <div className="demo">...</div>
and style it like this:
.demo .switch:not([data-state='unchecked']) { background-color: skyblue; -webkit-tap-highlight-color: skyblue; }
Color Variables
Any of the following variables can be defined in your custom CSS to change colors of the elements:
--button-color-light: #222; --button-color-hover-light: #666; --button-text-light: #fff; --button-text-dark: #222; --button-color-dark: #eee; --button-color-hover-dark: #fff; --button-text-dark: #222; --label-color-light: #555; --label-color-dark: #fff; --input-text-color-light: #333; --input-text-color-dark: #fff; --input-background-light: #fff; --input-background-dark: #333; --input-border-light: #888; --input-border-dark: #444; --input-focused-shadow-light: #888; --input-focused-shadow-dark: #999; --input-border-error-light: #ff7070; --input-border-error-dark: #ff7070; --checkbox-background-light: #fff; --checkbox-background-dark: #111; --checkbox-border-light: #888; --checkbox-border-dark: #bbb; --checkbox-check-light: #000; --checkbox-check-dark: #fff; --switch-on-background-light: rgb(55, 199, 55); --switch-on-background-dark: rgb(55, 199, 55); --switch-off-background-light: rgb(148, 148, 148); --switch-off-background-dark: rgb(125, 125, 125); --radio-select-indicator-light: #555; --radio-select-indicator-dark: #bbb; --select-placeholder-color-light: #777; --select-placeholder-color-dark: #777; --select-group-label-light: rgb(158, 158, 158); --select-group-label-dark: #aaa; --select-highlight-text-light: #222; --select-highlight-background-light: rgb(228, 228, 228); --select-highlight-text-dark: rgb(241, 241, 241); --select-highlight-background-dark: rgb(89, 89, 89); --select-item-disabled-light: #ddd; --select-item-disabled-dark: #555; --select-content-shadow-light: rgba(22, 23, 24, 0.35); --select-content-shadow-dark: rgba(190, 190, 190, 0.35); --media-target-background-light: #eee; --media-target-background-dark: rgb(86, 86, 86); --media-target-icon-color-light: rgb(207, 207, 207); --media-target-icon-color-dark: rgb(144, 144, 144); --link-color: rgb(72, 202, 238); --error-message: #cc0000;