Dostosuj motyw

Wyświetlasz dokumentację Apigee Edge.
Otwórz dokumentację Apigee X. Informacje

Motyw składa się z globalnego arkusza stylów, który zapewnia spójny wygląd wszystkich stron w portalu. Temat pozwala na jednoczesną zmianę wyglądu wszystkich stron portalu.

Możesz dostosować motyw, wyświetlić jego podgląd i opublikować go, korzystając z instrukcji podanych w kolejnych sekcjach.

Poznaj edytor motywów

W edytorze motywów możesz dostosować motyw portalu, wyświetlić jego podgląd i opublikować go.

Aby uzyskać dostęp do edytora motywu:

• Na pasku bocznym wybierz kolejno Opublikuj > Portale, wybierz swój portal i na stronie docelowej kliknij Tematyka.
• Podczas edytowania portalu w menu na pasku narzędzi nawigacji u góry kliknij Motywy.

Jak widać na poprzednim rysunku, edytor motywów umożliwia:

• Szybko dostosuj podstawowe style za pomocą edytora motywów podstawowych stylów, w tym tych elementów:
  • Paleta kolorów
  • Rodzina i style czcionki
  • Logos
• Zastąpić zmienne motywu lub dostosować elementy stylu motywu w zaawansowanym edytorze motywów, w tym m.in.:
  • Paleta kolorów
  • Rodzina i style czcionki
  • Pasek narzędzi nawigacji
  • Background image
  • Typografia
• Podgląd zmian w motywie
• Podgląd portalu w przeglądarce
• Opublikuj motyw w aktywnym portalu

Motyw podstawowy

Większość reguł stylu podstawowego motywu określających wygląd witryny opiera się na zaokrąglonym projekcie materialnym. Angular Material Design wykorzystuje układy oparte na siatce oraz spójne komponenty i styl, aby zapewnić spójne interaktywne działanie.

Reguły stylów są definiowane za pomocą Sassy Cascading Style Sheet (SCSS). SCSS to superset kaskadowych arkuszy stylów (CSS), który zapewnia te korzyści:

• zmienne globalne, które można ponownie używać w arkuszu stylów;
• Reguły zagnieżdżone, które pozwalają zaoszczędzić czas poświęcany na tworzenie arkuszy stylów.
• możliwość tworzenia miksów 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; }

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

Motyw bazowy używa arkusza stylów Material w Angularze, czyli pliku SCSS do stylizacji Materialu (material-theming.scss). Ta szata deklaruje zmienne, funkcje i mixiny, które można zastąpić za pomocą zmiennych niestandardowych i sekcji SCSS, zgodnie z opisem w artykule Dostosowywanie motywu za pomocą zaawansowanego edytora motywu.

Na podstawie wybranego motywu interfejsu deklarowana jest pewna liczba zmiennych SCSS, które definiują typografię, kolory i style układu i są używane przez podstawową spersonalizowaną ściągę. Możesz zastąpić zmienne wymienione w odnośniku do zmiennych motywu.

Dostosowywanie palety kolorów

Dostosuj paletę kolorów za pomocą podstawowego edytora stylów lub zastępując zmienne motywu.

Kategorie palety kolorów

Definicje palety kolorów w zintegrowanym portalu są pogrupowane w te kategorie, które są zdefiniowane za pomocą stylizacji kolorów Material Design w motywie podstawowym.

Kategoria	Style
Główna	Paski nawigacyjne, nagłówki, nagłówki kart i przyciski
Dodatkowy	<pre> i <code> tekst
Akcent	Nawigacja, linki i przyciski z akcentem
Ostrzeżenie	Ostrzeżenia i błędy

Dostosowywanie palety kolorów za pomocą podstawowego edytora stylu

Szybko dostosuj palety kolorów głównego i dodatkowego za pomocą podstawowego edytora stylów.

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

1. Otwórz Edytor motywów.
2. Aby dostosować kolor podstawowy, w menu Kolor podstawowy wybierz kolor lub kliknij Niestandardowy i wpisz niestandardową wartość koloru w polu tekstowym.
3. Aby dostosować kolor akcentu, w menu Kolor akcentu wybierz kolor lub kliknij Niestandardowy i wpisz niestandardową wartość szesnastkową koloru w polu tekstowym.
4. Kliknij Zapisz, aby zapisać zmiany.
5. Możesz wyświetlić zmiany w okienku podglądu lub kliknąć Podgląd, aby wyświetlić podgląd zmian w portalu w przeglądarce.
   Uwaga: w panelu podglądu możesz klikać elementy nawigacji portalu, aby wyświetlić zmiany na wszystkich stronach.
6. Aby opublikować motyw, kliknij Opublikuj. Pojawi się prośba o potwierdzenie zmiany.

Dostosowywanie palety kolorów przez zastąpienie zmiennych motywu

Aby dostosować paletę kolorów przez zastąpienie zmiennych motywu, otwórz zaawansowany edytor motywu i w sekcji Zmienna uwzględnij co najmniej jedną z tych zmiennych z dopasowanymi wartościami, aby zmienić odpowiednio kolory wiadomości podstawowej, dodatkowej, akcentu lub ostrzeżenia. Zapoznaj się z informacjami 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 tematyki materiału (material-theming.scss), aby zidentyfikować wstępnie zdefiniowane zmienne kolorów (takie jak $mat-grey). Wartości liczbowe wskazują wartości cieniowania odpowiednio dla 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 jej do zmiany palety kolorów, jak pokazano w tym przykładzie:

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

Dostosowywanie rodziny i stylów czcionek

Dostosuj rodzinę czcionek i style za pomocą podstawowego edytora stylów lub przez zastąpienie zmiennych motywu. Możesz też importować czcionkę niestandardową.

Dostosowywanie rodziny czcionek i stylów za pomocą podstawowego edytora stylów

Szybko dostosuj rodzinę czcionek i style za pomocą podstawowego edytora stylów, jak pokazano na rysunku 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 czcionki i w razie potrzeby edytuj style, w tym rozmiar czcionki, wysokość linii i grubość czcionki dla wybranych elementów HTML.
4. Kliknij Zapisz, aby zapisać zmiany.
5. Możesz wyświetlić zmiany w okienku podglądu lub kliknąć Podgląd, aby wyświetlić podgląd zmian w portalu w przeglądarce.
   Uwaga: w panelu podglądu możesz klikać elementy nawigacji portalu, aby wyświetlić zmiany na wszystkich stronach.
6. Aby opublikować motyw, kliknij Opublikuj. Pojawi się prośba o potwierdzenie zmiany.

Dostosowywanie rodziny i stylów czcionek przez zastąpienie zmiennych motywu

Aby dostosować rodzinę czcionek i style, zastępując zmienne motywu, otwórz zaawansowany edytor motywów i w sekcji Zmienna uwzględnij co najmniej jedną zmienną rodzina czcionek i styl z dopasowanymi wartościami.

Aby na przykład zmienić domyślną czcionkę na Arial, zdefiniuj tę zmienną:

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

Importowanie czcionki niestandardowej

Zaimportuj czcionkę Google (nieuwzględnioną w zestawie domyślnych czcionek) lub własną czcionkę niestandardową, a potem odwołuj się do niej w arkuszu stylów, jak opisano poniżej.

Importowanie czcionki Google

Aby zaimportować czcionkę Google, otwórz zaawansowany edytor motywów i zaimportuj czcionkę w sekcji Styl niestandardowy, jak pokazano na ilustracji poniżej:

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

Importowanie czcionki niestandardowej

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

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

1. Opcjonalnie możesz przesłać plik czcionki do menedżera zasobów, korzystając z instrukcji opisanych w sekcji Przesyłanie pliku.

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

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

Odwoływanie się do czcionki niestandardowej w arkuszu stylów

Odwołaj się do czcionki niestandardowej w jednej z zmienne rodzina czcionek i styl 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
);    

Dostosowywanie logo

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

Lokalizacja logo	Domyślny rozmiar pliku
Pasek nawigacyjny na komputerze	196 x 32 pikseli
Pasek nawigacji na urządzeniach mobilnych	156 x 32 pikseli
Favikona na pasku adresu przeglądarki (i w innych miejscach)	32 x 32 piksele
Strona logowania	392 x 64 pikseli

dostosowywanie logo na pasku nawigacji na wyświetlaczu komputera i urządzenia mobilnego.

Spersonalizuj logo na pasku nawigacji na wyświetlaczu komputera i urządzenia mobilnego. W zależności od szerokości przeglądarki możesz zobaczyć wersję logo na komputery lub urządzenia mobilne.

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

Aby dostosować logo używane na pasku nawigacyjnym na ekranach komputerów i urządzeń mobilnych:

1. Uzyskaj co najmniej 1 kopię logo firmy, która będzie odpowiednia do użycia.
   Zalecany rozmiar znajdziesz w poprzedniej tabeli.
2. Otwórz Edytor motywów.
3. Aby zastąpić logo na pasku nawigacji u góry ekranu na komputerach:
   a. W sekcji Style podstawowe w panelu po prawej stronie kliknij  pod polem Logo główne.
   b. W katalogu lokalnym odszukaj wersję logo na komputer.
   c. Kliknij Otwórz, aby przesłać plik.
4. Aby zastąpić logo na górnym pasku nawigacji na ekranach mobilnych:
   a. W sekcji Style podstawowe w panelu po prawej stronie rozwiń Opcje logo i kliknij  w polu Logo na urządzenia mobilne.
   W katalogu lokalnym odszukaj wersję logo na urządzenia mobilne.
   c. Kliknij Otwórz, aby przesłać plik.
5. Aby wyświetlić podgląd zmian w panelu po lewej stronie, kliknij Zapisz.
6. Aby opublikować zmiany w portalu, kliknij Opublikuj. Potwierdź operację, gdy pojawi się odpowiedni komunikat.

Dostosowywanie favikony

Aby dostosować ikonę używaną na pasku adresu przeglądarki (oraz w innych miejscach:

1. Uzyskaj kopię logo swojej firmy, która będzie odpowiednia do użycia jako ikona pliku.
   Zalecany rozmiar znajdziesz w poprzedniej tabeli.
2. Otwórz Edytor motywów.
3. W sekcji Style podstawowe w panelu po prawej stronie rozwiń Opcje logo i kliknij  pod polem Favicon.
4. W lokalnym katalogu odszukaj favikon swojego logo.
5. Kliknij Otwórz, aby przesłać plik.
6. Aby wyświetlić podgląd zmian w panelu po lewej stronie, kliknij Zapisz.
7. Aby opublikować zmiany w portalu, kliknij Opublikuj. Potwierdź operację, gdy pojawi się odpowiedni komunikat.

Dostosowywanie logo na stronie logowania

Skonfiguruj logo na stronie logowania, gdy konfigurujesz proces rejestracji i logowania w ramach programu dla deweloperów, zgodnie z opisem w artykule Zarządzanie informacjami o firmie.

Dostosowywanie paska nawigacyjnego

Oto kilka krótkich wskazówek dotyczących dostosowywania paska nawigacji:

• Spersonalizuj kolor paska nawigacyjnego w nagłówku i stopce, zmieniając kolor podstawowy zgodnie z opisem w sekcji Spersonalizowanie palety kolorów.
• Dostosuj rozmiar i styl czcionki elementów menu na pasku nawigacyjnym w nagłówku i stopce, zmieniając styl Czcionka i Przyciski w sposób opisany w sekcji Dostosowywanie rodziny i stylów czcionek.
• Aby dostosować wysokość paska nawigacji w nagłówku, otwórz zaawansowany edytor motywu i w sekcji Zmienna dodaj zmienną z odpowiednią wartością:$layout-header-height: 64px;
• Aby dostosować wysokość paska nawigacyjnego w stopce, otwórz zaawansowany edytor motywu i w sekcji Zmienna uwzględnij tę zmienną z domyślną wartością:$layout-footer-height: 44px;
• Dostosowywanie logo na pasku nawigacyjnym na wyświetlaczu komputera i urządzenia mobilnego

Dostosowywanie obrazu tła

Aby dostosować obraz tła na stronie głównej, wykonaj jedną z tych czynności:

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

• Zmień nazwę obrazu tła i jego wypełnienie, otwierając zaawansowany edytor motywu i dodając w sekcji Niestandardowe style ten kod SCSS z odpowiednimi wartościami:

  #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, otwierając zaawansowany edytor motywu i dodając w sekcji Niestandardowe style ten kod SCSS z odpowiednią wartością:

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

Dostosowywanie typografii

Aby dostosować typografię, otwórz zaawansowany edytor motywu i w sekcji Zmienna zmień wartości co najmniej jednej z tych zmiennych typograficznych:

• $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 konkretnego selektora CSS, jak pokazano w tym przykładzie:

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

Możesz też zastosować określony poziom typografii zdefiniowany w niestandardowej typografii do selektora CSS, jak w tym przykładzie:

.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 motywu.

Zastępowanie zmiennych motywu

Zastępuj zmienne motywu w sekcji Zmienne w zaawansowanym edytorze motywu. Listę zmiennych motywu znajdziesz w dokumentacji zmiennych motywu.

Aby na przykład dostosować wysokość pasków nawigacyjnych w nagłówku i stopce, w sekcji Zmienna w zaawansowanym edytorze motywów dodaj te zmienne z odpowiednimi wartościami:

Dodatkowe przykłady znajdziesz w tych artykułach:

• Dostosowywanie palety kolorów przez zastąpienie zmiennych motywu
• Dostosowywanie rodziny i stylów czcionek przez zastąpienie zmiennych motywu

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. Aby zamknąć zaawansowany edytor motywów, kliknij x.
7. Możesz wyświetlić zmiany w okienku podglądu lub kliknąć Podgląd, aby wyświetlić podgląd zmian w portalu w przeglądarce. Uwaga: w panelu podglądu możesz klikać elementy nawigacji portalu, aby wyświetlić zmiany na wszystkich stronach.
8. Aby opublikować motyw, kliknij Opublikuj. Pojawi się prośba o potwierdzenie zmiany.

Dostosowywanie elementów stylu motywu

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

Aby na przykład zmienić kolor przycisku Utwórz na stronie Nowa aplikacja, który pojawia się podczas rejestrowania aplikacji na portalu, dodaj element stylu motywu z dopasowaną 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. Aby zamknąć zaawansowany edytor motywu, kliknij x.
7. Możesz wyświetlić zmiany w okienku podglądu lub kliknąć Podgląd, aby wyświetlić podgląd zmian w portalu w przeglądarce.
   Uwaga: w panelu podglądu możesz klikać elementy nawigacji portalu, aby wyświetlić zmiany na wszystkich stronach.
8. Aby opublikować motyw, kliknij Opublikuj. Pojawi się prośba o potwierdzenie zmiany.

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

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

1. W zaawansowanym edytorze motywów dodaj te elementy stylu motywu: 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ń treść strony portalu, aby uwzględnić element <div>, zgodnie z instrukcjami w artykule Tworzenie treści portalu za pomocą edytora strony:

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

Publikowanie motywu

Aby opublikować w portalu aktywnym dodane przez siebie motywy i spersonalizowane style:

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

Aby wyświetlić opublikowane treści w portalu na żywo, na pasku nawigacyjnym u góry kliknij Wyświetl portal.

Poznaj reguły specyficzności CSS

Specyficzność CSS określa metodę używaną przez przeglądarkę do określania pierwszeństwa deklaracji elementów stylu CSS w przypadku konfliktów. Specyficzność CSS jest obliczana przez zastosowanie wagi do konkretnej deklaracji elementu stylu CSS na podstawie typu selektora. Im bardziej szczegółowy jest selektor CSS, tym wyższa waga. Na przykład atrybut identyfikatora ma większą wagę w obliczeniach niż selektor typu.

Jeśli np. w kodzie CSS zdefiniujesz te elementy stylu, element akapitu będzie podświetlony na czerwono, ponieważ 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 }

Jeśli w kodzie CSS zdefiniujesz te deklaracje elementów stylu, tekst zawarty w tagach <div class="test"></div> będzie niebieski, ponieważ deklaracja stylu atrybutu id 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 szczegółowości pierwszeństwo ma ostatnia zdefiniowana deklaracja. Na przykład ze względu na kolejność deklaracji elementów stylu element akapitu będzie podświetlony na niebiesko.

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

Odniesienie do zmiennej motywu

W następnych sekcjach znajdziesz podsumowanie zmiennych, które możesz zastąpić w sekcji Zmienne w zaawansowanym edytorze motywów (jak opisano w sekcji Zastępowanie zmiennych motywu).

• Zmienna motywu podstawowego
• Zmienna paleta kolorów
• Rodzina czcionek i zmienna stylu
• Zmienna typograficzna

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 podane niżej zmienne, aby odpowiednio zmienić kolory główne, dodatkowe, akcentowe i ostrzegawcze. Zapoznaj się z informacjami 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 odpowiednio dla elementów domyślnych, jaśniejszych i ciemniejszych. Aby znaleźć wstępnie zdefiniowane zmienne kolorów, wyświetl zawartość pliku SCSS motywu Material Design (material-theming.scss).

Możesz na przykład zmienić paletę kolorów podstawowych na zieloną w ten sposób:

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

Aby dostosować tylko wartości cieniowania dla domyślnego zestawu kolorów zdefiniowanego w temacie podstawowym, dodaj 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 rodziny i stylu czcionki

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;

Aby uzyskać bardziej szczegółową kontrolę, określ własną niestandardową typografię, 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 typograficzne

Dostosuj typografię w stylu Material Design. Każdy poziom typografii określa rozmiar czcionki, wysokość linii i wagę 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);