Componente de alternancia de tema en el kit de herramientas de Microsoft Graph
El componente de alternancia de tema permite al usuario establecer o cambiar el tema del documento de claro a oscuro mediante un botón de alternancia.
Un usuario puede usar el componente de alternancia de tema para establecer el tema predeterminado en light o dark. A continuación, el usuario puede alternar estos modos mediante un modificador de alternancia.
Ejemplo
En el ejemplo siguiente se muestra cómo el botón de alternancia del tema establece el modo claro o oscuro en función de las preferencias del usuario.
Propiedades
| Atributo | Propiedad | Descripción |
|---|---|---|
| mode | mode | Cadena para establecer el modo predeterminado del botón de alternancia del tema. El valor predeterminado es light. |
En el ejemplo siguiente se muestra cómo establecer el dark modo como predeterminado.
<mgt-theme-toggle mode="dark"></mgt-theme-toggle>
Variables CSS personalizadas
El componente de alternancia de tema no tiene variables CSS personalizadas.
Eventos
| Evento | Cuándo se emite | Datos personalizados | Cancelable | Burbujas | Funciona con una plantilla personalizada |
|---|---|---|---|---|---|
darkmodechanged |
Se activa cuando la acción del usuario activa el modo oscuro. |
boolean Valor.
true si es modo oscuro en caso contrario false |
No | No | No |
Para obtener más información sobre el control de eventos, vea eventos.
Plantillas
El componente de alternancia de tema no tiene plantillas personalizadas.
Permisos de Microsoft Graph
El componente de alternancia de tema no necesita permisos de Microsoft Graph para funcionar.
Autenticación
El componente de alternancia de tema no necesita autenticación para funcionar.
Caché
El componente de alternancia de tema no almacena en caché ningún dato.
Localización
El control expone las siguientes variables que se pueden localizar. Para obtener más información sobre cómo configurar la localización, consulte Localización de componentes.
| Nombre de cadena | Valor predeterminado |
|---|---|
| etiqueta | Color mode: |
| on | Dark |
| desactivado | Light |