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.The header - containing token level details (a preview, a name etc)
- 2.The body - housing the actual editor UI with editor controls
- 3.The footer - containing the Call-to-Action, hyype branding and contextual messaging like errors.
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 |
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:
Last modified 1yr ago