React Advanced Odontogram - v2.2.1
    Preparing search index...

    Type Alias OdontogramThemeConfig

    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.

    const myTheme: OdontogramThemeConfig = {
    colors: {
    accent: '#e74c3c',
    background: '#fafafa',
    },
    };
    <App themeConfig={myTheme} />
    type OdontogramThemeConfig = {
        colors?: {
            accent?: string;
            accent2?: string;
            background?: string;
            card?: string;
            line?: string;
            muted?: string;
            panel?: string;
            text?: string;
        };
    }
    Index

    Properties

    Properties

    colors?: {
        accent?: string;
        accent2?: string;
        background?: string;
        card?: string;
        line?: string;
        muted?: string;
        panel?: string;
        text?: string;
    }

    Type Declaration

    • Optionalaccent?: string

      Primary accent (buttons, active states). Default: #3b7bff.

    • Optionalaccent2?: string

      Secondary accent (success, selected states). Default: #12b981.

    • Optionalbackground?: string

      Primary background. Default: #f3f6fb (light) / #0f172a (dark).

    • Optionalcard?: string

      Card background. Default: same as panel.

    • Optionalline?: string

      Border / divider color. Default: #d7e0ec (light) / #334155 (dark).

    • Optionalmuted?: string

      Muted / secondary text color. Default: #5b6b7d (light) / #94a3b8 (dark).

    • Optionalpanel?: string

      Panel & card background. Default: #ffffff (light) / #1e293b (dark).

    • Optionaltext?: string

      Primary text color. Default: #1e2a3a (light) / #f1f5f9 (dark).