Custom Styling

To customize The Box with a theme that best matches your site, begin by importing the base styles in your _app file.

import "@decent.xyz/the-box/index.css";

You can apply our custom themes using the theme provider or with css imports.

More variables should be exposed later for further customization!

Method 1: Theme Provider

Import a preset or create your own theme:

// import an existing theme
import { darkTheme } from '@decent.xyz/the-box';

// or create your own!
const myTheme = {
  mainBgColor: "...",
  mainTextColor: "...",
  boxSubtleColor1: "...",
  boxSubtleColor2: "...",
  gearCircleColor: "...",
  loadShineColor1: "...",
  loadShineColor2: "...",
  chainDropdownBorder: "...",
  chainDropdownHoverColor: "...",
  buyBtnBgColor: "...",
  buyBtnTextColor: "...",
  boxLoadingBadgeColor: "...",
  boxDialogBgColor: "...",
}

Import the BoxThemeProvider and pass in your theme:

import { BoxThemeProvider } from '@decent.xyz/the-box';

// wrap your usage of the Box with the theme provider
<BoxThemeProvider theme={darkTheme}>
  <TheBox
  ...
  />
</BoxThemeProvider>


// or, wrap your app with the provider
export default function App({ Component, pageProps }: AppProps) {
  return (
    <BoxThemeProvider theme={myTheme}>
      <Component {...pageProps} />
    </BoxThemeProvider>
  );
}

Method 2: CSS only

Import the preset stylesheet and add the className matching the imported file to TheBox:

// import the preset
import "@decent.xyz/the-box/dist/dark.css";

// add the matching className
<TheBox
	className="dark"
  ...
/>

To create a custom theme, you can override the css variables in your global styles.

.the-box {
  --main-bg-color: ...;
  --main-text-color: ...;
  --box-subtle-color1: ...;
  --box-subtle-color2: ...;
  --gear-circle-color: ...;
  --load-shine-color1: ...;
  --load-shine-color2: ...;
  --chain-dropdown-border: ...;
  --chain-dropdown-hover-color: ...;
  --buy-btn-bg-color: ...;
  --buy-btn-text-color: ...;
  --box-loading-badge-color: ...;
  --box-dialog-bg-color: ...;
  --chain-dropdown-bg-color: ...;
}

If you want to apply a preset and override certain properties, ensure your selector has enough specificity to beat two class names.

/* you need to be more specific than .dark.the-box */  
.dark.the-box.the-box {  
  --main-bg-color: ...;  
}

Integration Questions?

If you have any integration questions, reach out and a support dev will help!
email: [email protected], twitter: @decentxyz