Theming

Learn how themes work in Hopper

AI Tip Want to skip the docs? Use the MCP Server

Introduction

Hopper supports a multiple themes for different product lines. Themes allow applications to customize the appearance of all Hopper components to match a specific brand.

Applying a theme

A theme needs to be provided to a HopperProvider.

Theme can also be nested. This might be useful for certain experiences, such as theme previews, where you want to showcase a specific theme.

Context Hooks

To manage the theme in your application, Hopper exposes a ThemeContext and a useThemeContext hook. Make sure that your application includes all the css files required for the themes you want to support.