OptionalcolorsOptionalaccent?: stringPrimary accent (buttons, active states). Default: #3b7bff.
Optionalaccent2?: stringSecondary accent (success, selected states). Default: #12b981.
Optionalbackground?: stringPrimary background. Default: #f3f6fb (light) / #0f172a (dark).
Optionalcard?: stringCard background. Default: same as panel.
Optionalline?: stringBorder / divider color. Default: #d7e0ec (light) / #334155 (dark).
Optionalmuted?: stringMuted / secondary text color. Default: #5b6b7d (light) / #94a3b8 (dark).
Optionalpanel?: stringPanel & card background. Default: #ffffff (light) / #1e293b (dark).
Optionaltext?: stringPrimary text color. Default: #1e2a3a (light) / #f1f5f9 (dark).
Theme configuration for the Odontogram component.
Allows host applications to override the default color palette without modifying CSS files. All properties are optional — only the provided values are overridden; the rest fall back to the built-in defaults.
Colors are applied as CSS custom properties (
--odon-*) on the component root element, so they work regardless of whether the host uses Tailwind CSS or plain CSS.Example