Componentes de estilo para corresponder à sua identidade visual

Os componentes do Kit de ferramentas do Microsoft Graph são flexíveis para personalização. Se você quiser alterar a aparência dos componentes, faça isso facilmente usando um conjunto de propriedades CSS personalizadas.

Microsoft Graph componentes do Kit de Ferramentas usam o shadow DOM. Isso significa que eles estão isolados do restante do seu aplicativo Web. Por exemplo, se você alterou a cor da fonte global do seu aplicativo Web para azul, Microsoft Graph componentes do Kit de Ferramentas ainda usariam a cor padrão.

Esse isolamento é intencional para que Microsoft Graph componentes do Kit de Ferramentas sempre sejam renderizados conforme o esperado e não sejam afetados pelo estilo específico do seu aplicativo Web.

Para definir o estilo do Microsoft Graph Toolkit, use propriedades CSS personalizadas expostas pelo componente. Por exemplo, para alterar a cor da fonte usada para exibir eventos no componente de agenda:

<style>
  mgt-agenda {
    --agenda-header-color: blue;
    --agenda-event-time-color: blue;
    --agenda-event-subject-color: blue;
    --agenda-event-location-color: blue;
  }
</style>

Você pode encontrar mais informações sobre as propriedades CSS personalizadas disponíveis expostas por cada componente em sua documentação.

Microsoft Graph Toolkit também fornece temas claros e escuros.

A maneira mais fácil de adicionar suporte para a mudança de temas é usar o componente e definir o mgt-theme-toggle plano de fundo do corpo e a cor da fonte como variáveis para seguir o tema.

<head>
  <!-- trimmed for brevity -->
  <style>
    body {
      background-color: var(--fill-color);
      color: var(--neutral-foreground-rest);
    }
  </style>
</head>
<body>
    <!-- trimmed for brevity -->
    <mgt-theme-toggle></mgt-theme-toggle>
    <mgt-people-picker></mgt-people-picker>
</body>

Se você usar a lógica personalizada para alternar o tema do seu aplicativo, poderá fazer com que os componentes do Microsoft Graph Toolkit sigam o tema aplicando-o programaticamente.

<div id="graph">
    <mgt-people-picker></mgt-people-picker>
</div>
<script>
    let region = document.getElementById('graph');
    mgt.applyTheme('dark', region);
</script>