Anular los temas, la marca y el estilo de la interfaz de usuario de Flex

La interfaz de usuario de Flex expone tres niveles principales de personalización:

1. Temas básicos: temas predefinidos de Flex que se incluyen de forma predeterminada.
2. Anulación del color de los temas básicos: anulación del color a nivel global heredados por todos los componentes de Flex UI (la interfaz de usuario de Flex).
3. Anulación de los temas de componentes: pequeñas anulaciones de color que te permiten personalizar un componente específico.

Puedes utilizar el tema GreyLight de Flex con una anulación de uno de los colores y una anulación de color específica en el componente Notificaciones.

Definir un tema

Temas básicos

Los temas básicos proporcionan un conjunto de colores como punto de partida para el contact center. La interfaz de usuario de Flex incluye los siguientes temas básicos predefinidos:

• GreyLight
• GreyDark
• FlexLight
• FlexDark

Configurar un tema básico

Puedes configurar el tema básico que deseas en el objeto de configuración de Flex.

const configuration = {
        colorTheme: {
            baseName: "FlexDark"
        }
};

Anular los colores del tema básico

También puedes crear tu propia variación de un tema mediante la reconfiguración de los colores básicos utilizados en el tema.

En el siguiente ejemplo, Flex utiliza GreyDark como tema básico. Posteriormente, aplicará los nuevos colores definidos en el objeto de color y anulará los colores básicos y algunos colores estándar del tema GreyDark.

const configuration = {
    colorTheme: {
        baseName: "GreyDark",
        colors: {
            base0: "#000000",
            base1: "#222222",
            base2: "#444444",
            base3: "#d4d4d4",
            base4: "#e0e0e0",
            base5: "#efefef",
            base6: "#ffffff",
            darkTextColor: "#222222",
            buttonHoverColor: "rgba(0, 0, 0, 0.2)",
            tabSelectedColor: "#009cff",
            connectingColor: "#ff9800",
            disconnectedColor: "#c0192d"
        }
    }
};

Consulta la lista completa de colores para anular los colores de los temas básicos.

Anular el color de componentes individuales

La selección de temas en Flex también admite personalizaciones pequeñas a nivel de cada componente. En el siguiente ejemplo de código, Flex anulará el color de fondo y el color de texto del componente MainHeader, así como el color de fondo y los colores de los botones del componente SideNav.

const configuration = {
    colorTheme: {
        overrides: {
            MainHeader: {
                Container: {
                    background: "#2f5771",
                    color: "#ffffff"
                }
            },
            SideNav: {
                Container: {
                    background: "#4a4e60"
                },
                Button: {
                    background: "#4a4e60"
                },
            }
        }
    }
};

Consulta la lista completa de componentes y propiedades personalizables.

Aplicar el tema

Una vez que hayas definido un tema, deberás aplicarlo a Flex UI (la interfaz de usuario de Flex).

Aplicar el tema en un plugin de Flex

Para definir el tema de color, especifica la propiedad baseName junto con la propiedad opcional colors y el objeto overrides para el reemplazo de los colores del componente.

CustomTheme.js

export default {
    baseName: "GreyDark",
    colors: {
        base0: "#000000",
        base1: "#222222",
        base2: "#444444"
    },
    overrides: {
        MainHeader: {
            Container: {
                background: "#2f5771",
                color: "#ffffff"
            }
        },
        SideNav: {
            Container: {
                background: "#4a4e60"
            },
            Button: {
                background: "#4a4e60"
            },
        }
    }
}

A continuación, establece el tema personalizado dentro de la propiedad colorTheme de la configuración de Flex y aplícala durante la inicialización del plugin.

ThemePlugin.js

import { FlexPlugin } from 'flex-plugin';
import React from 'react';
import CustomTheme from './CustomTheme'

const PLUGIN_NAME = 'ThemePlugin';

export default class ThemePlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  init(flex, manager) {
    const configuration = {
        colorTheme: CustomTheme
    };

    // aplicar tema
    manager.updateConfig(configuration);
  }
}

Aplicar temas en las instalaciones autoalojadas de Flex

Incluye el tema personalizado en la propiedad colorTheme del objeto de configuración al inicializar Flex.

const configuration = {
    colorTheme: {
        baseTheme: 'FlexDark'
    }
}

Twilio.Flex.runDefault(configuration);

Próximos pasos

• Explora la referencia completa de los 11 colores básicos y las propiedades configurables de los temas
• Crea un plugin para personalizar el tema de tu instancia de Flex
• Comienza a cambiar el comportamiento de la interfaz de usuario de Flex con el marco de acciones