Styles (UI)

use variables to customise your components

black mode palette:

https://coolors.co/404040-2a2a2a-ffffff-888888

light mode palette

https://coolors.co/f2f2f2-ffffff-2a2a2a-747474

---

Option 1: Set the root CSS

variables that can be customized:

const ThemeVariables = {
    '--vdk-color-dark-primary': '#404040',
    '--vdk-color-dark-primary-hover': '#454545',
    '--vdk-color-dark-primary-active': '#4a4a4a',
    '--vdk-color-dark-secondary': '#2a2a2a',
    '--vdk-color-dark-tertiary': '#ffffff',
    '--vdk-color-dark-quaternary': '#888888',
    '--vdk-color-light-primary': '#f2f2f2',
    '--vdk-color-light-primary-hover': '#eeeeee',
    '--vdk-color-light-primary-active': '#eaeaea',
    '--vdk-color-light-secondary': '#ffffff',
    '--vdk-color-light-tertiary': '#2a2a2a',
    '--vdk-color-light-quaternary': '#747474',
    '--vdk-color-walletconnectblue': '#3496ff',
    '--vdk-font-family': "Inter, sans-serif",
    '--vdk-font-size-medium': '14px',
    '--vdk-font-size-large': '18px',
    '--vdk-font-weight-medium': '500',
    '--vdk-modal-z-index': '200',
};

---

Option 2: Using the customStyles

import {CustomizedStyle, DAppKitUI, DAppKitUIOptions} from '@vechain/dapp-kit-ui';

const styles: CustomizedStyle = {
  '--vwk-modal-z-index': '9999',
}

const vechainWalletKitOptions: DAppKitUIOptions = {
    nodeUrl: 'https://testnet.vechain.org/',
    genesis: 'test',
    themeVariables: {
        '--vdk-color-dark-primary': '#404040',
        '--vdk-color-dark-primary-hover': '#454545',
        '--vdk-color-dark-primary-active': '#4a4a4a',
        '--vdk-color-dark-secondary': '#2a2a2a',
        '--vdk-color-dark-tertiary': '#ffffff',
        '--vdk-color-dark-quaternary': '#888888',
        '--vdk-color-light-primary': '#f2f2f2',
        '--vdk-color-light-primary-hover': '#eeeeee',
        '--vdk-color-light-primary-active': '#eaeaea',
        '--vdk-color-light-secondary': '#ffffff',
        '--vdk-color-light-tertiary': '#2a2a2a',
        '--vdk-color-light-quaternary': '#747474',
        '--vdk-color-walletconnectblue': '#3496ff',
        '--vdk-font-family': "Inter, sans-serif",
        '--vdk-font-size-medium': '14px',
        '--vdk-font-size-large': '18px',
        '--vdk-font-weight-medium': '500',
        '--vdk-modal-z-index': '200',
    },
};

DAppKitUI.configure(vechainWalletKitOptions);