Version: 3.0.0

Customize your theme

All web components can be customized by providing a theme property. The theme property includes the following attributes:

type Theme = Partial<{
  "--sodexo-primary-color": string;
  "--sodexo-primary-text-color": string;
  "--sodexo-font-family": string;
  "--sodexo-primary-background-color": string;
  "--sodexo-container-background-color": string;
}>;

If a theme is provided to a web component but one or more attributes are not specified, default values will be applied for those missing attributes.

This theme must be passed to sodexo-app-provider through the dedicated attribute.

Usage

HTML

<!DOCTYPE html>
<html>
<body>
 <sodexo-app-provider
    api-key="your-api-key"
  >
    <!-- Insert your sodexo webcomponent inside the provider -->
  </sodexo-app-provider>

  <script>
    const element = document.querySelector('sodexo-bookings-template');

    element.theme = {
      '--sodexo-primary-color': '#283897',
      '--sodexo-primary-text-color': '#283897',
      '--sodexo-primary-background-color': '#f7f8ff',
      '--sodexo-primary-background-color': 'white',
      '--sodexo-font-family': 'Open Sans',
    };

    element.authConfig = {
      'domain': 'my-domain',
      'clientId': 'my-client-id',
      'redirectUri': 'my-redirect-uir',
      'audience': 'my-audience',
      'scope': 'my-scope'
    };
  </script>

</body>
</html>

Usage​

Usage