Temanızı özelleştirin

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

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

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

Tema düzenleyiciyi keşfedin

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ında Temalar'ı tıklayın.
  • Bir portalı düzenlerken, üst gezinme araç çubuğunda yer alan açılır menüde Temalar'ı tıklayın.

Tema düzenleyici

Önceki şekilde gösterildiği gibi, tema düzenleyici şunları yapmanıza olanak tanır:

Temel tema hakkında

Sitenin görünümünü tanımlayan temel tema stili kurallarının çoğu açısal malzeme tasarımına dayanır. Açılı malzeme tasarımı, birleşik bir etkileşimli deneyim sağlamak için ızgara tabanlı düzenler ve tutarlı bileşenler ile stil kullanır.

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

  • Stil sayfasında yeniden kullanılabilen genel değişkenler.
  • Stil sayfası geliştirme süresinden tasarruf etmenizi sağlayan iç içe yerleştirilmiş kurallar.
  • Karışım ve fonksiyon oluşturabilme

Ö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 düz eski CSS'ye dönüştürülür.

Temel tema, malzeme teması SCSS dosyası (material-theming.scss) adlı açılı bir malzeme stil sayfası kullanır. Bu stil sayfası, Gelişmiş tema düzenleyiciyi kullanarak temayı özelleştirme bölümünde açıklandığı gibi, özel değişkenler ve SCSS bölümleri kullanılarak geçersiz kılınabilecek değişkenleri, işlevleri ve mix'leri bildirir.

Kullanıcı arayüzü teması seçimlerinize göre tipografi, renk, düzen stillerini tanımlayan ve temel stil sayfası tarafından kullanılan bir dizi SCSS değişkeni bildirilir. Tema değişkeni referansında listelenen değişkenleri geçersiz kılabilirsiniz.

Renk paletini özelleştirin

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ı, aşağıdaki kategorilerde gruplandırılmıştır. Bu kategoriler, temel temada malzeme tasarımı renk stili kullanılarak tanımlanmıştır.

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

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

Temel stil düzenleyicisini kullanarak birincil ve aksan renk paletlerini hızlı bir şekilde özelleştirin.

Temel stil düzenleyicisini 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 Aksan rengi 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.
  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 bir tarayıcıda önizlemek için Önizle'yi tıklayın.
    Not: Tüm sayfalardaki değişiklikleri görmek için önizleme bölmesinde portal gezinme seçeneklerini 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 birincil, ikincil, vurgu veya uyarı mesajı renklerini değiştirmek için sırasıyla 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 konusuna bakın.

$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 teması 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 koyu öğeler için gölgelendirme değerlerini gösterir.

Alternatif olarak, 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 bu renk paletini kullanarak renk paletini değiştirin:

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

Yazı tipi ailesini ve stilleri özelleştirme

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

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

Aşağıdaki resimde gösterildiği gibi, temel stil düzenleyiciyi kullanarak yazı tipi ailesini ve stilleri hızlı bir şekilde ö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 menüsünden bir değer seçin.
  3. Yazı tipi stillerini değiştirmek için Yazı tipi stilleri bölümünü genişletin ve istenen HTML öğeleri için yazı tipi boyutu, satır yüksekliği ve yazı tipi genişliği de 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 bir tarayıcıda önizlemek için Önizle'yi tıklayın.
    Not: Tüm sayfalardaki değişiklikleri görmek için önizleme bölmesinde portal gezinme seçeneklerini 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ştirin

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ünde düzenlenmiş 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 değildir) veya kendi özel yazı tipinizi içe aktarın, ardından stil sayfanızda özel yazı tipine aşağıda açıklandığı gibi bakın.

Google yazı tipini içe aktarın

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ünde içe 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) gibi bir dizi farklı dosya biçimi türünü destekler.

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

  1. İsteğe bağlı olarak, yazı tipi dosyasını Dosya yükleme bölümünde açıklandığı gibi öğ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. Burada 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ızdaki özel yazı tipine referans verme

Değişkenler bölümündeki yazı tipi ailesi ve stil değişkenlerinden birindeki ö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 site işareti (ve diğer konumlar)32 x 32 piksel
Oturum Açma sayfası392 x 64 piksel

Masaüstü ve mobil cihaz ekranlarında logoyu gezinme araç çubuğunda ö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 silemezsiniz, yalnızca değiştirebilirsiniz. Mobil ekran için logo belirtmezseniz varsayılan olarak birincil logo kullanılır.

Masaüstü ve mobil cihaz ekranlarının 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 tabloyu inceleyin.
  2. Tema düzenleyiciye erişin.
  3. Masaüstü ekranlarda üst gezinme araç çubuğundaki logoyu değiştirmek için:
    a. Sağ bölmedeki Temel Stiller'in altında, Birincil logo alanının altındaki 'yi tıklayın.
    b. Yerel dizininizde logonuzun masaüstü sürümüne göz atın.
    c. Dosyayı yüklemek için Aç'ı tıklayın.
  4. Mobil ekranlarda üst gezinme araç çubuğundaki logoyu değiştirmek için:
    a. Sağ bölmedeki Temel Stiller'in altında, Logo seçenekleri'ni genişletin ve Mobil logo alanının altındaki 'yi 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ının adres çubuğunda (ve diğer konumlarda) kullanılan site simgesini özelleştirmek için:

  1. Site simgesi olarak kullanılmaya uygun şirket logonuzun bir kopyasını alın.
    Önerilen boyut için önceki tabloya bakın.
  2. Tema düzenleyiciye erişin.
  3. Sağ bölmedeki Temel Stiller'in altındaki 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 için kayıt ve oturum açma deneyimini yapılandırırken Oturum Açma sayfasındaki logoyu Şirket bilgilerini yönetme bölümünde açıklandığı şekilde özelleştirin.

Aşağıda, gezinme araç çubuğunu özelleştirmek için bazı hızlı ipuçları verilmiştir:

Arka plan resmini özelleştirme

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

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

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

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

  • Gelişmiş tema düzenleyiciye erişerek ve aşağıdaki SCSS'yi Özel Stiller bölümüne düzenlenmiş değerle ekleyerek portaldaki tüm sayfalara bir arka plan resmi ekleyin: 

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

Tipografiyi özelleştirme

Gelişmiş tema düzenleyiciye erişerek ve Değişkenler bölümünde aşağıdaki tipografi değişkenlerinden birinin veya birkaçının değerlerini 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, tipografiyi belirli bir CSS seçiciye uygulayabilirsiniz:

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

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

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

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

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

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

Gelişmiş tema düzenleyicisinin Değişkenler bölümünde tema değişkenlerini geçersiz kılın. Tema değişkenleri listesi için Tema değişkeni referansı bölümüne bakın.

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

Diğer örnekler için bkz.

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ılma işlemlerinizi ekleyin.
    Geçersiz kılınabilecek değişkenlerin listesi için Tema değişkeni referansı bölümüne bakın.
  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 bir tarayıcıda önizlemek için Önizle'yi tıklayın. Not: Tüm sayfalardaki değişiklikleri görmek için önizleme bölmesinde portal gezinmenizi tıklayabilirsiniz.
  8. Temanızı yayınlamak için Yayınla'yı tıklayın. Güncellemeyi onaylamanız istenir.

Tema stilindeki öğeleri özelleştirme

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

Örneğin, portala uygulamalar kaydederken görünen Yeni Uygulama sayfasında Oluştur düğmesinin rengini değiştirmek için ayarlanmış bir değere sahip aşağıdaki tema stili öğesini ekleyin:

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

Ayrıca bkz. Arka plan resmini özelleştirme.

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 kapatın.
  7. Değişikliklerinizi önizleme bölmesinde görüntüleyin veya portal değişikliklerini bir tarayıcıda önizlemek için Önizle'yi tıklayın.
    Not: Tüm sayfalardaki değişiklikleri görmek için önizleme bölmesinde portal gezinme seçeneklerini 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şlikte panel oluşturma

Bir portal sayfasında tam genişlikte panel oluşturmak için:

  1. Tema stili öğelerini özelleştirme bölümünde açıklandığı gibi, gelişmiş tema düzenleyiciye 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ığı şekilde, 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 spesifiklik kurallarını anlama

CSS belirginliği, çakışmalar ortaya çıktığında CSS stil öğesi bildirimlerinin önceliğini belirlemek için tarayıcı tarafından kullanılan yöntemi ifade eder. CSS belirginliği, belirli bir CSS stil öğesi bildirimine seçici türüne göre ağırlık uygulanarak hesaplanır. CSS seçici ne kadar spesifik olursa ağırlık da o kadar yüksek olur. Örneğin, bir kimlik özelliğine hesaplamada tür seçiciden daha yüksek bir ağırlık verilir.

Örneğin, CSS kodunuzda aşağıdaki stil öğelerini tanımlarsanız bir div öğesi içindeki p stil öğesi bildirimi, p stil öğesi bildiriminden daha spesifik olduğu için paragraf öğesi kırmızı renkli olur.

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

Benzer şekilde, CSS kodunuzda aşağıdaki stil öğesi bildirimlerini tanımlarsanız bir div öğesindeki kimlik özelliği stil bildirimi, div stil öğesi bildiriminden daha spesifik olduğu için <div class="test"></div> etiketleri içine alınan metinler mavi renkte olur.

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

Aynı belirliliğe sahip stil öğesi bildirimleri için tanımlanan son stil öğesi bildirimi öncelikli olur. Örneğin, aşağıdaki stil öğesi bildirimlerinin sırası göz önünde bulundurulduğunda, 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ınabilecek değişkenler özetlenmektedir.

Temel tema değişkeni

Sitede 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 konusuna bakın.

$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 koyu öğeler için gölgelendirme değerlerini gösterir. Önceden tanımlanmış renk değişkenlerini tanımlamak için malzeme teması 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);

Yalnızca temel temada tanımlanan varsayılan renk grubunun gölgelendirme değerlerini özelleştirmek için aşağıdaki kodu ayarlanmış gölgelendirme değerleriyle 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 stilleri ö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;

Aşağıdaki örnekte gösterildiği gibi daha ayrıntılı denetim için kendi özel yazı tipinizi belirleyin:

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

Tipografi değişkenleri

Açısal malzeme yazı biçimini özelleştirin. Her tipografi düzeyinde bir yazı tipi boyutu, satır yüksekliği ve yazı tipi kalınlığı tanımlanır.

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