Theming

ReservoirKit UI 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)',
  })

const theme = darkTheme({
    font: 'Lato',
    primaryColor: '#9C27B0',
    primaryHoverColor: '#AF52BF',
    headerBackground: '#381B45',
    contentBackground: '#452255',
    footerBackground: '#381B45',
    textColor: '#D5B5E5',
    borderColor: 'rgba(156, 39, 176, 0.2)',
    overlayBackground: 'rgba(56, 27, 69, 0.85)',
  })

const theme = lightTheme({
    font: 'Inter',
    primaryColor: '#F8961E',
    primaryHoverColor: '#FFA71F',
    headerBackground: '#FCE38A',
    contentBackground: '#FFF9D9',
    footerBackground: '#FCE38A',
    textColor: '#984B16',
    borderColor: 'rgba(248, 150, 30, 0.2)',
    overlayBackground: 'rgba(248, 150, 30, 0.75)',
  })

const theme = lightTheme({
    font: 'Source Sans Pro',
    primaryColor: '#FF6B6B',
    primaryHoverColor: '#FF9F9F',
    headerBackground: '#FFE4E4',
    contentBackground: '#FFF0F0',
    footerBackground: '#FFE4E4',
    textColor: '#4F4F4F',
    borderColor: 'rgba(255, 107, 107, 0.2)',
    overlayBackground: 'rgba(255, 107, 107, 0.75)',
  })