Links
Comment on page

Theming

How to make your own themed Lore widget
You can customize the background and foreground colors, font family, and border radius of the hyype widget to match the look and feel of your app. This section explains how to customize each attribute of the widget with your own theme.
The hyype widget has 3 parts:
  1. 1.
    The header - containing token level details (a preview, a name etc)
  2. 2.
    The body - housing the actual editor UI with editor controls
  3. 3.
    The footer - containing the Call-to-Action, hyype branding and contextual messaging like errors.

Theme Variables

Theme variables
Name
Description
backgroundColor
Defines the background of the widget and all the menu items
e.g. #fff is the background color in the above example
foregroundColor
Defines the font color, border colors, menu borders etc based on this.
e.g. #000 is the foreground color in the above example
secondaryColor
Defines the secondary font color of subtext
e.g. rgba(0, 0, 0, 0.75) is the secondaryColor in the above example
activeColor
Defines the color of the error messaging, active menu items, button background, loading spinner etc.
e.g. #FC714F is the color in the above example
fontFamily
Font family of the editor text as well as all the menu items and wherever text components are displayed like error messaging.
buttonTextColor
Defines the font color of the primary CTA.
E.g. default button text color is #fff
highlightColor
Defines the color of hover states on all menu items. Selected block color and the color of hyype branding segment.
This section can accept alpha / opacity.
E.g. rgba (0,0,0,0.05) is the highlightColor by default
borderColor
Defines the color of all the border elements on containers as well as menu items.
This section should accept alpha / opacity
E.g. rgba (0,0,0,0.5) is the borderColor by default

Overriding theme

You can override specific attributes of the widget by creating a Theme object and defining the properties you wish to override. Any properties left undefined will fallback to the default theme.
For example, here is a simple Theme that will override the default props.
import { Theme, HyypeWidget } from '@hyype/widget';
// Define a custom theme to override default attributes
const mybesttheme: Theme = {
borderRadius: 0,
fontFamily: '"Helvetica"',
backgroundColor: 'rgba(255, 255, 255, 1)',
foregroundColor: 'rgba(0, 0, 0, 1)',
activeColor: 'rgba(252, 113, 79, 1)',
buttonTextColor: 'rgba(255, 255, 255, 1)',
highlightColor: 'rgba(127, 127, 127, 0.08)',
secondaryColor: 'rgba(0, 0, 0, 0.75)',
}
function App() {
<div className="Hyype">
<HyypeWidget
web3Provider={web3Provider}
clientId={clientId}
contractAddress={contractAddress}
tokenId={tokenId}
platformSpecificSigningMessage={MY_APP_LORE_SIGNING_MESSAGE}
env=”production”
theme={mybesttheme}
/>
</div>
}
Check out a few examples below to understanding the theming variables: