Theming

ReservoirKit provides 2 preconfigured themes, darkMode and lightMode. They can be used as is or configured with some additional overrides:

const theme = darkTheme({
  headlineFont: "Sans Serif",
  font: "Serif",
  primaryColor: "#323aa8",
  primaryHoverColor: "#252ea5",
})

Click here for a full list of overrides.

If that isn't enough customization you can also create a completely custom ReservoirKitTheme.

const theme: ReservoirKitTheme = {
  radii: { ... },
  fonts: { ... },
  colors: { ... }
}

Theme Examples

Copy one of the theme objects below as a foundation for personalizing your swap widget's appearance. While doing so, consider incorporating other design elements to enhance the overall look and feel.

const theme = darkTheme({
    font: 'Inter',
    primaryColor: '#4A90E2',
    primaryHoverColor: '#6EA9F6',
    headerBackground: '#283B5A',
    contentBackground: '#354766',
    footerBackground: '#283B5A',
    textColor: '#C2D2E8',
    borderColor: 'rgba(74, 144, 226, 0.2)',
    overlayBackground: 'rgba(40, 59, 90, 0.85)',
  })