Customize Web Component Theme

Style the Selfie Analysis and Appointment Booking web components to match your website’s visual identity.

Prerequisites

• Web component already embedded on your website
• Basic knowledge of CSS and JavaScript configuration

Steps

1. Set the config.theme object on the component to customize colors:

   const component = document.querySelector('hairscope-selfie');
   component.config = {
     theme: {
       primaryColor: '#4A90D9',
       bgMain: '#FFFFFF',
       textMain: '#333333',
       // ... additional theme properties
     }
   };
2. Use CSS ::part() selectors for deep styling of internal elements:

   hairscope-selfie::part(button-primary) {
     border-radius: 8px;
     font-weight: 600;
   }
3. Use named slots for content injection at specific positions:

   <hairscope-selfie>
     <div slot="top">Custom header content</div>
     <div slot="bottom">Custom footer content</div>
     <div slot="camera-top">Instructions above camera</div>
     <div slot="form-top">Form introduction text</div>
   </hairscope-selfie>
4. Set the locale via the data-locale attribute for localization:

   <hairscope-selfie data-locale="es"></hairscope-selfie>

Notes

• Available theme properties include: primaryColor, bgMain, textMain, and additional color tokens.
• Available slot positions: top, bottom, camera-top, form-top, and others depending on the component.
• Supported locales: EN, ES, IT, NL, FR, RU, AR, DE.
• Theme customization applies to both Selfie Analysis and Appointment Booking components.
• CSS ::part() selectors allow styling of shadow DOM elements without breaking encapsulation.