Temanızı özelleştirin

Apigee Edge belgelerini görüntülüyorsunuz.
Apigee X belgelerine gidin. info

Tema, portalınızdaki tüm sayfalar için tek tip bir görünüm ve his sağlayan global bir stil sayfasından oluşur. Temaların amacı, portal sayfalarınızın tümünün görünümünü ve tarzını tek seferde değiştirmenize olanak tanımaktır.

Aşağıdaki bölümlerde açıklandığı şekilde temanızı özelleştirebilir, önizleyebilir ve yayınlayabilirsiniz.

Tema düzenleyiciyi keşfetme

Tema düzenleyicide portalınızın temasını özelleştirin, önizleyin ve yayınlayın.

Tema düzenleyiciye erişmek için:

  • Yan gezinme araç çubuğunda Yayınla > Portallar'ı seçin, portalınızı seçin ve açılış sayfasındaki Temalar'ı tıklayın.
  • Bir portalı düzenlerken üst gezinme araç çubuğundaki açılır menüden Temalar'ı tıklayın.

Tema düzenleyici

Önceki resimde belirtildiği gibi, tema düzenleyici sayesinde şunları yapabilirsiniz:

Temel tema hakkında

Sitenin görünümünü tanımlayan temel tema stili kurallarının çoğu köşeli materyal tasarımına dayanır. Köşeli materyal tasarım, birleşik bir etkileşimli deneyim sunmak için ızgaraya dayalı düzenler, tutarlı bileşenler ve stil kullanır.

Stil kuralları Sassy Cascading Style Sheet (SCSS) kullanılarak tanımlanır. SCSS, aşağıdaki avantajları sunan Geçişli Stil Sayfaları'nın (CSS) bir üst kümesidir:

  • Stil sayfası boyunca yeniden kullanılabilen genel değişkenler.
  • Stil sayfası geliştirme süresinden tasarruf etmek için iç içe yerleştirilmiş kurallar.
  • Karışım ve işlev oluşturma

Örneğin:

// 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, içerik web sayfasında oluşturulmadan önce derlenir ve eski CSS'ye dönüştürülür.

Temel tema, angular materyal stil sayfası olan materyal temalandırma SCSS dosyasını (material-theming.scss) kullanır. Bu stil sayfası, Gelişmiş tema düzenleyiciyi kullanarak temayı özelleştirme bölümünde açıklandığı gibi, özelleştirilebilen değişkenler, işlevler ve karmalar tanımlar.

Kullanıcı arayüzü tema seçiminize göre, yazı tipi, renk ve düzen stillerini tanımlayan ve temel stil sayfası tarafından kullanılan bir dizi SCSS değişkeni tanımlanır. Tema değişkeni referansında listelenen değişkenleri üstlenebilir.

Renk paletini özelleştirme

Temel stil düzenleyiciyi kullanarak veya tema değişkenlerini geçersiz kılarak renk paletini özelleştirin.

Renk paleti kategorileri hakkında

Entegre portalın renk paleti tanımları, temel temada materyal tasarım renk stili kullanılarak tanımlanan aşağıdaki kategorilerde gruplandırılır.

Kategori Stiller
Birincil Gezinme araç çubukları, başlıklar, kart üstbilgileri ve düğmeler
İkincil <pre> ve <code> metni
Aksan Gezinme, bağlantılar ve aksan düğmeleri
Uyar Uyarılar ve hatalar

Temel stil düzenleyiciyi kullanarak renk paletini özelleştirme

Temel stil düzenleyiciyi kullanarak birincil ve vurgu renk paletlerini hızlıca özelleştirin.

Temel stil düzenleyiciyi kullanarak renk paletini özelleştirmek için:

  1. Tema düzenleyiciye erişin.
  2. Birincil rengi özelleştirmek için Birincil renk açılır menüsünden bir renk seçin veya Özel'i tıklayıp metin kutusuna özel bir onaltılık renk değeri girin.
  3. Vurgu rengini özelleştirmek için Vurgu rengi açılır listesinde bir renk seçin veya Özel'i tıklayıp metin kutusuna özel bir onaltılık renk değeri girin.
  4. Değişikliklerinizi kaydetmek için Kaydet'i tıklayın.
  5. Değişikliklerinizi önizleme bölmesinde görüntüleyin veya portal değişikliklerini tarayıcıda önizlemek için Önizle'yi tıklayın.
    Not: Tüm sayfalardaki değişiklikleri görüntülemek için önizleme bölmesinde portal gezinme menüsünü tıklayabilirsiniz.
  6. Temanızı yayınlamak için Yayınla'yı tıklayın. Güncellemeyi onaylamanız istenir.

Tema değişkenlerini geçersiz kılarak renk paletini özelleştirme

Tema değişkenlerini geçersiz kılarak renk paletini özelleştirmek için gelişmiş tema düzenleyiciye erişin ve sırasıyla birincil, ikincil, vurgu veya uyarı mesajı renklerini değiştirmek için Değişkenler bölümüne ayarlanmış değerlerle aşağıdaki değişkenlerden birini veya daha fazlasını ekleyin. Renk paleti kategorileri hakkında başlıklı makaleyi inceleyin.

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

Önceden tanımlanmış renk değişkenlerini ($mat-grey gibi) tanımlamak için içe aktarılan malzeme temalandırma SCSS dosyasının (material-theming.scss) içeriğini görüntüleyin. Sayısal değerler sırasıyla varsayılan, daha açık ve daha koyu öğeler için gölgelendirme değerlerini gösterir.

Dilerseniz kendi renk değişkeninizi de oluşturabilirsiniz. Örneğin:

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

Ardından, aşağıdaki örnekte gösterildiği gibi renk paletini değiştirmek için kullanın:

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

Yazı tipi ailesini ve stillerini özelleştirme

Temel stiller düzenleyiciyi kullanarak veya tema değişkenlerini geçersiz kılarak yazı tipi ailesini ve stilleri özelleştirin. Ayrıca özel yazı tipi içe aktarabilirsiniz.

Temel stil düzenleyiciyi kullanarak yazı tipi ailesini ve stilleri özelleştirme

Aşağıdaki şekilde gösterildiği gibi temel stiller düzenleyicisini kullanarak yazı tipi ailesini ve stilleri hızlıca özelleştirin.

Temel stil düzenleyiciyi kullanarak yazı tipi ailesini ve stilleri özelleştirmek için:

  1. Tema düzenleyiciye erişin.
  2. Yazı tipi ailesini değiştirmek için Yazı tipi açılır listesinden bir değer seçin.
  3. Yazı tipi stillerini değiştirmek için Yazı tipi stilleri bölümünü genişletin ve istediğiniz HTML öğelerinin yazı tipi boyutu, satır yüksekliği ve yazı tipi kalınlığı da dahil olmak üzere stilleri gerektiği gibi düzenleyin.
  4. Değişikliklerinizi kaydetmek için Kaydet'i tıklayın.
  5. Değişikliklerinizi önizleme bölmesinde görüntüleyin veya portal değişikliklerini tarayıcıda önizlemek için Önizle'yi tıklayın.
    Not: Tüm sayfalardaki değişiklikleri görüntülemek için önizleme bölmesinde portal gezinme menüsünü tıklayabilirsiniz.
  6. Temanızı yayınlamak için Yayınla'yı tıklayın. Güncellemeyi onaylamanız istenir.

Tema değişkenlerini geçersiz kılarak yazı tipi ailesini ve stilleri özelleştirme

Tema değişkenlerini geçersiz kılarak yazı tipi ailesini ve stilleri özelleştirmek için gelişmiş tema düzenleyiciye erişin ve Değişkenler bölümüne ayarlanmış değerlerle bir veya daha fazla yazı tipi ailesi ve stil değişkeni ekleyin.

Örneğin, varsayılan yazı tipini Arial olarak değiştirmek için aşağıdaki değişkeni tanımlayın:

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

Özel yazı tipini içe aktarma

Bir Google yazı tipini (varsayılan yazı tipi grubuna dahil edilmeyen) veya kendi özel yazı tipinizi içe aktarın, ardından aşağıda açıklandığı gibi stil sayfanızda özel yazı tipine referans verin.

Google yazı tipini içe aktarma

Bir Google yazı tipini içe aktarmak için gelişmiş tema düzenleyiciye erişin ve yazı tipini aşağıda gösterildiği gibi Özel Stiller bölümüne aktarın:

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

Özel yazı tipini içe aktarma

@font-face CSS kuralını kullanarak kendi özel yazı tipinizi içe aktarın. @font-face kuralı; TrueType (TTF), Web Open Font Format (WOFF) ve daha fazlası dahil olmak üzere çeşitli dosya biçimi türlerini destekler.

Kendi özel yazı tipinizi içe aktarmak için:

  1. İsteğe bağlı olarak, Dosya yükleme bölümünde açıklandığı gibi yazı tipi dosyasını öğe yöneticisine yükleyin.

  2. Gelişmiş tema düzenleyiciye erişin ve @font-face kuralını Özel Stiller bölümüne ekleyin. Bu kuralda font-family yazı tipi adını, url yazı tipi dosyasının konumunu (bu durumda öğe yöneticisi), MyCustomFont.tff özel yazı tipi dosyanızın adını ve format yazı tipi biçimini belirtir.

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

Stil sayfanızda özel yazı tipine referans verme

Değişkenler bölümündeki yazı tipi ailesi ve stili değişkenlerinden birinde özel yazı tipine referans verin. Örneğin:

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

Portalda kullanılan logoları aşağıdaki konumlarda özelleştirebilirsiniz:

Logo konumu Varsayılan dosya boyutu
Masaüstü gezinme araç çubuğu 196 x 32 piksel
Mobil gezinme araç çubuğu156 x 32 piksel
Tarayıcı adres çubuğundaki simge (ve diğer konumlar)32 x 32 piksel
Oturum açma sayfası392 x 64 piksel

Masaüstü ve mobil ekranlar için gezinme araç çubuğundaki logoyu özelleştirin. Tarayıcınızın genişliğine bağlı olarak, logonun masaüstü veya mobil sürümünü görebilirsiniz.

Birincil logoyu silemez, yalnızca değiştirebilirsiniz. Mobil ekran için bir logo belirtmezseniz varsayılan olarak birincil logo kullanılır.

Masaüstü ve mobil ekranlarda gezinme araç çubuğunda kullanılan logoyu özelleştirmek için:

  1. Şirket logonuzun kullanıma uygun bir veya daha fazla kopyasını edinin.
    Önerilen boyutlar için önceki tabloya bakın.
  2. Tema düzenleyiciye erişin.
  3. Masaüstü ekranlarındaki üst gezinme araç çubuğundaki logoyu değiştirmek için:
    a. Sağ bölmede Temel Stiller bölümündeki Birincil logo alanının altında simgesini tıklayın.
    b. Yerel dizininizde logonuzun masaüstü sürümünü bulun.
    c. Dosyayı yüklemek için Aç'ı tıklayın.
  4. Mobil ekranlardaki üst gezinme araç çubuğundaki logoyu değiştirmek için:
    a. Sağ bölmede Temel Stiller altında Logo seçenekleri'ni genişletin ve Mobil logo alanının altındaki simgesini tıklayın.
    b. Yerel dizininizde logonuzun mobil sürümüne göz atın.
    c. Dosyayı yüklemek için Aç'ı tıklayın.
  5. Değişikliklerinizi sol bölmede önizlemek için Kaydet'i tıklayın.
  6. Değişiklikleri portalınızda yayınlamak için Yayınla'yı tıklayın. İstendiğinde işlemi onaylayın.

Site simgesini özelleştirme

Web tarayıcısı adres çubuğunda (ve diğer konumlarda) kullanılan favicon'i özelleştirmek için:

  1. Şirket logonuzun, favori simgesi olarak kullanılmaya uygun bir kopyasını edinin.
    Önerilen boyut için önceki tabloya bakın.
  2. Tema düzenleyiciye erişin.
  3. Sağ bölmede Temel Stiller altında Logo seçenekleri'ni genişletin ve Site simgesi alanının altındaki simgesini tıklayın.
  4. Yerel dizininizde logonuzun site simgesi sürümünü bulun.
  5. Dosyayı yüklemek için Aç'ı tıklayın.
  6. Değişikliklerinizi sol bölmede önizlemek için Kaydet'i tıklayın.
  7. Değişiklikleri portalınızda yayınlamak için Yayınla'yı tıklayın. İstendiğinde işlemi onaylayın.

Geliştirici programınızın kayıt ve oturum açma deneyimini yapılandırırken Şirket bilgilerini yönetme bölümünde açıklandığı gibi Oturum Açma sayfasındaki logoyu özelleştirin.

Aşağıda, gezinme araç çubuğunu özelleştirmeyle ilgili bazı kısa ipuçları verilmiştir:

Arka plan resmini özelleştirme

Aşağıdaki görevlerden herhangi birini gerçekleştirerek ana sayfadaki arka plan resmini özelleştirin:

  • home-background.jpg resminin kendi sürümünüzü, aynı adı ve göreli dosya boyutunu (3.000 piksel x 1.996 piksel) kullanarak öğe yöneticisine yükleyin. Daha fazla bilgi için Öğelerinizi yönetme başlıklı makaleyi inceleyin.

  • İleri seviye tema düzenleyiciye erişerek ve Özel Stiller bölümüne ayarlanmış değerlerle aşağıdaki SCSS'yi ekleyerek arka plan resmi dosya adını ve dolgusunu değiştirin: 

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

  • İleri seviye tema düzenleyiciye erişerek ve Özel Stiller bölümüne ayarlanmış değerle birlikte aşağıdaki SCSS'yi ekleyerek portaldaki tüm sayfalara arka plan resmi ekleyin: 

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

Yazı tipini özelleştirme

İleri seviye tema düzenleyiciye erişerek ve Değişkenler bölümünde aşağıdaki yazı tipi değişkenlerinden en az birini ayarlayarak yazı tipini özelleştirin:

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

Örneğin:

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

Ardından, aşağıdaki örnekte gösterildiği gibi belirli bir CSS seçiciye yazı tipini uygulayabilirsiniz:

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

Alternatif olarak, özel yazı tipinde tanımlanan belirli bir yazı tipi düzeyini bir CSS seçiciye uygulayabilirsiniz (aşağıdaki örnekte gösterildiği gibi):

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

Gelişmiş tema düzenleyiciyi kullanarak temayı özelleştirme

Tema değişkenlerini geçersiz kılarak veya doğrudan gelişmiş tema düzenleyicide tema stili öğelerini özelleştirerek temayı özelleştirin.

Tema değişkenlerini geçersiz kılma

Gelişmiş tema düzenleyicinin Değişkenler bölümünde tema değişkenlerini geçersiz kılabilirsiniz. Tema değişkenlerinin listesi için Tema değişkeni referansı başlıklı makaleyi inceleyin.

Örneğin, başlık ve altbilgi gezinme araç çubuklarının yüksekliğini özelleştirmek için gelişmiş tema düzenleyicinin Değişkenler bölümüne sırasıyla aşağıdaki değişkenleri ayarlanmış değerlerle ekleyin:

Diğer örnekler için:

Tema değişkenlerini geçersiz kılmak için:

  1. Tema düzenleyiciye erişin.
  2. Sağ bölmede Gelişmiş'i tıklayın.
  3. Değişkenler'i tıklayın.
  4. Değişken geçersiz kılmalarınızı ekleyin.
    Üstüne yazılabilen değişkenlerin listesi için Tema değişkeni referansı başlıklı makaleyi inceleyin.
  5. Değişikliklerinizi kaydetmek için Kaydet'i tıklayın.
  6. Gelişmiş tema düzenleyiciyi kapatmak için x simgesini tıklayın.
  7. Değişikliklerinizi önizleme bölmesinde görüntüleyin veya portal değişikliklerini tarayıcıda önizlemek için Önizle'yi tıklayın. Not: Tüm sayfalardaki değişiklikleri görüntülemek için önizleme bölmesinde portal gezinme menüsünü tıklayabilirsiniz.
  8. Temanızı yayınlamak için Yayınla'yı tıklayın. Güncellemeyi onaylamanız istenir.

Tema stili öğelerini özelleştirme

Tema stili öğelerini doğrudan gelişmiş tema düzenleyicinin Özel Stiller bölümünden özelleştirebilirsiniz.

Örneğin, portalda uygulama kaydettiğinizde görünen Yeni Uygulama sayfasındaki Oluştur düğmesinin rengini değiştirmek için aşağıdaki tema stili öğesini ayarlanmış bir değerle ekleyin:

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

Ayrıca Arka plan resmini özelleştirme bölümüne bakın.

Tema stili öğelerini özelleştirmek için:

  1. Tema düzenleyiciye erişin.
  2. Sağ bölmede Gelişmiş'i tıklayın.
  3. Özel Stiller'i tıklayın.
  4. Tema stili öğelerinizi ekleyin.
  5. Değişikliklerinizi kaydetmek için Kaydet'i tıklayın.
  6. Gelişmiş tema düzenleyiciyi kapatmak için x simgesini tıklayın.
  7. Değişikliklerinizi önizleme bölmesinde görüntüleyin veya portal değişikliklerini tarayıcıda önizlemek için Önizle'yi tıklayın.
    Not: Tüm sayfalardaki değişiklikleri görüntülemek için önizleme bölmesinde portal gezinme menüsünü tıklayabilirsiniz.
  8. Temanızı yayınlamak için Yayınla'yı tıklayın. Güncellemeyi onaylamanız istenir.

Portal sayfasında tam genişlikli panel oluşturma

Portal sayfasında tam genişlikte bir panel oluşturmak için:

  1. Tema stili öğelerini özelleştirme bölümünde açıklandığı gibi, gelişmiş tema düzenleyicide aşağıdaki tema stili öğelerini ekleyin: 
    .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. Portal sayfası içeriğini, Sayfa düzenleyiciyi kullanarak portal içeriği geliştirme bölümünde açıklandığı gibi aşağıdaki <div> öğesini içerecek şekilde düzenleyin: 
    <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>

Temayı yayınlama

Eklediğiniz tema ve stil özelleştirmelerini canlı portalda yayınlamak için:

  1. Tema düzenleyiciye erişin.
  2. Yayınla'yı tıklayın.

Yayınlanan içeriğinizi canlı portalda görüntülemek için üst gezinme araç çubuğunda Portalı Görüntüle'yi tıklayın.

CSS özgünlük kurallarını anlama

CSS özgüllüğü, tarayıcının çakışma olduğunda CSS stili öğesi beyanlarının önceliğini belirlemek için kullandığı yöntemi tanımlar. CSS özgüllüğü, belirli bir CSS stil öğesi beyanına seçici türüne göre ağırlık uygulanarak hesaplanır. CSS seçici ne kadar spesifik olursa ağırlık o kadar yüksek olur. Örneğin, kimlik özelliği hesaplamada tür seçiciden daha yüksek bir ağırlığa sahiptir.

Örneğin, CSS kodunuzda aşağıdaki stil öğelerini tanımlarsanız div öğesindeki p stil öğesi beyanı, p stil öğesi beyanından daha spesifik olduğu için paragraf öğesi kırmızı renkte olur.

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

Benzer şekilde, CSS kodunuzda aşağıdaki stil öğesi bildirimlerini tanımlarsanız <div class="test"></div> etiketleri içine alınan tüm metinler mavi renkte olur. Bunun nedeni, div öğesindeki id özelliği stil bildiriminin div stil öğesi bildiriminden daha spesifik olmasıdır.

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

Aynı düzeyde spesifikliğe sahip stil öğesi beyanları için tanımlanan son stil öğesi beyanı önceliklidir. Örneğin, aşağıdaki stil öğesi beyanlarının sırası göz önüne alındığında paragraf öğesi mavi renkte olur. 

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

Tema değişkeni referansı

Aşağıdaki bölümlerde, Tema değişkenlerini geçersiz kılma bölümünde açıklandığı gibi, gelişmiş tema düzenleyicinin Değişkenler bölümünde geçersiz kılınabilen değişkenler özetlenmiştir.

Temel tema değişkeni

Site genelinde kullanılan temel temanın ön plan renklerini özelleştirin. Geçerli değerler light ve dark'dir.

$base-theme: light;

Renk paleti değişkenleri

Sırasıyla birincil, ikincil, vurgu ve uyarı mesajı renklerini değiştirmek için aşağıdaki değişkenleri değiştirerek renk paletini özelleştirin. Renk paleti kategorileri hakkında başlıklı makaleyi inceleyin.

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

Sayısal değerler sırasıyla varsayılan, daha açık ve daha koyu öğeler için gölgelendirme değerlerini gösterir. Önceden tanımlanmış renk değişkenlerini tanımlamak için malzeme temalandırma SCSS dosyasının (material-theming.scss) içeriğini görüntüleyin.

Örneğin, birincil renk paletini aşağıdaki gibi yeşil olarak değiştirebilirsiniz:

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

Temel temada tanımlanan varsayılan renk grubunun yalnızca gölgelendirme değerlerini özelleştirmek için ayarlanmış gölgelendirme değerleriyle aşağıdaki kodu ekleyin:

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

Yazı tipi ailesi ve stil değişkenleri

Yazı tipi ailesini ve stillerini özelleştirin.

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

Daha ayrıntılı kontrol için aşağıdaki örnekte gösterildiği gibi kendi özel yazı tipinizi belirtin:

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

Yazı biçimi değişkenleri

Açısal materyal yazı tipini özelleştirin. Her yazı tipi düzeyi bir yazı tipi boyutu, satır yüksekliği ve yazı tipi kalınlığı tanımlar.

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