Easyteam Embedded
GuidesAPIWhite-Label UIs
GuidesAPIWhite-Label UIs
  1. Themes
  • Integration
    • Easyteam Components
    • iframe Components
    • React Web Components
    • React Native Components
  • Component Reference
    • Time Clock Reference
    • Employees List Reference
    • Timesheets Reference
    • Shift Form Reference
    • Shift Notes Reference
    • Weekly Schedules Reference
    • Agenda Schedule Reference
    • Time Off Policies Settings Reference
    • Time Off Single Policy Reference
    • Organization Settings Reference
  • Themes
    • UI Customization
  1. Themes

UI Customization

Easyteam Embedded provides comprehensive theming capabilities to match your platform's design system.

Theme Structure#

All components can inherit styles from a global theme while allowing component-specific overrides.
To define your theme:
1
Design tokens that define your core design system values
2
Component-specific styling that applies these tokens to individual elements
Component styling inherit from the tokens you define and each component can have additional specific styling on each of its elements for maximum control.

Basic Implementation#

Design Tokens#

Design tokens define the fundamental values of your design system. Tokens can be direct values OR token references.
You can use direct values (e.g., #ffffff) or reference tokens (e.g., primary.main).
These tokens will automatically apply to all components by default, allowing you to define the theme once across the full app.

Common Elements#

All components share some basic styling capabilities:

Text Elements#

Button Styling#

Button Variants#

Each button type can be customized: primary, secondary, small, outline, link-button, destructive

Table Styling#

Referencing Nested Tokens#

When tokens are nested (like colors.primary.main), you can reference them using dot notation:

Styling Inheritance#

Styles apply in this order:
1.
Base/global styles are applied first
2.
Common element styles (button, table, etc.) are applied next
3.
Component-specific styles are applied last and override previous styles

Component-Specific Themes#

Each component accepts specific styling options. Components inherit the global theme but can be overridden with component-specific themes.
When defining the styling for a specific component, you can still refer to the globally defined tokens, colors and fonts.
Read each component's reference page for the customization options.

Custom Strings#

Many components allow customization of text strings.
Custom strings allows you to override any of the texts on the component with your own texts.
Custom Strings are currently in beta.
đź’ˇ
Can't find the theme property you need? Our support team can assist and open access to other customization options.
Modified at 2025-03-22 23:56:20
Previous
Organization Settings Reference