Losing divider in native-base Modal when styling

Question

Using native-base Modal and theming. See their theme/components/modal.ts for a reference as to what components make up a Modal and their theme.

So I'm trying to change the modal theme colors like so:

const theme = extendTheme({
  ...

  components: {
    ModalHeader: {
      baseStyle: {
        _dark: {
          bg: "gray.700",
          color: "warmGray.50",
        },
      },
    },
    ModalBody: {
      baseStyle: {
        _dark: {
          bg: "gray.700",
          color: "coolGray.300",
        },
      },
    },
    ModalFooter: {
      baseStyle: {
        _dark: {
          bg: "gray.600",
          color: "text.50",
        },
      },
    },
    ModalCloseButton: {
      baseStyle: {
        _dark: {
          _icon: {
            color: "coolGray.100",
          },
        },
      },
    },
  },
});

I want to give the divider a color of gray.600 (the same as ModalFooter). However, I don't see ModalDivider as a component to color. Furthermore, the divider is no longer visible once I apply the above theme: my modal with theme applied and missing divider. I tried also coloring ModalContent but that did not help either.

Ideally, I'd like the divider to be seen like in their docs but with my colors. Here is their modal in dark mode: native-base xl modal in dark mode where you can see the divider

Answer 1

The answer lies in borderColor for ModalHeader. Change it like so:

const theme = extendTheme({
  ...
  components: {
    ModalHeader: {
      ...
      baseStyle: {
         ...
        _dark: {
          ...
          borderColor: "blue.500",
        },
      },
    },
  },
});