Styling

Erscheinungsbild und Schriftarten von BookingJs anpassen

PRO-Funktion

Custom Theming erfordert einen Professional-Plan.

Übersicht

timum verwendet Material-UI (MUI) Komponenten für alle Frontends. Das muiTheme-Objekt ermöglicht globale Design-Änderungen, die das gesamte Erscheinungsbild des Widgets beeinflussen.

Grundlegendes Theming

Einfaches Themejavascript

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

Typografie anpassen

Typografiejavascript

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,
      },
    },
  }
);

Vollständiges Theme-Beispiel

Umfangreiches Themejavascript

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', // Keine Großschreibung
        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-Komponente mit Theme

React mit Themetsx

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}
    />
  );
}

Verfügbare Theme-Optionen

Option	Beschreibung
`palette`	Farbpalette (primary, secondary, error, warning, info, success)
`typography`	Schriftart, Größen, Gewichtungen
`shape`	Border-Radius für abgerundete Ecken
`spacing`	Basis-Abstand (Standard: 8px)
`components`	Überschreibungen für einzelne Komponenten

Komponenten-Überschreibungen

Sie können das Styling einzelner MUI-Komponenten gezielt überschreiben:

Komponenten anpassenjavascript

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

Schriftarten

BookingJs unterstützt zwei Strategien zum Laden von Schriftarten:

Inline Fonts: Direkte @font-face Deklaration im Theme
Link-basiert: CSS-Dateien (z.B. Google Fonts) einbinden

Methode 1: Inline Variable Font

Die performanteste Methode ist die Verwendung von Variable Fonts mit direkter @font-face Deklaration:

Variable Fontjavascript

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 Eigenschaften

Eigenschaft	Beschreibung
`family`	Name der Schriftfamilie
`style`	normal, italic
`weight`	Einzelwert (400) oder Range (100 900)
`display`	swap, block, fallback, optional, auto
`src`	Array von Quellen (local, url mit format)

Methode 2: Link-basiertes CSS

Alternativ können Sie bestehende CSS-Bundles wie Google Fonts verwenden:

Google Fontsjavascript

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'
      ]
    }
  }
);

Automatische Deduplizierung

BookingJs verhindert das doppelte Laden derselben CSS-URL.

Komponenten-spezifische Fonts

Sie können auch unterschiedliche Schriften für verschiedene Komponenten verwenden:

Komponenten-Fontsjavascript

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

Selbst gehostete Fonts

Selbst gehostetjavascript

// Font-Dateien in /public/fonts/ ablegen
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

WOFF2 verwenden: Kleinere Dateigröße, breite Unterstützung
Variable Fonts bevorzugen: Eine Datei für alle Gewichtungen
display: swap verwenden: Vermeidet FOIT (Flash of Invisible Text)
CORS beachten: Bei externem Hosting korrekte Headers setzen
local() zuerst: Bereits installierte Fonts werden bevorzugt

Externe Ressourcen

War diese Seite hilfreich?