Theming

Built-in Modal component supports basic theming. You can create your custom theme or extend the default one.

Extending a built-in theme

Inject a serialized theme into global styles so the Modal will use CSS variables generated by the theme.

import 'w3r-modal/style.css'
import { cssStringFromTheme, defaultTheme } from 'w3r-modal'

const cssString = cssStringFromTheme({ ...defaultTheme /* override theme values here */ })

export const App = () => {
  return (
    <>
      <style jsx global>
        {`
          :root {
            ${cssString}
          }
        `}
      </style>
    </>
  )
}

Creating a theme from scratch

Below is a table of all theme values used by Modal. All of them are necessary to set for the modal to display properly. There is a built-in Theme type for easier value mapping.

After setting all the variables, setup the theme like this:

import 'w3r-modal/style.css'
import { cssStringFromTheme } from 'w3r-modal'
import { myTheme } from '../theme'

const cssString = cssStringFromTheme(myTheme)

export const App = () => {
  return (
    <>
      <style jsx global>
        {`
          :root {
            ${cssString}
          }
        `}
      </style>
    </>
  )
}