Styles Quick Links

Styling Your App

We think it is important that the integration of the app in the website should be as good as possible. To help with this we provide a method to get information about the styling of the website like colors and fonts. Your app should implement that styling.

Builder.getStyles()

Return an object with the site colors and font.

Example

// Function that will be called when the 'componentLoaded' event is fired
const initialize = () => {
  // Call the SDK function
  const styles = Builder.getStyles()

  // Change the colors of the app
  document.body.style.fontFamily = styles.font.fontFamily
  document.body.style.fontSize = styles.font.fontSize
  document.body.style.background = styles.colors.background
}
// Before we can use the SDK, we have to be sure everything has loaded, so we listen to the 'componentLoaded' event.
document.addEventListener('componentLoaded', initialize)

Styles Object

Example

{
  'colors': {
    'text': '#ffffff',
    'background': '#000000'
  }
  'font': {
    'fontFamily': 'Lato',
    'fontSize': '15px'
  }
}

NOTE: The required font will be loaded automatically from our server. So you can safely set the font-family from the styles object.