Theming

Demo

pnpx gitpick ithacaxyz/porto/tree/main/examples/theming

Porto Themes

Porto allows customize the appearance of the dialog through its theming system. Themes contain various color properties targeting different parts of the dialog, such as the color of the various surfaces, text, buttons and more. See the Theme API to learn more about the available properties and in which context they are used.

Illustration of the theme color names

Steps

Create the theme definition

A theme definition defines the colors and other styles you want to use in the Porto dialog. The only required property is colorScheme, to let Porto know if you intend to extend the full theme (light dark) or if your theme will only support one color scheme (light or dark).

custom-theme.ts

import type { ThemeFragment } from 'porto/theme'
 
export const theme: ThemeFragment = {
  colorScheme: 'light dark',
  primaryBackground: ['#ff007a', '#ffffff'],
  primaryContent: ['#ffffff', '#ff007a'],
}

Initialize Porto with a theme

Pass your theme to the Porto dialog mode when creating the Porto instance. This applies the theme to all dialog interactions.

theming.ts

import { Mode } from 'porto'
import { porto  } from 'porto/wagmi'
import { createConfig } from 'wagmi'
import { theme } from './custom-theme.js'
 
const connector = porto({
  mode: Mode.dialog({ 
    theme, // pass your theme to Mode.dialog()
  }), 
})
 
const wagmiConfig = createConfig({
  connectors: [connector],
})

Dynamic theme switching

You also have the possibility to switch themes dynamically without reinitializing Porto. This can be useful for implementing a theme switcher or similar functionality in your application.

theme-switching.ts

import { Dialog, Mode, Porto } from 'porto'
import { theme1, theme2 } from './themes.js'
 
// create a theme controller
const themeController = Dialog.createThemeController()
 
// initialize Porto with the theme controller
const porto = Porto.create({
  mode: Mode.dialog({
    themeController,
  }),
})
 
// switch to the first theme
themeController.setTheme(theme1)
 
// switch to the second theme
themeController.setTheme(theme2)