Dostosuj motyw

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

Motyw to globalny arkusz stylów, który zapewnia jednolity wygląd wszystkich stron portalu. Celem motywu jest umożliwienie zmiany wyglądu wszystkich stron portalu jednocześnie.

Możesz dostosować, wyświetlić podgląd i opublikować motyw zgodnie z opisem w kolejnych sekcjach.

Poznaj edytor motywów

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

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

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

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

• Szybko dostosuj podstawowe style za pomocą edytora motywów podstawowych stylów, w tym te elementy:
  • Paleta kolorów
  • Rodzina i style czcionki
  • Logo
• Zastąp zmienne motywu lub dostosuj elementy stylu motywu w zaawansowanym edytorze motywów, w tym między innymi te elementy:
  • Paleta kolorów
  • Rodzina i style czcionki
  • Pasek narzędzi nawigacji
  • Background image
  • Typografia
• Wyświetlanie podglądu zmian motywu
• Wyświetlanie podglądu portalu w przeglądarce
• Opublikuj motyw w aktywnym portalu.

Informacje o motywie podstawowym

Większość reguł stylu motywu podstawowego określających wygląd witryny opiera się na angular material design. Angular Material Design wykorzystuje układy oparte na siatce oraz spójne komponenty i style, aby zapewnić jednolite interaktywne środowisko.

Reguły stylu są zdefiniowane za pomocą Sassy Cascading Style Sheet (SCSS). SCSS to nadzbiór kaskadowych arkuszy stylów (CSS), który oferuje te zalety:

• Zmienne globalne, których można używać w całym arkuszu stylów.
• Zagnieżdżone reguły, które pozwalają zaoszczędzić czas podczas tworzenia arkusza stylów.
• Możliwość tworzenia miksinó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 przekształcany w zwykły CSS, zanim treść zostanie wyrenderowana na stronie internetowej.

Motyw podstawowy korzysta z arkusza stylów Angular Material, pliku SCSS motywu materiałowego (material-theming.scss). Ten arkusz stylów deklaruje zmienne, funkcje i mixiny, które można zastąpić za pomocą zmiennych niestandardowych i sekcji SCSS, jak opisano w artykule Dostosowywanie motywu za pomocą zaawansowanego edytora motywów.

Na podstawie wybranych motywów interfejsu deklarowanych jest wiele zmiennych SCSS, które definiują style typografii, kolorów i układu oraz są używane przez podstawowy arkusz stylów. Możesz zastąpić zmienne wymienione w dokumentacji zmiennych motywu.

Dostosowywanie palety kolorów

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

Informacje o kategoriach palet kolorów

Definicje palety kolorów zintegrowanego portalu są pogrupowane w tych kategoriach, które są zdefiniowane za pomocą stylu kolorów Material Design w motywie podstawowym.

Dostosowywanie palety kolorów za pomocą podstawowego edytora stylu

Szybko dostosuj palety kolorów podstawowych i uzupełniających za pomocą edytora stylów podstawowych.

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

1. Otwórz edytor motywów.
2. Aby dostosować kolor podstawowy, w menu Kolor podstawowy wybierz kolor lub kliknij Niestandardowy i w polu tekstowym wpisz niestandardową wartość szesnastkową koloru.
3. Aby dostosować kolor uzupełniający, w menu Kolor uzupełniający wybierz kolor lub kliknij Niestandardowy i w polu tekstowym wpisz niestandardową szesnastkową wartość koloru.
4. Kliknij Zapisz, aby zapisać zmiany.
5. Wyświetl zmiany w okienku podglądu lub kliknij 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 zobaczyć zmiany na wszystkich stronach.
6. Aby opublikować motyw, kliknij Opublikuj. Pojawi się prośba o potwierdzenie zmiany.

Dostosowywanie palety kolorów przez zastępowanie zmiennych motywu

Aby dostosować paletę kolorów przez zastąpienie zmiennych motywu, otwórz zaawansowany edytor motywów i w sekcji Zmienne uwzględnij co najmniej jedną z tych zmiennych z dostosowanymi wartościami, aby zmienić odpowiednio kolory podstawowy, dodatkowy, akcentujący lub kolor wiadomości ostrzegawczej. Więcej informacji znajdziesz w sekcji Informacje o kategoriach palet 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 z motywem Material (material-theming.scss), aby zidentyfikować wstępnie zdefiniowane zmienne kolorów (np. $mat-grey). Wartości liczbowe wskazują odpowiednio wartości cieniowania 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 go, aby zmienić paletę kolorów, jak pokazano w przykładzie poniżej:

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

Dostosowywanie rodziny czcionek i stylów

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

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

Szybko dostosuj rodzinę czcionek i style za pomocą edytora stylów podstawowych, jak pokazano na ilustracji poniżej.

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

1. Otwórz edytor motywów.
2. Aby zmienić rodzinę czcionek, wybierz wartość w menu Czcionka.
3. Aby zmienić style czcionek, rozwiń sekcję Style czcionek i w razie potrzeby edytuj style, w tym rozmiar czcionki, wysokość wiersza i grubość czcionki dla wybranych elementów HTML.
4. Kliknij Zapisz, aby zapisać zmiany.
5. Wyświetl zmiany w okienku podglądu lub kliknij 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 zobaczyć zmiany na wszystkich stronach.
6. Aby opublikować motyw, kliknij Opublikuj. Pojawi się prośba o potwierdzenie zmiany.

Dostosowywanie rodziny czcionek i stylów przez zastępowanie zmiennych motywu

Aby dostosować rodzinę i style czcionek przez zastąpienie zmiennych motywu, otwórz zaawansowany edytor motywów i w sekcji Zmienne uwzględnij co najmniej jedną zmienną rodziny i stylu czcionki z dostosowanymi 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 (nie jest ona uwzględniona w zestawie czcionek domyślnych) lub własną czcionkę niestandardową, a następnie odwołaj się do niej w arkuszu stylów, jak opisano poniżej.

Importowanie czcionki Google

Aby zaimportować czcionkę Google, otwórz edytor zaawansowanych motywów i zaimportuj czcionkę w sekcji Style niestandardowe, jak pokazano poniżej:

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

Importowanie czcionki niestandardowej

Zaimportuj własną czcionkę niestandardową za pomocą 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 prześlij plik czcionki do menedżera komponentów zgodnie z instrukcjami w artykule 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 menedżer zasobów), MyCustomFont.tff to nazwa pliku czcionki niestandardowej, a format określa format czcionki.

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

Utwórz odnośnik do czcionki niestandardowej w arkuszu stylów

Odwołaj się do czcionki niestandardowej w jednej ze zmiennych rodziny i stylu czcionki 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

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

Dostosowywanie logo na pasku nawigacyjnym na komputerach i urządzeniach mobilnych

Dostosuj logo na pasku narzędzi nawigacyjnych na komputerach i urządzeniach mobilnych. W zależności od szerokości przeglądarki może być widoczna wersja logo na komputery lub urządzenia mobilne.

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

Aby dostosować logo używane na pasku narzędzi nawigacyjnych na komputerach i urządzeniach mobilnych:

1. Uzyskaj co najmniej 1 kopię logo firmy, która będzie odpowiednia do użycia.
   Zalecane rozmiary znajdziesz w poprzedniej tabeli.
2. Otwórz edytor motywów.
3. Aby zastąpić logo na górnym pasku narzędzi nawigacyjnych na ekranach komputerów:
   a. W panelu po prawej stronie w sekcji Style podstawowe kliknij  w polu Logo główne.
   b. Wyszukaj wersję komputerową logo w lokalnym katalogu.
   Aby przesłać plik, kliknij Otwórz.
4. Aby zastąpić logo na górnym pasku nawigacyjnym na wyświetlaczach mobilnych:
   a. W sekcji Style podstawowe w panelu po prawej stronie rozwiń Opcje logo i kliknij  w polu Logo na urządzenia mobilne.
   Wyszukaj mobilną wersję logo w katalogu lokalnym.
   Aby przesłać plik, kliknij Otwórz.
5. Kliknij Zapisz, aby wyświetlić podgląd zmian w panelu po lewej stronie.
6. Aby opublikować zmiany w portalu, kliknij Opublikuj. Gdy pojawi się odpowiedni komunikat, potwierdź operację.

Dostosowywanie favikony

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

1. Uzyskaj kopię logo firmy, która będzie odpowiednia do użycia jako ikona.
   Zalecany rozmiar znajdziesz w tabeli powyżej.
2. Otwórz edytor motywów.
3. W panelu po prawej stronie w sekcji Style podstawowe rozwiń Opcje logo i kliknij  w polu Favicon.
4. Wyszukaj w lokalnym katalogu wersję logo w formacie favicon.
5. Aby przesłać plik, kliknij Otwórz.
6. Kliknij Zapisz, aby wyświetlić podgląd zmian w panelu po lewej stronie.
7. Aby opublikować zmiany w portalu, kliknij Opublikuj. Gdy pojawi się odpowiedni komunikat, potwierdź operację.

Dostosowywanie logo na stronie logowania

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.

Dostosowywanie paska narzędzi nawigacji

Poniżej znajdziesz kilka wskazówek dotyczących dostosowywania paska narzędzi nawigacji:

• Dostosuj kolor paska narzędzi nawigacyjnych w nagłówku i stopce, zmieniając kolor podstawowy zgodnie z opisem w artykule Dostosowywanie 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 zgodnie z opisem w artykule Dostosowywanie rodziny czcionek i stylów.
• Dostosuj wysokość paska narzędzi nawigacji w nagłówku, otwierając zaawansowany edytor motywów, i dodaj w sekcji Zmienne tę zmienną z dostosowaną wartością: $layout-header-height: 64px;
• Dostosuj wysokość paska narzędzi nawigacji w stopce, otwierając zaawansowany edytor motywów i dodając w sekcji Zmienne tę zmienną z dostosowaną wartością: $layout-footer-height: 44px;
• Dostosowywanie logo na pasku nawigacyjnym na komputerach i urządzeniach mobilnych

Dostosowywanie obrazu tła

Dostosuj obraz tła na stronie głównej, wykonując dowolne z tych zadań:

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

• Zmodyfikuj nazwę pliku obrazu tła i jego dopełnienie, uzyskując dostęp do zaawansowanego edytora motywów i dodając 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;
      }
    }
  }
  

• Aby dodać obraz tła do wszystkich stron w portalu, otwórz zaawansowany edytor motywów i w sekcji Style niestandardowe dodaj ten kod SCSS ze zmienioną wartością:

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

Dostosowywanie typografii

Dostosuj typografię, otwierając zaawansowany edytor 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 konkretnego selektora CSS, jak 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 motywów.

Zastępowanie zmiennych motywu

Zastąp zmienne motywu w sekcji Zmienne w zaawansowanym edytorze motywów. Listę zmiennych motywu znajdziesz w dokumentacji zmiennych motywu.

Aby na przykład dostosować wysokość pasków narzędzi nawigacji w nagłówku i stopce, w sekcji Zmienne zaawansowanego edytora motywów uwzględnij odpowiednio te zmienne z dostosowanymi wartościami:

Dodatkowe przykłady znajdziesz w tych artykułach:

• Dostosowywanie palety kolorów przez zastępowanie zmiennych motywu
• Dostosowywanie rodziny czcionek i stylów przez zastępowanie 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 dokumentacji zmiennych motywu.
5. Kliknij Zapisz, aby zapisać zmiany.
6. Aby zamknąć edytor zaawansowanych motywów, kliknij x.
7. Wyświetl zmiany w okienku podglądu lub kliknij 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 zobaczyć zmiany na wszystkich stronach.
8. Aby opublikować motyw, kliknij Opublikuj. Pojawi się prośba o potwierdzenie zmiany.

Dostosowywanie elementów stylu motywu

Dostosuj elementy stylu motywu bezpośrednio w sekcji Style niestandardowe zaawansowanego edytora motywów.

Aby na przykład zmienić kolor przycisku Utwórz na stronie Nowa aplikacja, która pojawia się podczas rejestrowania aplikacji w portalu, dodaj ten element stylu motywu ze zmienioną 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. Kliknij Zamknij x, aby zamknąć edytor zaawansowany motywów.
7. Wyświetl zmiany w okienku podglądu lub kliknij 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 zobaczyć 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. Dodaj te elementy stylu motywu w zaawansowanym edytorze motywów 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. Edytuj zawartość strony portalu, aby dodać ten element <div>, zgodnie z opisem w artykule Tworzenie zawartości portalu za pomocą 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 przez siebie motywy i dostosowania stylu:

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

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

Poznaj reguły specyficzności CSS

Specyficzność CSS to metoda używana przez przeglądarkę do określania priorytetu deklaracji elementów stylu CSS w przypadku wystąpienia konfliktów. Specyficzność CSS jest obliczana przez przypisanie wagi do deklaracji określonego elementu stylu CSS na podstawie jego typu selektora. Im bardziej szczegółowy jest selektor CSS, tym większa jest jego waga. Na przykład atrybut identyfikatora będzie miał większą wagę w obliczeniach niż selektor typu.

Jeśli na przykład w kodzie CSS zdefiniujesz te elementy stylu, element akapitu będzie miał kolor czerwony, 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 }

Podobnie jeśli w kodzie CSS zdefiniujesz te deklaracje elementu stylu, tekst umieszczony w tagach <div class="test"></div> będzie miał kolor 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 elementu stylu. Na przykład w przypadku poniższych deklaracji elementu stylu element akapitu będzie miał kolor niebieski.

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

Odwołanie do zmiennej motywu

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

• Zmienna motywu podstawowego
• Zmienne palety kolorów
• Zmienne rodziny i stylu czcionki
• Zmienne typograficzne

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 te zmienne, aby zmienić odpowiednio kolory główne, dodatkowe, akcentujące i kolory komunikatów ostrzegawczych. Więcej informacji znajdziesz w sekcji Informacje o kategoriach palet 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ą odpowiednio wartości cieniowania elementów domyślnych, jaśniejszych i ciemniejszych. Wyświetl zawartość pliku motywu materiałowego SCSS (material-theming.scss), aby zidentyfikować wstępnie zdefiniowane zmienne kolorów.

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

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

Aby dostosować tylko wartości cieniowania domyślnego zestawu kolorów zdefiniowanego w motywie podstawowym, dodaj ten kod ze zmienionymi 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ć większą kontrolę, możesz określić własną typografię niestandardową, jak pokazano 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ę Angular Material. Każdy poziom typografii określa rozmiar czcionki, 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);