Dostosuj motyw

Przeglądasz dokumentację Apigee Edge.
Otwórz dokumentację Apigee X. Informacje

Motyw składa się z globalnego arkusza stylów, który zapewnia jednolity wygląd wszystkich stron w portalu. Motywem jest możliwość zmiany wyglądu i stylu wszystkich stron portalu jednocześnie.

Możesz dostosować i opublikować motyw, a także zobaczyć jego podgląd zgodnie z opisem w sekcjach poniżej.

Poznaj edytor motywów

Dostosuj, wyświetl podgląd i opublikuj motyw portalu w edytorze motywów.

Aby uzyskać dostęp do edytora motywów:

  • Na bocznym pasku nawigacyjnym kliknij Opublikuj > Portale, wybierz swój portal i na stronie docelowej kliknij Motywy.
  • Podczas edytowania portalu kliknij Motywy w menu na górnym pasku nawigacyjnym.

Edytor motywów

Jak już wspomnieliśmy na poprzedniej ilustracji, edytor motywów umożliwia:

Informacje o motywie podstawowym

Większość reguł dotyczących stylu motywu podstawowego definiujących wygląd witryny opiera się na angular Material Design. Angular Material Design korzysta z układów opartych na siatce oraz spójnych komponentów i stylów, aby zapewnić jednolite wrażenia interaktywne.

Reguły stylu definiuje się za pomocą kaskadowego arkusza stylów (Sassy Cascading Style Sheet). SCSS jest zbiorem kaskadowych arkuszy stylów (Cascading Style Arkuszy), które oferują następujące korzyści:

  • Zmienne globalne, których można używać w całym arkuszu stylów.
  • Zagnieżdżone reguły pozwalające skrócić czas potrzebny na opracowanie arkusza stylów.
  • Możliwość tworzenia składanek i funkcji

Na przykład:

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

Przed wyrenderowaniem treści na stronie internetowej kod SCSS jest kompilowany i konwertowany na zwykły kod CSS.

Motyw podstawowy to arkusz stylów materiałów SCSS (material-theming.scss). Ten arkusz stylów deklaruje zmienne, funkcje i miksy, które można zastąpić za pomocą zmiennych niestandardowych i sekcji SCSS zgodnie z opisem w artykule Dostosowywanie motywu przy użyciu zaawansowanego edytora motywów.

Na podstawie wybranych przez Ciebie motywów interfejsu deklaruje się pewną liczbę zmiennych SCSS definiujących style typografii, koloru i układu, które są wykorzystywane w podstawowym arkuszu stylów. Zmienne wymienione w dokumentacji zmiennych motywu możesz zastępować.

Dostosuj paletę kolorów

Dostosuj paletę kolorów za pomocą edytora stylów podstawowych lub zastąp zmienne motywu.

Informacje o kategoriach palety kolorów

Definicje palety kolorów dla zintegrowanego portalu są pogrupowane według poniższych kategorii zdefiniowanych za pomocą stylów kolorów Material Design w motywie podstawowym.

Kategoria Style
Główna paski narzędzi nawigacyjnych, nagłówki, nagłówki kart i przyciski;
Dodatkowa <pre> i <code> tekst
Akcent Nawigacja, linki i przyciski ze znakami diakrytycznymi
Ostrzeżenie Ostrzeżenia i błędy

Dostosuj paletę kolorów za pomocą podstawowego edytora stylów

Szybko dostosuj palety kolorów głównej i akcentowej, korzystając z edytora podstawowych stylów.

Aby dostosować paletę kolorów za pomocą edytora podstawowych stylów:

  1. Otwórz edytor motywów.
  2. Aby dostosować kolor podstawowy, wybierz go z menu Kolor podstawowy lub kliknij Niestandardowy i wpisz w polu tekstowym niestandardową szesnastkową wartość koloru.
  3. Aby dostosować kolor uzupełniający, z menu Kolor uzupełniający wybierz kolor lub kliknij Niestandardowy i wpisz w polu tekstowym niestandardową wartość szesnastkową koloru.
  4. Kliknij Zapisz, aby zapisać zmiany.
  5. Wyświetl zmiany w panelu podglądu lub kliknij Podgląd, aby wyświetlić podgląd zmian w portalu w przeglądarce.
    Uwaga: możesz poruszać się po portalu w panelu podglądu, aby wyświetlić zmiany na wszystkich stronach.
  6. Aby opublikować motyw, kliknij Opublikuj. Pojawi się prośba o potwierdzenie aktualizacji.

Dostosuj paletę kolorów, zastępując zmienne motywu

Aby dostosować paletę kolorów przez zastąpienie zmiennych motywu, przejdź do zaawansowanego edytora motywów i w sekcji Zmienne dodaj co najmniej jedną z tych zmiennych z dostosowanymi wartościami, aby zmienić kolor komunikatu głównego, dodatkowego, uzupełniającego lub ostrzegawczego. Patrz Informacje o kategoriach palety kolorów.

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

Wyświetl zawartość zaimportowanego pliku SCSS zgodnego z materiałami (material-theming.scss), aby zidentyfikować wstępnie zdefiniowane zmienne kolorów (np. $mat-grey). Wartości liczbowe wskazują wartości cieniowania elementów domyślnych, jaśniejszych i ciemniejszych.

Możesz też utworzyć własną zmienną koloru. Na przykład:

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

Następnie użyj go do zmiany palety kolorów, tak jak w poniższym przykładzie:

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

Dostosuj rodzinę czcionek i style

Dostosuj rodzinę czcionek i style za pomocą edytora stylów podstawowych lub zastąp zmienne motywu. Możesz też zaimportować czcionkę niestandardową.

Dostosuj rodzinę czcionek i style za pomocą edytora podstawowych stylów

Aby szybko dostosować rodzinę czcionek i style, użyj podstawowego edytora stylów, jak pokazano na ilustracji poniżej.

Aby dostosować rodzinę czcionek i style za pomocą podstawowego edytora stylów:

  1. Otwórz edytor motywów.
  2. Aby zmienić rodzinę czcionek, wybierz wartość w menu Czcionka.
  3. Aby zmienić style czcionki, rozwiń sekcję Style czcionek i wprowadź odpowiednie zmiany, w tym rozmiar czcionki, wysokość wiersza i grubość czcionki w przypadku wybranych elementów HTML.
  4. Kliknij Zapisz, aby zapisać zmiany.
  5. Wyświetl zmiany w panelu podglądu lub kliknij Podgląd, aby wyświetlić podgląd zmian w portalu w przeglądarce.
    Uwaga: możesz poruszać się po portalu w panelu podglądu, aby wyświetlić zmiany na wszystkich stronach.
  6. Aby opublikować motyw, kliknij Opublikuj. Pojawi się prośba o potwierdzenie aktualizacji.

Dostosuj rodzinę czcionek i style, zastępując zmienne motywu

Aby dostosować rodzinę i style czcionek przez zastąpienie zmiennych motywu, otwórz zaawansowany edytor motywów i w sekcji Zmienne dodaj co najmniej 1 zmienną rodziny i stylu z dostosowanymi wartościami.

Aby na przykład zmienić domyślną czcionkę na {6/}, zdefiniuj taką zmienną:

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

Importuj czcionkę niestandardową

Zaimportuj czcionkę Google (nienależącą do zestawu czcionek domyślnych) lub własną czcionkę niestandardową, a potem odwołaj się do niej w arkuszu stylów zgodnie z opisem poniżej.

Importuj czcionkę Google

Aby zaimportować czcionkę Google, przejdź do zaawansowanego edytora motywów i zaimportuj ją w sekcji Style niestandardowe, jak pokazano poniżej:

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

Importuj czcionkę niestandardową

Zaimportuj własną czcionkę za pomocą reguły CSS @font-face. Reguła @font-face obsługuje wiele różnych formatów plików, w tym TrueType (TTF), Web Open Font Format (WOFF) i inne.

Aby zaimportować własną czcionkę niestandardową:

  1. Opcjonalnie prześlij plik czcionki do menedżera zasobów zgodnie z opisem w sekcji Przesyłanie pliku.

  2. Otwórz zaawansowany edytor motywów i dodaj regułę @font-face do sekcji Style niestandardowe, gdzie font-family określa nazwę czcionki, url określa lokalizację pliku czcionki (w tym przypadku jest to menedżer zasobów), MyCustomFont.tff to nazwa pliku czcionek niestandardowych, a format określa format czcionki.

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

Utwórz odniesienie do czcionki niestandardowej w arkuszu stylów

Utwórz odwołanie do czcionki niestandardowej w jednej ze zmiennych rodzin i stylu czcionek w sekcji Zmienne. Na przykład:

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

Logo używane w portalu możesz dostosować w tych miejscach:

Lokalizacja logo Domyślny rozmiar pliku
Nawigacyjny pasek narzędzi na komputerze 196 x 32 piksele
Nawigacyjny pasek narzędzi na urządzenia mobilne156 x 32 piksele
Favicon na pasku adresu przeglądarki (i inne lokalizacje)32 x 32 piksele
Strona logowania392 x 64 piksele

Skrócenie logo z paska narzędzi nawigacyjnych do wyświetlania na komputerach i urządzeniach mobilnych. W zależności od szerokości przeglądarki możesz zobaczyć logo w wersji na komputery lub urządzenia mobilne.

Nie możesz usunąć podstawowego logo – możesz je tylko zastąpić. Jeśli nie określisz logo do wyświetlania na urządzeniach mobilnych, domyślnie zostanie użyte logo główne.

Aby dostosować logo na pasku nawigacyjnym na komputery i urządzenia mobilne:

  1. Uzyskaj jedną lub więcej kopii logo swojej firmy, które będzie odpowiednie do wykorzystania.
    Sprawdź zalecane rozmiary w poprzedniej tabeli.
  2. Otwórz edytor motywów.
  3. Aby zastąpić logo na górnym pasku nawigacyjnym na komputerach:
    a. W sekcji Style podstawowe w prawym panelu kliknij w polu Logo podstawowe.
    b. Odszukaj wersję logo na komputery w katalogu lokalnym.
    c. Kliknij Otwórz, aby przesłać plik.
  4. Aby zastąpić logo na górnym pasku nawigacyjnym na urządzeniach mobilnych:
    a. W sekcji Style podstawowe w prawym panelu rozwiń Opcje logo i kliknij w polu Logo na urządzeniu mobilnym.
    b. Znajdź mobilną wersję swojego logo w katalogu lokalnym.
    c. Kliknij Otwórz, aby przesłać plik.
  5. Kliknij Zapisz, aby wyświetlić podgląd zmian w panelu po lewej stronie.
  6. Kliknij Publish (Opublikuj), aby opublikować zmiany w portalu. Potwierdź operację, gdy pojawi się taka prośba.

Dostosuj favikonę

Aby dostosować favikonę używaną na pasku adresu przeglądarki (i w innych lokalizacjach):

  1. Uzyskaj kopię logo swojej firmy, które nadaje się do wykorzystania jako favikona.
    Sprawdź zalecany rozmiar w poprzedniej tabeli.
  2. Otwórz edytor motywów.
  3. W sekcji Style podstawowe w prawym panelu rozwiń Opcje logo i kliknij w polu Favicon.
  4. Wyszukaj wersję favikony logo w katalogu lokalnym.
  5. Kliknij Otwórz, aby przesłać plik.
  6. Kliknij Zapisz, aby wyświetlić podgląd zmian w panelu po lewej stronie.
  7. Kliknij Publish (Opublikuj), aby opublikować zmiany w portalu. Potwierdź operację, gdy pojawi się taka prośba.

Dostosuj logo na stronie logowania podczas konfigurowania procesu rejestracji i logowania w programie dla deweloperów zgodnie z opisem w artykule Zarządzanie informacjami o firmie.

Poniżej znajdziesz kilka wskazówek dotyczących dostosowywania paska nawigacyjnego:

Dostosowywanie obrazu tła

Dostosuj obraz tła na stronie głównej, wykonując jedną z tych czynności:

  • Prześlij do menedżera zasobów własną wersję obrazu home-background.jpg, używając tej samej nazwy i względnego rozmiaru pliku (3000 x 1996 pikseli). Więcej informacji znajdziesz w artykule Zarządzanie komponentami.

  • Zmień nazwę pliku obrazu tła i jego dopełnienie. Aby to zrobić, otwórz zaawansowany edytor motywów i dodaj ten kod SCSS ze zmienionymi wartościami w sekcji Style niestandardowe: 

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

  • Dodaj obraz tła do wszystkich stron w portalu. W tym celu otwórz zaawansowany edytor motywów i w sekcji Style niestandardowe dodaj ten SCSS z dostosowaną wartością: 

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

dostosowywać typografię,

Dostosuj typografię, uzyskując dostęp do zaawansowanego edytora motywów i dostosowując wartości co najmniej jednej z tych zmiennych typograficznych w sekcji Zmienne:

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

Na przykład:

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

Następnie możesz zastosować typografię do określonego selektora arkusza CSS, jak pokazano w tym przykładzie:

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

Możesz też zastosować do selektora arkusza CSS określony poziom typografii zdefiniowany w niestandardowej typografii:

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

Dostosowywanie motywu za pomocą zaawansowanego edytora motywów

Dostosuj motyw, zastępując zmienne motywu lub dostosowując elementy stylu motywu bezpośrednio w zaawansowanym edytorze motywów.

Zastąp zmienne motywu

Zmienne motywu możesz zastąpić w sekcji Zmienne w zaawansowanym edytorze motywów. Listę zmiennych motywu znajdziesz w artykule Informacje o zmiennych motywu.

Aby na przykład dostosować wysokość paska narzędzi nawigacyjnych nagłówka i stopki, w sekcji Zmienne w zaawansowanym edytorze motywów dołącz te zmienne:

Dodatkowe przykłady znajdziesz w tych artykułach:

Aby zastąpić zmienne motywu:

  1. Otwórz edytor motywów.
  2. W panelu po prawej stronie kliknij Zaawansowane.
  3. Kliknij Zmienne.
  4. Dodaj zastąpienia zmiennych.
    Listę zmiennych, które można zastąpić, znajdziesz w artykule Informacje o zmiennych motywu.
  5. Kliknij Zapisz, aby zapisać zmiany.
  6. Kliknij x, aby zamknąć zaawansowany edytor motywów.
  7. Wyświetl zmiany w panelu podglądu lub kliknij Podgląd, aby wyświetlić podgląd zmian w portalu w przeglądarce. Uwaga: możesz poruszać się po portalu w panelu podglądu, aby zobaczyć zmiany na wszystkich stronach.
  8. Aby opublikować motyw, kliknij Opublikuj. Pojawi się prośba o potwierdzenie aktualizacji.

Dostosuj elementy stylu motywu

Elementy stylu motywu możesz dostosowywać bezpośrednio w sekcji Style niestandardowe w zaawansowanym edytorze motywów.

Aby na przykład zmienić kolor przycisku Utwórz na stronie Nowa aplikacja wyświetlanego podczas rejestrowania aplikacji w portalu, dodaj ten element stylu motywu z dostosowaną wartością:

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

Zobacz też Dostosowywanie obrazu tła.

Aby dostosować elementy stylu motywu:

  1. Otwórz edytor motywów.
  2. W panelu po prawej stronie kliknij Zaawansowane.
  3. Kliknij Style niestandardowe.
  4. Dodaj elementy stylów motywu.
  5. Kliknij Zapisz, aby zapisać zmiany.
  6. Zamknij x, aby zamknąć zaawansowany edytor motywów.
  7. Wyświetl zmiany w panelu podglądu lub kliknij Podgląd, aby wyświetlić podgląd zmian w portalu w przeglądarce.
    Uwaga: możesz poruszać się po portalu w panelu podglądu, aby wyświetlić zmiany na wszystkich stronach.
  8. Aby opublikować motyw, kliknij Opublikuj. Pojawi się prośba o potwierdzenie aktualizacji.

Tworzenie panelu o pełnej szerokości na stronie portalu

Aby utworzyć panel o pełnej szerokości na stronie portalu:

  1. Dodaj w zaawansowanym edytorze motywów te elementy stylu motywu zgodnie z opisem w sekcji Dostosowywanie elementów stylu motywu: 
    .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. Zmień zawartość strony portalu tak, by zawierała ten element <div> zgodnie z opisem w artykule Tworzenie treści portalu przy użyciu edytora stron: 
    <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>

Opublikuj motyw

Aby opublikować w aktywnym portalu dodane dostosowania motywu i stylu:

  1. Otwórz edytor motywów.
  2. Kliknij Opublikuj.

Aby wyświetlić opublikowane treści w aktywnym portalu, kliknij View Portal (Wyświetl portal) na górnym pasku nawigacyjnym.

Omówienie reguł specyficzności CSS

Szczegółowość CSS opisuje metodę używaną przez przeglądarkę do określania pierwszeństwa deklaracji elementów stylu CSS w przypadku wystąpienia konfliktów. Szczegółowość CSS jest obliczana przez zastosowanie wagi do deklaracji elementu stylu CSS na podstawie jego typu selektora. Im bardziej szczegółowy selektor arkusza CSS, tym większa waga. Na przykład atrybut „identyfikator” będzie miał w obliczeniach większą wagę niż selektor typu.

Jeśli np. zdefiniujesz w kodzie CSS te elementy stylu, ten element będzie miał kolor czerwony, bo deklaracja elementu stylu p w elemencie div jest bardziej szczegółowa niż deklaracja elementu stylu p.

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

Podobnie, jeśli w kodzie CSS zdefiniujesz podane niżej deklaracje elementów stylu, tekst w tagach <div class="test"></div> będzie miał kolor niebieski, ponieważ deklaracja stylu atrybutu identyfikator w elemencie div jest bardziej szczegółowa niż deklaracja elementu stylu div.

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

W przypadku deklaracji elementów stylu o tej samej specyfice obowiązuje ostatnia zdefiniowana deklaracja elementu stylu. Na przykład w kolejności podanych niżej deklaracji elementów stylu element akapitu będzie miał kolor niebieski. 

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

Odniesienie do zmiennej motywu

W kolejnych sekcjach znajdziesz podsumowanie zmiennych, które można zastąpić w sekcji Zmienne w zaawansowanym edytorze motywów zgodnie z opisem w sekcji Zastępowanie zmiennych motywu.

Zmienna motywu podstawowego

Dostosuj kolory pierwszego planu motywu podstawowego używanego w całej witrynie. Prawidłowe wartości to light i dark.

$base-theme: light;

Zmienne palety kolorów

Dostosuj paletę kolorów, modyfikując poniższe zmienne, aby zmienić odpowiednio kolor główny, dodatkowy, uzupełniający i ostrzeżenia. Patrz Informacje o kategoriach palety kolorów.

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

Wartości liczbowe wskazują wartości cieniowania elementów domyślnych, jaśniejszych i ciemniejszych. Aby zidentyfikować zdefiniowane wstępnie zmienne koloru, wyświetl zawartość pliku CSS SCSS (material-theming.scss).

Na przykład możesz zmienić podstawową paletę kolorów na zielony w następujący sposób:

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

Aby dostosować tylko wartości cieniowania dla domyślnego zestawu kolorów zdefiniowanego w motywie podstawowym, dodaj ten kod z dostosowanymi wartościami cieniowania:

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

Zmienne stylu i rodziny czcionek

Dostosuj rodzinę czcionek i style.

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

Określ własną typografię, aby uzyskać bardziej precyzyjną kontrolę, tak jak w tym przykładzie:

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

Zmienne typografii

Dostosuj typologię materiału Anangular. Każdy poziom typografii określa rozmiar oraz wysokość wiersza i grubość czcionki.

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