Personalizzazione del tema

Questa pagina si applica ad Apigee e Apigee hybrid.

Visualizza la documentazione di Apigee Edge.

Un tema è costituito da un foglio di stile globale che fornisce un aspetto uniforme per tutte le pagine del portale. Lo scopo di un tema è quello di consentirti di modificare l'aspetto di tutte le pagine del portale contemporaneamente.

Puoi personalizzare, visualizzare l'anteprima e pubblicare il tema, come descritto nelle sezioni seguenti.

Esplorare l'editor di temi

Personalizza, visualizza l'anteprima e pubblica il tema per il tuo portale nell'editor di temi.

Per accedere all'editor dei temi:

  1. Apri la pagina Portali.

    UI di Cloud Console

    Nella console Apigee in Cloud, vai alla pagina Distribuzione > Portali.

    Vai a Portali

    UI classica

    Seleziona Pubblica > Portali nella barra di navigazione laterale per visualizzare l'elenco dei portali.

  2. Fai clic sulla riga del portale per cui vuoi modificare il tema.

  3. Apri l'editor.

    UI di Cloud Console

    1. Fai clic su Temi.
    2. Fai clic su Modifica.

    UI classica

    Fai clic su Tema.

L'editor di temi ti consente di:

Informazioni sul tema di base

La maggior parte delle regole di stile del tema di base che definiscono l'aspetto del sito si basa su angular material design. Angular Material Design utilizza layout basati su griglie e componenti e stili coerenti per offrire un'esperienza interattiva unificata.

Le regole di stile sono definite utilizzando Sassy Cascading Style Sheet (SCSS). SCSS è un superset di Cascading Style Sheets (CSS) e offre i seguenti vantaggi:

  • Variabili globali che possono essere riutilizzate in tutto il foglio di stile.
  • Regole nidificate per risparmiare tempo di sviluppo del foglio di stile.
  • Possibilità di creare mixin e funzioni

Ad esempio:

// 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 viene compilato e convertito in CSS normale prima che i contenuti vengano visualizzati nella pagina web.

Il tema di base utilizza un foglio di stile di Angular Material, il file SCSS per la definizione dei temi di Material (material-theming.scss). Questo foglio di stile dichiara variabili, funzioni e mixin che possono essere sostituiti utilizzando variabili personalizzate e sezioni SCSS, come descritto in Personalizzare il tema utilizzando l'editor di temi avanzato.

In base alle selezioni del tema dell'interfaccia utente, vengono dichiarate diverse variabili SCSS che definiscono gli stili di tipografia, colore e layout e vengono utilizzate dal foglio di stile di base. Puoi ignorare le variabili elencate nel riferimento alle variabili del tema.

Personalizzare la tavolozza dei colori

Personalizza la tavolozza dei colori utilizzando l'editor di stili di base o ignorando le variabili del tema.

Informazioni sulle categorie della tavolozza dei colori

Le definizioni della tavolozza dei colori per il portale integrato sono raggruppate nelle seguenti categorie, che sono definite utilizzando lo stile dei colori di Material Design nel tema di base.

Category Stili
Principale Barre degli strumenti di navigazione, intestazioni, intestazioni delle schede e pulsanti
Secondario Testo <pre> e <code>
Accento Navigazione, link e pulsanti in evidenza
Avviso Avvisi ed errori

Personalizzare la tavolozza dei colori utilizzando l'editor di stili di base

Personalizza rapidamente le tavolozze dei colori principale e intenso utilizzando l'editor di stili di base.

Per personalizzare la tavolozza dei colori utilizzando l'editor di stili di base:

  1. Accedi all'editor dei temi.

  2. Specifica i colori principali e di contrasto.

    UI di Cloud Console

    1. Per personalizzare il colore principale, nel menu a discesa Colore principale, seleziona un colore o inserisci un valore esadecimale personalizzato nel campo di testo.
    2. Per personalizzare il colore intenso, nel menu a discesa Colore intenso, seleziona un colore o inserisci un valore esadecimale personalizzato nel campo di testo.
    3. Fai clic su Salva per salvare le modifiche.
    4. Fai clic su Anteprima per visualizzare l'anteprima delle modifiche al portale in un browser.

    UI classica

    1. Per personalizzare il colore principale, seleziona un colore dal menu a discesa Colore principale o fai clic su Personalizzato e inserisci un valore esadecimale personalizzato nella casella di testo.
    2. Per personalizzare il colore accento, seleziona un colore nel menu a discesa Colore accento o fai clic su Personalizzato e inserisci un valore esadecimale personalizzato nella casella di testo.
    3. Fai clic su Salva per salvare le modifiche.
    4. Visualizza le modifiche nel riquadro di anteprima o fai clic su Anteprima per visualizzare l'anteprima delle modifiche al portale in un browser. Nota: puoi fare clic sulla navigazione del portale nel riquadro di anteprima per visualizzare le modifiche in tutte le pagine.

  3. Fai clic su Pubblica per pubblicare il tema. Ti verrà chiesto di confermare l'aggiornamento.

Personalizzazione della tavolozza dei colori mediante l'override delle variabili del tema

Per personalizzare la tavolozza dei colori sostituendo le variabili del tema, accedi all'editor di temi avanzato e includi una o più delle seguenti variabili con valori modificati nella sezione Variabili per modificare rispettivamente i colori primario, secondario, accento o del messaggio di avviso. Consulta Informazioni sulle categorie della tavolozza dei colori.

$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);

Visualizza i contenuti del file SCSS per i temi Material importato (material-theming.scss) per identificare le variabili di colore predefinite (ad esempio $mat-grey). I valori numerici indicano i valori di ombreggiatura per gli elementi predefiniti, più chiari e più scuri, rispettivamente.

In alternativa, puoi creare una variabile di colore personalizzata. Ad esempio:

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

Poi, utilizzalo per modificare la tavolozza dei colori, come mostrato nell'esempio seguente:

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

Personalizzare la famiglia di caratteri e gli stili

Personalizza la famiglia di caratteri e gli stili utilizzando l'editor di stili di base o ignorando le variabili del tema. Puoi anche importare un carattere personalizzato.

Personalizzare la famiglia di caratteri e gli stili utilizzando l'editor di stili di base

Per personalizzare la famiglia di caratteri e gli stili utilizzando l'editor di stili di base:

  1. Accedi all'editor dei temi.
  2. Per cambiare la famiglia di caratteri, seleziona un valore nel menu a discesa Carattere.
  3. Per modificare gli stili dei caratteri, espandi la sezione Stili dei caratteri e modifica gli stili in base alle esigenze, inclusi le dimensioni del carattere, l'altezza della linea e lo spessore del carattere per gli elementi HTML desiderati.
  4. Fai clic su Salva per salvare le modifiche.
  5. Fai clic su Anteprima per visualizzare l'anteprima delle modifiche al portale in un browser.
  6. Fai clic su Pubblica per pubblicare il tema. Ti verrà chiesto di confermare l'aggiornamento.

Personalizzare la famiglia di caratteri e gli stili sostituendo le variabili del tema

Per personalizzare la famiglia di caratteri e gli stili sostituendo le variabili del tema, accedi all'editor di temi avanzato e includi una o più variabili di famiglia di caratteri e stile con valori modificati nella sezione Variabili.

Ad esempio, per impostare il carattere predefinito su Arial, definisci la seguente variabile:

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

Importare un carattere personalizzato

Importa un carattere Google (non incluso nel set di caratteri predefiniti) o un carattere personalizzato, quindi fai riferimento al carattere personalizzato nel foglio di stile, come descritto di seguito.

Importare un carattere Google

Per importare un carattere Google, accedi all'editor di temi avanzato e importa il carattere nella sezione Stili personalizzati, come mostrato di seguito:

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

Importare un carattere personalizzato

Importa il tuo carattere personalizzato utilizzando la regola CSS @font-face. La regola @font-face supporta diversi tipi di formati di file, tra cui TrueType (TTF), Web Open Font Format (WOFF) e altri.

Per importare un carattere personalizzato:

  1. (Facoltativo) Carica il file del carattere nel gestore degli asset, come descritto in Caricare un file.

  2. Accedi all'editor di temi avanzato e aggiungi la regola @font-face alla sezione Stili personalizzati, dove font-family specifica il nome del carattere, url specifica la posizione del file del carattere (in questo caso, il gestore degli asset), MyCustomFont.tff è il nome del file del carattere personalizzato e format specifica il formato del carattere.

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

Fare riferimento al carattere personalizzato nel foglio di stile

Fai riferimento al carattere personalizzato in una delle variabili famiglia e stile del carattere nella sezione Variabili. Ad esempio:

$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
);

Puoi personalizzare i loghi utilizzati nel portale nelle seguenti posizioni:

Posizione del logo Dimensioni predefinite del file
Barra degli strumenti di navigazione del desktop 196 x 32 pixel
Barra di navigazione mobile156 x 32 pixel
Favicon nella barra degli indirizzi del browser (e in altre posizioni)32 x 32 pixel
Pagina di accesso392 x 64 pixel

Personalizza il logo nella barra di navigazione per la visualizzazione su computer e dispositivi mobili. A seconda della larghezza del browser, potresti visualizzare la versione desktop o mobile del logo.

Non puoi eliminare il logo principale, puoi solo sostituirlo. Se non specifichi un logo per la visualizzazione sui dispositivi mobili, viene utilizzato il logo principale per impostazione predefinita.

Per personalizzare il logo utilizzato nella barra di navigazione per la visualizzazione su computer e dispositivi mobili:

  1. Ottieni una o più copie del logo della tua azienda adatte all'uso. Per le dimensioni consigliate, consulta la tabella precedente.
  2. Accedi all'editor dei temi.

  3. Carica il logo principale.

    UI di Cloud Console

    1. Nell'editor dei temi, in Stili di base, Logo principale, fai clic su Sfoglia.
    2. Individua e seleziona il file del logo.
    3. Fai clic su Apri.

    UI classica

    Nell'editor di temi, per sostituire il logo nella barra di navigazione in alto nelle visualizzazioni desktop:

    1. In Stili di base nel riquadro a destra, fai clic su Icona Carica Carica nel campo Logo principale.
    2. Cerca la versione desktop del logo nella directory locale.
    3. Fai clic su Apri per caricare il file.

  4. Carica il logo mobile.

    UI di Cloud Console

    1. Nell'editor dei temi, espandi Opzioni logo nella sezione Stili di base.
    2. In Logo mobile, fai clic su Sfoglia.
    3. Individua e seleziona il file del logo mobile.
    4. Fai clic su Apri.

    UI classica

    Per sostituire il logo nella barra di navigazione in alto sulle visualizzazioni mobile:

    1. In Stili di base nel riquadro a destra, espandi Opzioni logo e fai clic su Icona Carica Carica nel campo Logo mobile.
    2. Cerca la versione mobile del logo nella directory locale.
    3. Fai clic su Apri per caricare il file.

  5. Fai clic su Salva.

  6. Fai clic su Anteprima per visualizzare l'anteprima delle modifiche al portale in un browser. A seconda della larghezza del browser, potresti visualizzare la versione desktop o mobile del logo.

  7. Fai clic su Pubblica per pubblicare le modifiche apportate al portale. Conferma l'operazione quando richiesto.

Personalizzare la favicon

Per personalizzare la favicon utilizzata nella barra degli indirizzi del browser web (e in altre posizioni):

  1. Ottieni una copia del logo della tua azienda adatta all'utilizzo come favicon. Per le dimensioni consigliate, consulta la tabella precedente.
  2. Accedi all'editor dei temi.

  3. Individua il file della favicon.

    UI di Cloud Console

    1. Nell'editor dei temi, espandi Opzioni logo nella sezione Stili di base.
    2. Fai clic su Sfoglia
    3. Individua e seleziona il file del logo.

    UI classica

    1. In Stili di base nel riquadro a destra, espandi Opzioni logo e fai clic su sotto il campo Favicon.
    2. Individua e seleziona il file del logo.

  4. Fai clic su Apri per caricare il file.

  5. Fai clic su Salva per visualizzare l'anteprima delle modifiche nel riquadro a sinistra.

  6. Fai clic su Pubblica per pubblicare le modifiche apportate al portale. Conferma l'operazione quando richiesto.

Personalizza il logo nella pagina di accesso durante la configurazione dell'esperienza di registrazione e accesso per il tuo programma per sviluppatori, come descritto in Gestire le informazioni sull'azienda.

Di seguito sono riportati alcuni suggerimenti rapidi per personalizzare la barra di navigazione:

Personalizzare l'immagine di sfondo

Personalizza l'immagine di sfondo nella home page eseguendo una delle seguenti operazioni:

  • Carica la tua versione dell'immagine home-background.jpg nel gestore asset utilizzando lo stesso nome e le stesse dimensioni relative del file (3000 pixel x 1996 pixel). Per saperne di più, consulta Gestire le risorse.

  • Modifica il nome file dell'immagine di sfondo e il relativo padding accedendo all'editor di temi avanzato e includendo il seguente SCSS con valori modificati nella sezione Stili personalizzati:

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

  • Aggiungi un'immagine di sfondo a tutte le pagine del portale accedendo all'editor di temi avanzato e includendo il seguente SCSS con il valore modificato nella sezione Stili personalizzati:

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

Personalizzare la tipografia

Personalizza la tipografia accedendo all'editor di temi avanzato e modificando i valori di una o più delle seguenti variabili tipografiche nella sezione Variabili:

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

Ad esempio:

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

Dopodiché, puoi applicare la tipografia a un selettore CSS specifico, come mostrato nell'esempio seguente:

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

In alternativa, puoi applicare un livello di tipografia specifico definito nella tipografia personalizzata a un selettore CSS, come mostrato nell'esempio seguente:

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

Personalizzare il tema utilizzando l'editor di temi avanzato

Personalizza il tema sovrascrivendo le variabili del tema o personalizzando gli elementi di stile del tema direttamente nell'editor avanzato dei temi.

Override delle variabili del tema

Esegui l'override delle variabili del tema nella sezione Variabili dell'editor avanzato dei temi. Per un elenco delle variabili dei temi, consulta Riferimento alle variabili dei temi.

Ad esempio, per personalizzare l'altezza delle barre degli strumenti di navigazione dell'intestazione e del piè di pagina, includi le seguenti variabili, rispettivamente, con valori modificati nella sezione Variabili dell'editor di temi avanzato:

Per altri esempi, vedi:

Per ignorare le variabili del tema:

  1. Accedi all'editor dei temi.
  2. Fai clic su Avanzate.
  3. Fai clic su Variabili.
  4. Aggiungi gli override delle variabili. Per un elenco delle variabili che possono essere sostituite, consulta Riferimento alle variabili dei temi.
  5. Fai clic su Salva per salvare le modifiche.
  6. Fai clic su x per chiudere l'editor di temi avanzato.
  7. Fai clic su Anteprima per visualizzare l'anteprima delle modifiche al portale in un browser.
  8. Fai clic su Pubblica per pubblicare il tema. Ti verrà chiesto di confermare l'aggiornamento.

Personalizzazione degli elementi di stile del tema

Personalizza gli elementi di stile del tema direttamente nella sezione Stili personalizzati dell'editor di temi avanzato.

Ad esempio, per modificare il colore del pulsante Crea nella pagina Nuova app visualizzato durante la registrazione delle app nel portale, includi il seguente elemento di stile del tema con un valore modificato:

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

Vedi anche Personalizzare l'immagine di sfondo.

Per personalizzare gli elementi di stile del tema:

  1. Accedi all'editor dei temi.
  2. Fai clic su Avanzate.
  3. Fai clic su Stili personalizzati.
  4. Aggiungi gli elementi di stile del tema.
  5. Fai clic su Salva per salvare le modifiche.
  6. Chiudi x per chiudere l'editor avanzato dei temi.
  7. Fai clic su Anteprima per visualizzare l'anteprima delle modifiche al portale in un browser.
  8. Fai clic su Pubblica per pubblicare il tema. Ti verrà chiesto di confermare l'aggiornamento.

Creazione di un pannello a larghezza intera in una pagina del portale

Per creare un pannello a larghezza intera in una pagina del portale:

  1. Aggiungi i seguenti elementi di stile del tema nell'editor di temi avanzato, come descritto in Personalizzare gli elementi di stile 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. Modifica i contenuti della pagina del portale in modo da includere il seguente elemento <div>, come descritto in Sviluppare i contenuti del portale utilizzando l'editor di pagine: 
    <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>

Pubblicazione del tema

Per pubblicare nel portale online le personalizzazioni del tema e dello stile che hai aggiunto:

  1. Accedi all'editor dei temi.
  2. Fai clic su Pubblica.

Per visualizzare i contenuti pubblicati nel portale online, fai clic su Visualizza portale nella barra degli strumenti di navigazione in alto.

Informazioni sulle regole di specificità CSS

La specificità CSS descrive il metodo utilizzato da un browser per determinare la precedenza delle dichiarazioni degli elementi di stile CSS in caso di conflitti. La specificità CSS viene calcolata applicando un peso a una dichiarazione di elemento di stile CSS specifico in base al tipo di selettore. Più specifico è il selettore CSS, maggiore è il peso. Ad esempio, a un attributo ID verrà assegnata una ponderazione maggiore nel calcolo rispetto a un selettore di tipo.

Ad esempio, se definisci i seguenti elementi di stile nel codice CSS, l'elemento paragrafo verrà colorato di rosso perché la dichiarazione dell'elemento di stile p all'interno di un elemento div è più specifica della dichiarazione dell'elemento di stile p.

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

Allo stesso modo, se definisci le seguenti dichiarazioni di elementi di stile nel codice CSS, qualsiasi testo racchiuso nei tag <div class="test"></div> verrà colorato di blu perché la dichiarazione di stile dell'attributo id all'interno di un elemento div è più specifica della dichiarazione di elemento di stile div.

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

Per le dichiarazioni di elementi di stile con la stessa specificità, ha la precedenza l'ultima dichiarazione di elementi di stile definita. Ad esempio, dato l'ordine delle seguenti dichiarazioni di elementi di stile, l'elemento paragrafo sarà colorato di blu.

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

Riferimento alle variabili del tema

Le sezioni seguenti riepilogano le variabili che possono essere sostituite nella sezione Variabili dell'editor avanzato dei temi, come descritto in Sostituire le variabili del tema.

Variabile del tema di base

Personalizza i colori di primo piano del tema di base utilizzato in tutto il sito. I valori validi sono light e dark.

$base-theme: light;

Variabili della tavolozza dei colori

Personalizza la tavolozza dei colori modificando le seguenti variabili per cambiare rispettivamente i colori primario, secondario, accento e del messaggio di avviso. Consulta Informazioni sulle categorie della tavolozza dei colori.

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

I valori numerici indicano i valori di ombreggiatura per gli elementi predefiniti, più chiari e più scuri, rispettivamente. Visualizza i contenuti del file SCSS per i temi Material (material-theming.scss) per identificare le variabili di colore predefinite.

Ad esempio, puoi cambiare la tavolozza dei colori principale in verde, come segue:

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

Per personalizzare solo i valori di ombreggiatura per il set di colori predefinito definito nel tema di base, includi il seguente codice con i valori di ombreggiatura modificati:

$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);

Variabili di stile e famiglia di caratteri

Personalizza la famiglia di caratteri e gli stili.

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

Specifica la tua tipografia personalizzata per un controllo più granulare, come mostrato nell'esempio seguente:

$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
);

Variabili tipografiche

Personalizza la tipografia dei materiali di Angular. Ogni livello di tipografia definisce una dimensione del carattere, un'altezza della linea e uno spessore del carattere.

$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);