Personalizar el tema

Esta página se aplica a Apigee y Apigee Hybrid.

Consulta la documentación de Apigee Edge.

Un tema es una hoja de estilo global que proporciona un aspecto uniforme a todas las páginas de tu portal. El objetivo de un tema es permitirte cambiar el aspecto de todas las páginas de tu portal a la vez.

Puedes personalizar, previsualizar y publicar tu tema, tal como se describe en las siguientes secciones.

Explorar el editor de temas

Personaliza, previsualiza y publica el tema de tu portal en el editor de temas.

Para acceder al editor de temas, sigue estos pasos:

1. Abre la página Portales.

   Interfaz de usuario de Cloud Console

   En la consola de Apigee en Cloud, ve a la página Distribución > Portales.
   
   Ir a Portales

   Interfaz clásica

   En la barra de navegación lateral, selecciona Publicar > Portales para ver la lista de portales.

2. Haz clic en la fila del portal cuyo tema quieras editar.

3. Abre el editor.

   Interfaz de usuario de Cloud Console

   1. Haz clic en Temas.
   2. Haz clic en Editar.

   Interfaz clásica

   Haz clic en Tema.

El editor de temas te permite hacer lo siguiente:

• Personaliza rápidamente los estilos básicos con el editor de temas de estilos básicos, que incluye los siguientes elementos:
  • Paleta de colores
  • Conjunto de fuentes y estilos
  • Logotipos
• Anula las variables del tema o personaliza los elementos de estilo del tema en el editor de temas avanzado, incluidos (entre otros) los siguientes elementos:
  • Paleta de colores
  • Conjunto de fuentes y estilos
  • Barra de herramientas de navegación
  • Imagen de fondo
  • Tipografía
• Previsualizar los cambios del tema
• Previsualizar el portal en un navegador
• Publica el tema en tu portal activo

Acerca del tema base

La mayoría de las reglas de estilo del tema base que definen el aspecto del sitio se basan en Material Design de Angular. El diseño de material de Angular usa diseños basados en cuadrículas y componentes y estilos coherentes para ofrecer una experiencia interactiva unificada.

Las reglas de estilo se definen mediante Sassy Cascading Style Sheet (SCSS). SCSS es un superconjunto de hojas de estilo en cascada (CSS) que ofrece las siguientes ventajas:

• Variables globales que se pueden reutilizar en toda la hoja de estilo.
• Reglas anidadas para ahorrar tiempo de desarrollo de hojas de estilo.
• Posibilidad de crear mixins y funciones

Por ejemplo:

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

SCSS se compila y se convierte en CSS antiguo antes de que el contenido se renderice en la página web.

La hoja de estilo de Angular Material, el archivo SCSS de temas de Material (material-theming.scss), se usa en el tema base. Esta hoja de estilo declara variables, funciones y mixins que se pueden anular mediante variables personalizadas y secciones SCSS, tal como se describe en el artículo Personalizar el tema con el editor de temas avanzado.

En función de los temas de la interfaz de usuario que elijas, se declararán varias variables SCSS que definen la tipografía, el color y los estilos de diseño, y que se utilizan en la hoja de estilo base. Puede anular las variables que se indican en la referencia de variables de tema.

Nota: La mayoría de los estilos de la documentación de referencia de la API se definen fuera del tema base. Apigee recomienda no cambiar el estilo de la documentación de referencia de la API.

Personalizar la paleta de colores

Personaliza la paleta de colores con el editor de estilos básicos o sustituyendo las variables del tema.

Acerca de las categorías de la paleta de colores

Las definiciones de la paleta de colores del portal integrado se agrupan en las siguientes categorías, que se definen mediante el estilo de color de Material Design en el tema base.

Categoría	Estilos
Principal	Barras de herramientas de navegación, encabezados, encabezados de tarjetas y botones
Secundario	Texto <pre> y <code>
Énfasis	Navegación, enlaces y botones destacados
Advertencia	Advertencias y errores

Personalizar la paleta de colores con el editor de estilo básico

Personaliza rápidamente las paletas de colores primario y de énfasis con el editor de estilos básicos.

Nota: El color para destacar se usa en elementos de navegación, como botones y resaltes. Evita usar el blanco u otros colores muy claros como color de acento, ya que esto afectará negativamente a la visibilidad de la navegación.

Para personalizar la paleta de colores con el editor de estilos básicos, sigue estos pasos:

1. Accede al editor de temas.

2. Especifica los colores principales y para destacar.

   Interfaz de usuario de Cloud Console

   1. Para personalizar el color principal, en el menú desplegable Color principal, selecciona un color o introduce un valor hexadecimal personalizado en el campo de texto.
   2. Para personalizar el color para destacar, en el menú desplegable Color para destacar, selecciona un color o introduce un valor de color hexadecimal personalizado en el campo de texto.
   3. Haz clic en Guardar para guardar los cambios.
   4. Haz clic en Vista previa para ver los cambios del portal en un navegador.

   Interfaz clásica

   1. Para personalizar el color principal, en el menú desplegable Color principal, selecciona un color o haz clic en Personalizado e introduce un valor hexadecimal personalizado en el cuadro de texto.
   2. Para personalizar el color de énfasis, en el menú desplegable Color de énfasis, selecciona un color o haz clic en Personalizado e introduce un valor hexadecimal personalizado en el cuadro de texto.
   3. Haz clic en Guardar para guardar los cambios.
   4. Consulta los cambios en el panel de vista previa o haz clic en Vista previa para verlos en un navegador. Nota: Puedes hacer clic en la navegación del portal en el panel de vista previa para ver los cambios en todas las páginas.

3. Haz clic en Publicar para publicar tu tema. Se te pedirá que confirmes la actualización.

Personalizar la paleta de colores anulando las variables del tema

Para personalizar la paleta de colores anulando las variables del tema, accede al editor de temas avanzado e incluye una o varias de las siguientes variables con valores ajustados en la sección Variables para cambiar los colores primario, secundario, de acento o de mensaje de advertencia, respectivamente. Consulta Información sobre las categorías de la paleta de colores.

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

Nota: El color para destacar se usa en elementos de navegación, como botones y resaltes. Evita usar el blanco u otros colores muy claros como color de acento, ya que esto afectará negativamente a la visibilidad de la navegación.

Consulte el contenido del archivo SCSS de temas de material importado (material-theming.scss) para identificar las variables de color predefinidas (como $mat-grey). Los valores numéricos indican los valores de sombreado de los elementos predeterminados, más claros y más oscuros, respectivamente.

También puedes crear tu propia variable de color. Por ejemplo:

Nota: Cuando crees tu propia variable de color, debes definir los ajustes de color de todos los valores numéricos que se indican a continuación. De lo contrario, es posible que las páginas del portal no se carguen correctamente.

$my-color-variable: (
    50 : #f9f0e7,
    100 : #f0d8c2,
    200 : #e6bf9a,
    300 : #dba572,
    400 : #d49153,
    500 : #cc7e35,
    600 : #c77630,
    700 : #c06b28,
    800 : #b96122,
    900 : #ad4e16,
    A100 : #ffebe0,
    A200 : #ffc9ad,
    A400 : #ffa77a,
    A700 : #ff9661,
    // Color to render text presented on a background of the same level
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

Después, úsalo para cambiar la paleta de colores, como se muestra en el siguiente ejemplo:

$primary: mat-palette($my-color-variable, 900, 200, 400);

Personalizar el conjunto de fuentes y los estilos

Personaliza el conjunto de fuentes y los estilos con el editor de estilos básicos o sustituyendo las variables del tema. También puedes importar una fuente personalizada.

Personalizar el conjunto de fuentes y los estilos con el editor de estilos básicos

Para personalizar el conjunto de fuentes y los estilos con el editor de estilos básicos, sigue estos pasos:

1. Accede al editor de temas.
2. Para cambiar el conjunto de fuentes, selecciona un valor en el desplegable Fuente.
3. Para cambiar los estilos de fuente, despliega la sección Estilos de fuente y edita los estilos que quieras, como el tamaño de la fuente, la altura de línea y el grosor de la fuente de los elementos HTML que quieras.
4. Haz clic en Guardar para guardar los cambios.
5. Haz clic en Vista previa para ver los cambios del portal en un navegador.
6. Haz clic en Publicar para publicar tu tema. Se te pedirá que confirmes la actualización.

Personalizar el conjunto de fuentes y los estilos anulando las variables del tema

Para personalizar el conjunto de fuentes y los estilos anulando las variables del tema, accede al editor de temas avanzado e incluye una o varias variables de conjunto de fuentes y estilo con valores ajustados en la sección Variables.

Por ejemplo, para cambiar la fuente predeterminada a Arial, define la siguiente variable:

$typography-main-font-family: 'Arial';

Importar una fuente personalizada

Importa una fuente de Google (que no esté incluida en el conjunto de fuentes predeterminadas) o tu propia fuente personalizada y, a continuación, haz referencia a la fuente personalizada en tu hoja de estilo, tal como se describe a continuación.

Importar una fuente de Google

Para importar una fuente de Google, accede al editor de temas avanzado e importa la fuente en la sección Estilos personalizados, como se muestra a continuación:

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

Importar una fuente personalizada

Importa tu propia fuente personalizada con la regla CSS @font-face. La regla @font-face admite varios tipos de formatos de archivo, como TrueType (TTF) y Web Open Font Format (WOFF), entre otros.

Para importar tu propia fuente personalizada, sigue estos pasos:

1. También puedes subir el archivo de la fuente al gestor de recursos, tal como se describe en el artículo Subir un archivo.

2. Accede al editor de temas avanzado y añade la regla @font-face a la sección Estilos personalizados, donde font-family especifica el nombre de la fuente, url especifica la ubicación del archivo de la fuente (en este caso, el gestor de recursos), MyCustomFont.tff es el nombre del archivo de la fuente personalizada y format especifica el formato de la fuente.

   @font-face {
      font-family: 'MyCustomFont';
      src: url('files/MyCustomFont.tff') format('truetype')
   }
   

Hacer referencia a la fuente personalizada en la hoja de estilo

Haga referencia a la fuente personalizada en una de las variables de conjunto y estilo de fuente de la sección Variables. Por ejemplo:

$typography-main: mat-typography-config(
    $font-family: '"Indie Flower", "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

Personalizar los logotipos

Puede personalizar los logotipos que se usan en el portal en las siguientes ubicaciones:

Ubicación del logotipo	Tamaño de archivo predeterminado
Barra de herramientas de navegación para ordenadores	196x32 píxeles
Barra de herramientas de navegación móvil	156x32 píxeles
Icono de página en la barra de direcciones del navegador (y en otras ubicaciones)	32x32 píxeles
Página de inicio de sesión	392x64 píxeles

Personalizar el logotipo de la barra de herramientas de navegación para pantallas de ordenadores y móviles

Personaliza el logotipo de la barra de navegación para que se muestre en ordenadores y móviles. En función de la anchura de tu navegador, puede que veas la versión para ordenadores o para móviles del logotipo.

No puedes eliminar el logotipo principal, solo puedes sustituirlo. Si no especifica ningún logotipo para la pantalla móvil, se usará el logotipo principal de forma predeterminada.

Nota: Si los logotipos de tu sitio para ordenadores y para móviles tienen un tamaño diferente al predeterminado, se redimensionarán automáticamente al 60% de la altura de la barra de herramientas de navegación. Puedes ajustar la altura de la barra de herramientas de navegación, tal como se describe en el artículo Personalizar la barra de herramientas de navegación.

Para personalizar el logotipo que se usa en la barra de navegación para pantallas de ordenadores y móviles, sigue estos pasos:

1. Obtén una o varias copias del logotipo de tu empresa que sean adecuadas para su uso. Consulta la tabla anterior para ver los tamaños recomendados.
2. Accede al editor de temas.

3. Sube el logotipo principal.

   Interfaz de usuario de Cloud Console

   1. En el editor de temas, en Estilos básicos, Logotipo principal, haz clic en Buscar.
   2. Desplázate hasta el archivo del logotipo y selecciónalo.
   3. Haz clic en Abrir.

   Interfaz clásica

   En el Editor de temas, para sustituir el logotipo de la barra de navegación superior en las pantallas de ordenador, sigue estos pasos:

   1. En Estilos básicos, en el panel de la derecha, haga clic en Subir en el campo Logotipo principal.
   2. Busca la versión para ordenador de tu logotipo en tu directorio local.
   3. Haz clic en Abrir para subir el archivo.

4. Sube el logotipo para móviles.

   Interfaz de usuario de Cloud Console

   1. En el editor de temas, en Estilos básicos, despliega Opciones de logotipo.
   2. En Logotipo para móviles, haz clic en Buscar.
   3. Desplázate hasta el archivo del logotipo para móviles y selecciónalo.
   4. Haz clic en Abrir.

   Interfaz clásica

   Para sustituir el logotipo de la barra de navegación superior en las pantallas de móvil, sigue estos pasos:

   1. En Estilos básicos, en el panel de la derecha, despliega Opciones de logotipo y haz clic en Subir en el campo Logotipo para móviles.
   2. Busca la versión para móviles de tu logotipo en tu directorio local.
   3. Haz clic en Abrir para subir el archivo.

5. Haz clic en Guardar.

6. Haz clic en Vista previa para ver los cambios del portal en un navegador. En función de la anchura de tu navegador, puede que veas la versión para ordenadores o para móviles del logotipo.

7. Haz clic en Publicar para publicar los cambios en tu portal. Confirma la operación cuando se te solicite.

Personalizar el icono de página

Para personalizar el icono de página que se usa en la barra de direcciones del navegador web (y en otras ubicaciones), sigue estos pasos:

1. Obtén una copia del logotipo de tu empresa que sea adecuada para usarla como icono de página. Consulta la tabla anterior para ver el tamaño recomendado.
2. Accede al editor de temas.

3. Busca el archivo favicon.

   Interfaz de usuario de Cloud Console

   1. En el editor de temas, en Estilos básicos, despliega Opciones de logotipo.
   2. Haz clic en Explorar.
   3. Desplázate hasta el archivo del logotipo y selecciónalo.

   Interfaz clásica

   1. En Estilos básicos, en el panel de la derecha, despliega Opciones de logotipo y haz clic en en el campo Favicon.
   2. Desplázate hasta el archivo del logotipo y selecciónalo.

4. Haz clic en Abrir para subir el archivo.

5. Haz clic en Guardar para previsualizar los cambios en el panel de la izquierda.

6. Haz clic en Publicar para publicar los cambios en tu portal. Confirma la operación cuando se te solicite.

Personalizar el logotipo de la página de inicio de sesión

Personaliza el logotipo de la página de inicio de sesión al configurar la experiencia de registro e inicio de sesión de tu programa de desarrolladores, tal como se describe en el artículo Gestionar la información de la empresa.

Personalizar la barra de herramientas de navegación

A continuación, te ofrecemos algunos consejos rápidos para personalizar la barra de herramientas de navegación:

• Personaliza el color de la barra de herramientas de navegación del encabezado y del pie de página cambiando el color principal, tal como se describe en Personalizar la paleta de colores.
• Para personalizar el tamaño y el estilo de la fuente de los elementos de menú de la barra de navegación del encabezado y del pie de página, cambia el estilo Fuente y Botones, tal como se describe en el artículo Personalizar el conjunto de fuentes y los estilos.
• Para personalizar la altura de la barra de herramientas de navegación del encabezado, accede al editor de temas avanzado e incluye la siguiente variable con el valor ajustado en la sección Variables: $layout-header-height: 64px;
• Para personalizar la altura de la barra de herramientas de navegación del pie de página, acceda al editor de temas avanzado e incluya la siguiente variable con el valor ajustado en la sección Variables: $layout-footer-height: 44px;
• Personaliza el logotipo de la barra de herramientas de navegación para que se muestre en ordenadores y móviles.

Personalizar la imagen de fondo

Para personalizar la imagen de fondo de la página principal, realiza una de las siguientes acciones:

• Sube tu propia versión de la imagen home-background.jpg al gestor de recursos con el mismo nombre y tamaño de archivo relativo (3000x1996 píxeles). Para obtener más información, consulta Gestionar tus recursos.

• Para modificar el nombre de archivo de la imagen de fondo y su relleno, accede al editor de temas avanzado e incluye el siguiente código SCSS con los valores ajustados en la sección Estilos personalizados:

  #index {
    &.main {
      .main-content {
        padding: 0;
        background-image: url('/files/home-background.jpg');
        background-size: cover;
      }
    }
  }
  

• Para añadir una imagen de fondo a todas las páginas del portal, acceda al editor de temas avanzado e incluya el siguiente código SCSS con el valor ajustado en la sección Estilos personalizados:

   body {
      background-image: url('/files/background-image.jpg');
   }
  
  

Personalizar la tipografía

Para personalizar la tipografía, accede al editor de temas avanzado y ajusta los valores de una o varias de las siguientes variables de tipografía en la sección Variables:

• $typography-main
• $typography-header
• $typography-footer
• $typography-context-bar

Por ejemplo:

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

A continuación, puede aplicar la tipografía a un selector de CSS específico, como se muestra en el siguiente ejemplo:

@include mat-base-typography($custom-typography-config, '.css-selector');

También puedes aplicar un nivel de tipografía específico definido en la tipografía personalizada a un selector de CSS, como se muestra en el siguiente ejemplo:

.css-selector {
  @include mat-typography-level-to-styles($custom-typography-config, display-3);
}

Personalizar el tema con el editor de temas avanzado

Para personalizar el tema, anula las variables del tema o personaliza los elementos de estilo del tema directamente en el editor de temas avanzado.

Nota: Las personalizaciones de estilo que se aplican pueden verse afectadas por las reglas de especificidad de CSS, tal como se describe en el artículo Información sobre las reglas de especificidad de CSS.

Anular variables de tema

Anula las variables del tema en la sección Variables del editor de temas avanzado. Para ver una lista de las variables de tema, consulta la referencia de las variables de tema.

Por ejemplo, para personalizar la altura de las barras de herramientas de navegación del encabezado y del pie de página, incluya las siguientes variables, respectivamente, con los valores ajustados en la sección Variables del editor de temas avanzado:

Para ver más ejemplos, consulta los siguientes artículos:

• Personalizar la paleta de colores anulando las variables del tema
• Personalizar la familia y los estilos de fuente anulando las variables del tema

Para anular las variables de tema:

1. Accede al editor de temas.
2. Haz clic en Avanzado.
3. Haz clic en Variables.
4. Añade las anulaciones de variables. Para ver una lista de las variables que se pueden anular, consulta la referencia de las variables de tema.
5. Haz clic en Guardar para guardar los cambios.
6. Haz clic en x para cerrar el editor de temas avanzado.
7. Haz clic en Vista previa para ver los cambios del portal en un navegador.
8. Haz clic en Publicar para publicar tu tema. Se te pedirá que confirmes la actualización.

Personalizar elementos de estilo del tema

Personaliza los elementos de estilo del tema directamente en la sección Estilos personalizados del editor de temas avanzado.

Por ejemplo, para cambiar el color del botón Crear de la página Nueva aplicación que aparece al registrar aplicaciones en el portal, incluye el siguiente elemento de estilo del tema con un valor ajustado:

.main .main-content button.app-save {
  color: blue;
}

Consulta también Personalizar la imagen de fondo.

Notas:

• Se admiten todos los elementos de estilo SCSS.
• Cuando personalices el tema, ten en cuenta que las futuras actualizaciones del tema base podrían provocar resultados inesperados.

Para personalizar los elementos de estilo del tema, sigue estos pasos:

1. Accede al editor de temas.
2. Haz clic en Avanzado.
3. Haz clic en Estilos personalizados.
4. Añade los elementos de estilo de tu tema.
5. Haz clic en Guardar para guardar los cambios.
6. Cierra x para cerrar el editor de temas avanzado.
7. Haz clic en Vista previa para ver los cambios del portal en un navegador.
8. Haz clic en Publicar para publicar tu tema. Se te pedirá que confirmes la actualización.

Crear un panel de ancho completo en una página del portal

Para crear un panel de ancho completo en una página del portal, sigue estos pasos:

1. Añade los siguientes elementos de estilo del tema en el editor de temas avanzado, tal como se describe en Personalizar elementos de estilo del tema:

   .full-width__container {
         position: relative;
         left: 50%;
         right: 50%;
         max-width: 100vw;
         margin-left: -50vw;
         margin-right: -50vw;
         background-image: url("/files/your-image.jpg");
         background-size: cover;
         background-position: 50% 50%;
         padding: 0;
        } 
   
       .full-width__centered {
         @include centered-content();
       }
   
       .full-width__content {
         // Add any additional padding here and NOT in .full-width__centered. Adding padding to
         // .full-width__centered will result in a horizontal scroll bar. You can exclude this class
         // and corresponding <div> container if no additional padding control other than the
         // min page padding is needed.
       }

2. Edita el contenido de la página del portal para incluir el siguiente elemento <div>, tal como se describe en Desarrollar el contenido del portal con el editor de páginas:

   <div class="full-width__container">
     <div class="full-width__centered">
       <div class="full-width__content">  <!-- Include this div if you need additional padding -->
         <h2>Full Width Container</h2>
         <p>
           This content will align with the page header and other content outside
           of this full width container
         </p>
       </div>
     </div>
   </div>

Publicar el tema

Nota: Apigee recomienda que previsualices todo el contenido de tu portal antes de publicarlo en el portal activo.

Para publicar en el portal activo las personalizaciones de tema y estilo que hayas añadido, sigue estos pasos:

1. Accede al editor de temas.
2. Haz clic en Publicar.

Para ver el contenido publicado en el portal activo, haz clic en Ver portal en la barra de herramientas de navegación superior.

Entender las reglas de especificidad de CSS

Nota: No se recomienda usar la regla !important en una declaración de elemento de estilo para anular otras declaraciones, ya que se considera una práctica inadecuada. La regla !important afecta a las reglas de cascada y especificidad de CSS, y puede dificultar la depuración de las declaraciones de elementos de estilo.

La especificidad de CSS describe el método que usa un navegador para determinar la precedencia de las declaraciones de elementos de estilo CSS cuando surgen conflictos. La especificidad de CSS se calcula asignando un peso a una declaración de elemento de estilo de CSS específica en función de su tipo de selector. Cuanto más específico sea el selector de CSS, mayor será el peso. Por ejemplo, un atributo de ID tendrá una asignación porcentual mayor en el cálculo que un selector de tipo.

Por ejemplo, si defines los siguientes elementos de estilo en tu código CSS, el elemento de párrafo se mostrará en rojo porque la declaración del elemento de estilo p dentro de un elemento div es más específica que la declaración del elemento de estilo p.

div p { color: red }  ← More specific
p { color: blue }

Del mismo modo, si define las siguientes declaraciones de elementos de estilo en su código CSS, el texto incluido en etiquetas <div class="test"></div> se mostrará en azul, ya que la declaración de estilo del atributo id de un elemento div es más específica que la declaración del elemento de estilo div.

div#test { background-color: blue; }  ← More specific
div { background-color: red; }

En el caso de las declaraciones de elementos de estilo con la misma especificidad, tendrá prioridad la última declaración de elemento de estilo definida. Por ejemplo, dado el orden de las siguientes declaraciones de elementos de estilo, el elemento de párrafo se coloreará de azul.

p { color: red }
p { color: blue }  ← Last specified

Referencia de variables de tema

En las siguientes secciones se resumen las variables que se pueden anular en la sección Variables del editor de temas avanzado, tal como se describe en Anular variables de tema.

• Variable de tema base
• Variables de paleta de colores
• Variables de familia y estilo de fuente
• Variables de tipografía

Variable de tema base

Personaliza los colores de primer plano del tema base que se usa en todo el sitio. Los valores válidos son light y dark.

$base-theme: light;

Variables de paleta de colores

Personaliza la paleta de colores modificando las siguientes variables para cambiar los colores principal, secundario, de énfasis y de mensaje de advertencia, respectivamente. Consulta Información sobre las categorías de la paleta de colores.

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-red);

Los valores numéricos indican los valores de sombreado de los elementos predeterminados, más claros y más oscuros, respectivamente. Consulta el contenido del archivo material theming SCSS (material-theming.scss) para identificar las variables de color predefinidas.

Por ejemplo, puedes cambiar la paleta de colores principal a verde de la siguiente manera:

$primary: mat-palette($mat-green, 800, 100, 900);

Para personalizar solo los valores de sombreado del conjunto de colores predeterminado definido en el tema base, incluye el siguiente código con los valores de sombreado ajustados:

$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);

Variables de familia y estilo de fuente

Personaliza el conjunto de fuentes y los estilos.

// If using a custom font, import it by URL.
$typography-main-font-family: 'Roboto, sans-serif';

// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;

// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;

Especifique su propia tipografía personalizada para tener un control más preciso, como se muestra en el siguiente ejemplo:

$typography-context-bar: mat-typography-config(
    $font-family: 'Ubuntu, sans-serif',
    $headline: mat-typography-level(30px, 30px, 500), // Title
    $button: mat-typography-level(19px, 19px, 200) // Action buttons
);

Variables de tipografía

Personaliza la tipografía de Angular Material. Cada nivel de tipografía define un tamaño de fuente, una altura de línea y un grosor de fuente.

$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);

// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
  $font-family: $typography-main-font-family,
  $display-4: $typography-main-display-4,
  $display-3: $typography-main-display-3,
  $display-2: $typography-main-display-2,
  $display-1: $typography-main-display-1,
  $headline: $typography-main-headline,
  $title: $typography-main-title,
  $subheading-2: $typography-main-subheading-2,
  $subheading-1: $typography-main-subheading-1,
  $body-2: $typography-main-body-2,
  $body-1: $typography-main-body-1,
  $caption: $typography-main-caption,
  $button: $typography-main-button,
  $input: $typography-main-input);