Styling

Customize the appearance and fonts of BookingJs: an MUI theme for colors, typography, and components, plus embedding custom web fonts.

Overview

timum uses Material-UI (MUI) components for all frontends. The muiTheme object enables global design changes that affect the entire appearance of the widget.

Basic Theming

timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    palette: {
      primary: {
        main: '#337ab7',
      },
      secondary: {
        main: '#5cb85c',
      },
    },
  }
);

Customizing Typography

timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
      h1: {
        fontSize: '2.5rem',
        fontWeight: 600,
      },
      h2: {
        fontSize: '2rem',
        fontWeight: 600,
      },
      body1: {
        fontSize: '1rem',
        lineHeight: 1.6,
      },
    },
  }
);

Complete Theme Example

timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    palette: {
      primary: {
        main: '#1a73e8',
        light: '#4791db',
        dark: '#115293',
        contrastText: '#ffffff',
      },
      secondary: {
        main: '#f50057',
      },
      background: {
        default: '#f5f5f5',
        paper: '#ffffff',
      },
      text: {
        primary: '#333333',
        secondary: '#666666',
      },
    },
    typography: {
      fontFamily: '"Inter", sans-serif',
      button: {
        textTransform: 'none', // No uppercase
        fontWeight: 500,
      },
    },
    shape: {
      borderRadius: 8,
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            borderRadius: 24,
            padding: '10px 24px',
          },
        },
      },
      MuiCard: {
        styleOverrides: {
          root: {
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          },
        },
      },
    },
  }
);

React Component with Theme

import { TimumBooking } from '@timum/booking';

const theme = {
  palette: {
    primary: {
      main: '#your-brand-color',
    },
  },
  typography: {
    fontFamily: 'Ihr-Font, sans-serif',
  },
};

function BookingPage() {
  return (
    <TimumBooking
      appConfig={{ ref: 'ihre-ressourcen-referenz' }}
      muiTheme={theme}
    />
  );
}

Available Theme Options

Component Overrides

You can specifically override the styling of individual MUI components:

{
  components: {
    MuiButton: {
      defaultProps: {
        disableElevation: true,
      },
      styleOverrides: {
        root: {
          borderRadius: 20,
        },
        containedPrimary: {
          '&:hover': {
            backgroundColor: '#darker-shade',
          },
        },
      },
    },
    MuiTextField: {
      defaultProps: {
        variant: 'outlined',
        size: 'small',
      },
    },
  },
}

Fonts

BookingJs supports two strategies for loading fonts:

• Inline Fonts: Direct @font-face declaration in the theme
• Link-Based: Embed CSS files (e.g., Google Fonts)

Method 1: Inline Variable Font

The most performant method is using variable fonts with a direct @font-face declaration:

timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"My Font", Roboto, Helvetica, Arial, sans-serif',
      fontFaces: [
        {
          family: 'My Font',
          style: 'normal',
          weight: '100 900',  // Variable weight range
          display: 'swap',
          src: [
            { local: 'Inter' },
            { url: '/fonts/inter-var.woff2', format: 'woff2' }
          ]
        },
        {
          family: 'My Font',
          style: 'italic',
          weight: '100 900',
          display: 'swap',
          src: [
            { local: 'Inter Italic' },
            { url: '/fonts/inter-italic-var.woff2', format: 'woff2' }
          ]
        }
      ]
    }
  }
);

fontFace Properties

Method 2: Link-Based CSS

Alternatively, you can use existing CSS bundles such as Google Fonts:

timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
      fontSource: [
        'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'
      ]
    }
  }
);

Component-Specific Fonts

You can also use different fonts for different components:

timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"Inter", sans-serif',
      fontFaces: [
        // Inter for the body text
        {
          family: 'Inter',
          weight: '400 700',
          src: [{ url: '/fonts/inter-var.woff2', format: 'woff2' }]
        },
        // Sora for buttons
        {
          family: 'Sora',
          weight: '500 600',
          src: [{ url: '/fonts/sora.woff2', format: 'woff2' }]
        }
      ]
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            fontFamily: '"Sora", sans-serif'
          }
        }
      }
    }
  }
);

Self-Hosted Fonts

// Place font files in /public/fonts/
timum.init(
  { ref: 'ihre-ressourcen-referenz' },
  {
    typography: {
      fontFamily: '"Corporate Font", sans-serif',
      fontFaces: [
        {
          family: 'Corporate Font',
          style: 'normal',
          weight: 400,
          display: 'swap',
          src: [
            { url: '/fonts/corporate-regular.woff2', format: 'woff2' },
            { url: '/fonts/corporate-regular.woff', format: 'woff' }
          ]
        },
        {
          family: 'Corporate Font',
          style: 'normal',
          weight: 700,
          display: 'swap',
          src: [
            { url: '/fonts/corporate-bold.woff2', format: 'woff2' },
            { url: '/fonts/corporate-bold.woff', format: 'woff' }
          ]
        }
      ]
    }
  }
);

Best Practices

• Use WOFF2: Smaller file size, wide support
• Prefer variable fonts: One file for all weights
• Use display: swap: Avoids FOIT (Flash of Invisible Text)
• Mind CORS: Set correct headers for external hosting
• local() first: Already installed fonts are preferred

Related Topics

• Localization
• Recipes
• Configuration

External Resources

• MUI Theming Documentation
• MUI Default Theme