Customize each elements

[whitedark9]

Customize each elements

[whitedark9]

I found it.

export const Italic = ({ children }: { children?: React.ReactNode }) => (
  <em className="decoration-2 decoration-green-700">{children}</em>
);

export const Bold = ({ children }: { children?: React.ReactNode }) => (
  <strong className="text-green-600 dark:text-green-700">{children}</strong>
);

export const Strikethrough = ({ children }: { children?: React.ReactNode }) => (
  <del className="text-rose-600 dark:text-rose-700 decoration-1">
    {children}
  </del>
);

export const Blockquote = ({ children }: { children?: React.ReactNode }) => (
  <blockquote className="italic m-3 px-4 py-2 text-sm font-medium text-neutral-600 bg-green-100 border-s-4 border-green-600 rounded-lg dark:bg-green-800/50 dark:border-green-600 dark:text-white">
    {children}
  </blockquote>
);

const MDXComponents = {
  strong: Bold,
  del: Strikethrough,
  em: Italic,
  blockquote: Blockquote,
};

// theme.config.tsx

const config: DocsThemeConfig = {
  components: MDXComponents
}

But can't still find how to change theme colors - background, text, card, etc.