Menyesuaikan tema

Halaman ini berlaku untuk Apigee dan Apigee hybrid.

Lihat dokumentasi Apigee Edge.

Tema terdiri dari lembar gaya global yang memberikan tampilan dan nuansa yang seragam untuk semua halaman di portal Anda. Tujuan tema adalah memungkinkan Anda mengubah tampilan dan nuansa di semua halaman portal sekaligus.

Anda dapat menyesuaikan, melihat pratinjau, dan memublikasikan tema, seperti yang dijelaskan di bagian berikut.

Menjelajahi editor tema

Sesuaikan, lihat pratinjau, dan publikasikan tema untuk portal Anda di editor tema.

Untuk mengakses editor tema:

• Pilih Publish > Portals di toolbar navigasi samping, pilih portal Anda, lalu klik Theme di halaman landing.
• Saat mengedit portal, klik Tema di menu drop-down di toolbar navigasi atas.

Seperti yang ditandai pada gambar sebelumnya, editor tema memungkinkan Anda untuk:

• Sesuaikan gaya dasar dengan cepat menggunakan editor tema gaya dasar, termasuk elemen berikut:
  • Palet warna
  • Jenis dan gaya font
  • Logo
• Ganti variabel tema atau sesuaikan elemen gaya tema di editor tema lanjutan, termasuk (tetapi tidak terbatas pada) elemen berikut:
  • Palet warna
  • Jenis dan gaya font
  • Toolbar navigasi
  • Gambar latar
  • Tipografi
• Melihat pratinjau perubahan tema
• Melihat pratinjau portal di browser
• Memublikasikan tema ke portal aktif

Tentang tema dasar

Sebagian besar aturan gaya tema dasar yang menentukan tampilan situs didasarkan pada desain material sudut. Desain material Angular menggunakan tata letak berbasis petak serta komponen dan gaya visual yang konsisten untuk memberikan pengalaman interaktif terpadu.

Aturan gaya ditentukan menggunakan Sassy Cascading Style Sheet (SCSS). SCSS adalah superset dari Cascading Style Sheets (CSS), yang menawarkan keunggulan berikut:

• Variabel global yang dapat digunakan kembali di seluruh sheet gaya.
• Aturan bertingkat untuk menghemat waktu pengembangan lembar gaya.
• Kemampuan untuk membuat mixin dan fungsi

Contoh:

// 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 dikompilasi dan dikonversi menjadi CSS biasa sebelum konten dirender di halaman web.

Stylesheet material angular, file SCSS tema material (material-theming.scss), digunakan oleh tema dasar. Stylesheet ini mendeklarasikan variabel, fungsi, dan mixin yang dapat diganti menggunakan variabel kustom dan bagian SCSS, seperti yang dijelaskan dalam Menyesuaikan tema menggunakan editor tema lanjutan.

Berdasarkan pilihan tema UI Anda, sejumlah variabel SCSS dideklarasikan yang menentukan gaya tipografi, warna, dan tata letak serta digunakan oleh stylesheet dasar. Anda dapat mengganti variabel yang tercantum dalam referensi variabel tema.

Catatan: Sebagian besar gaya visual dokumentasi referensi API ditentukan di luar tema dasar. Apigee merekomendasikan agar gaya visual dokumentasi referensi API tidak diubah.

Menyesuaikan palet warna

Sesuaikan palet warna menggunakan editor gaya dasar atau dengan mengganti variabel tema.

Tentang kategori palet warna

Definisi palet warna untuk portal terintegrasi dikelompokkan ke dalam kategori berikut, yang ditentukan menggunakan gaya visual warna desain material di tema dasar.

Kategori	Gaya
Utama	Toolbar navigasi, judul, header kartu, dan tombol
Sekunder	Teks <pre> dan <code>
Aksen	Navigasi, link, dan tombol beraksen
Peringatkan	Peringatan dan error

Menyesuaikan palet warna menggunakan editor gaya dasar

Sesuaikan palet warna utama dan aksen dengan cepat menggunakan editor gaya dasar.

Catatan: Warna aksen digunakan untuk elemen navigasi, seperti tombol dan sorotan. Hindari penggunaan warna putih atau warna lain yang sangat terang untuk warna aksen karena akan berdampak negatif pada visibilitas navigasi.

Untuk menyesuaikan palet warna menggunakan editor gaya dasar:

1. Akses editor tema.
2. Untuk menyesuaikan warna primer, di menu drop-down Warna primer, pilih warna atau klik Kustom dan masukkan nilai warna heksadesimal kustom di kotak teks.
3. Untuk menyesuaikan warna aksen, di menu drop-down Warna aksen, pilih warna atau klik Kustom dan masukkan nilai warna heksadesimal kustom di kotak teks.
4. Klik Simpan untuk menyimpan perubahan.
5. Lihat perubahan Anda di panel pratinjau atau klik Pratinjau untuk melihat pratinjau perubahan portal di browser.
   Catatan: Anda dapat mengklik navigasi portal di panel pratinjau untuk melihat perubahan di semua halaman.
6. Klik Publikasikan untuk memublikasikan tema Anda. Anda akan diminta untuk mengonfirmasi pembaruan.

Menyesuaikan palet warna dengan mengganti variabel tema

Untuk menyesuaikan palet warna dengan mengganti variabel tema, akses editor tema lanjutan dan sertakan satu atau beberapa variabel berikut dengan nilai yang disesuaikan di bagian Variabel untuk mengubah warna pesan utama, sekunder, aksen, atau peringatan. Lihat Tentang kategori palet warna.

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

Catatan: Warna aksen digunakan untuk elemen navigasi, seperti tombol dan sorotan. Hindari penggunaan warna putih atau warna lain yang sangat terang untuk warna aksen karena akan berdampak negatif pada visibilitas navigasi.

Lihat konten file SCSS tema material yang diimpor (material-theming.scss) untuk mengidentifikasi variabel warna yang telah ditetapkan (seperti $mat-grey). Nilai numerik menunjukkan nilai bayangan untuk elemen default, lebih terang, dan lebih gelap.

Atau, Anda dapat membuat variabel warna Anda sendiri. Contoh:

Catatan: Saat membuat variabel warna sendiri, Anda harus menentukan setelan warna untuk semua nilai numerik yang tercantum di bawah. Jika tidak, halaman portal mungkin tidak dimuat dengan benar.

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

Kemudian, gunakan untuk mengubah palet warna, seperti yang ditunjukkan pada contoh berikut:

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

Menyesuaikan jenis dan gaya font

Sesuaikan jenis dan gaya font menggunakan editor gaya dasar atau dengan mengganti variabel tema. Anda juga dapat mengimpor font kustom.

Menyesuaikan jenis dan gaya font menggunakan editor gaya dasar

Sesuaikan jenis dan gaya font dengan cepat menggunakan editor gaya dasar, seperti yang ditunjukkan pada gambar berikut.

Untuk menyesuaikan jenis dan gaya font menggunakan editor gaya dasar:

1. Akses editor tema.
2. Untuk mengubah jenis font, pilih nilai di drop-down Font.
3. Untuk mengubah gaya font, luaskan bagian Gaya font dan edit gaya, sesuai kebutuhan, termasuk ukuran font, tinggi baris, dan ketebalan font untuk elemen HTML yang diinginkan.
4. Klik Simpan untuk menyimpan perubahan.
5. Lihat perubahan Anda di panel pratinjau atau klik Pratinjau untuk melihat pratinjau perubahan portal di browser.
   Catatan: Anda dapat mengklik navigasi portal di panel pratinjau untuk melihat perubahan di semua halaman.
6. Klik Publikasikan untuk memublikasikan tema Anda. Anda akan diminta untuk mengonfirmasi pembaruan.

Menyesuaikan jenis dan gaya font dengan mengganti variabel tema

Untuk menyesuaikan jenis dan gaya font dengan mengganti variabel tema, akses editor tema lanjutan dan sertakan satu atau beberapa variabel jenis dan gaya font dengan nilai yang disesuaikan di bagian Variabel.

Misalnya, untuk mengubah font default menjadi Arial, tentukan variabel berikut:

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

Mengimpor font kustom

Impor font Google (tidak disertakan dalam kumpulan font default) atau font kustom Anda sendiri, lalu referensikan font kustom di sheet gaya, seperti yang dijelaskan di bawah.

Mengimpor font Google

Untuk mengimpor font Google, akses editor tema lanjutan dan impor font di bagian Gaya Kustom, seperti yang ditunjukkan di bawah ini:

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

Mengimpor font kustom

Impor font kustom Anda sendiri menggunakan aturan CSS @font-face. Aturan @font-face mendukung sejumlah jenis format file yang berbeda, termasuk TrueType (TTF), Web Open Font Format (WOFF), dan lainnya.

Untuk mengimpor font kustom Anda sendiri:

1. Secara opsional, upload file font ke pengelola aset, seperti yang dijelaskan di Mengupload file.

2. Akses editor tema lanjutan dan tambahkan aturan @font-face ke bagian Gaya Kustom, dengan font-family menentukan nama font, url menentukan lokasi file font (dalam hal ini, pengelola aset), MyCustomFont.tff adalah nama file font kustom Anda, dan format menentukan format font.

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

Mereferensikan font kustom di lembar gaya Anda

Referensikan font kustom di salah satu variabel jenis dan gaya font di bagian Variabel. Contoh:

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

Menyesuaikan logo

Anda dapat menyesuaikan logo yang digunakan di portal di lokasi berikut:

Lokasi logo	Ukuran file default
Toolbar navigasi desktop	196x32 piksel
Toolbar navigasi seluler	156x32 piksel
Favicon di kolom URL browser (dan lokasi lainnya)	32x32 piksel
Halaman Login	392x64 piksel

Menyesuaikan logo di toolbar navigasi untuk tampilan desktop dan seluler

Menyesuaikan logo di toolbar navigasi untuk tampilan desktop dan seluler. Bergantung pada lebar browser, Anda mungkin melihat logo versi desktop atau seluler.

Anda tidak dapat menghapus logo utama, tetapi hanya dapat menggantinya. Jika Anda tidak menentukan logo untuk tampilan seluler, logo utama akan digunakan secara default.

Catatan: Jika ukuran logo desktop dan seluler Anda berbeda dengan ukuran default, ukurannya akan otomatis diubah menjadi 60% dari tinggi toolbar navigasi. Anda dapat menyesuaikan tinggi toolbar navigasi, seperti yang dijelaskan dalam Menyesuaikan toolbar navigasi.

Untuk menyesuaikan logo yang digunakan di toolbar navigasi untuk tampilan desktop dan seluler:

1. Dapatkan satu atau beberapa salinan logo perusahaan Anda yang akan sesuai untuk digunakan.
   Lihat tabel sebelumnya untuk mengetahui ukuran yang direkomendasikan.
2. Akses editor tema.
3. Untuk mengganti logo di toolbar navigasi atas pada layar desktop:
   a. Di bagian Gaya Dasar di panel kanan, klik di bagian kolom Logo utama.
   b. Cari logo versi desktop di direktori lokal Anda.
   c. Klik Buka untuk mengupload file.
4. Untuk mengganti logo di toolbar navigasi atas pada layar perangkat seluler:
   a. Di bagian Gaya Dasar di panel kanan, luaskan Opsi logo dan klik di bagian kolom Logo seluler.
   b. Cari logo versi seluler di direktori lokal Anda.
   c. Klik Buka untuk mengupload file.
5. Klik Simpan untuk melihat pratinjau perubahan di panel kiri.
6. Klik Publikasikan untuk memublikasikan perubahan pada portal Anda. Konfirmasi operasi saat diminta.

Menyesuaikan favicon

Untuk menyesuaikan ikon situs yang digunakan di kolom URL browser web (dan lokasi lainnya:

1. Dapatkan salinan logo perusahaan Anda yang akan cocok digunakan sebagai favicon.
   Lihat tabel sebelumnya untuk mengetahui ukuran yang direkomendasikan.
2. Akses editor tema.
3. Di bagian Gaya Dasar di panel kanan, luaskan Opsi logo, lalu klik di bagian kolom Favicon.
4. Cari versi favicon logo Anda di direktori lokal.
5. Klik Buka untuk mengupload file.
6. Klik Simpan untuk melihat pratinjau perubahan di panel kiri.
7. Klik Publikasikan untuk memublikasikan perubahan pada portal Anda. Konfirmasi operasi saat diminta.

Menyesuaikan logo di halaman Login

Sesuaikan logo di halaman Login saat mengonfigurasi pengalaman pendaftaran dan login untuk program developer Anda, seperti yang dijelaskan dalam Mengelola informasi perusahaan.

Menyesuaikan toolbar navigasi

Berikut ini beberapa tips cepat untuk menyesuaikan toolbar navigasi:

• Sesuaikan warna toolbar navigasi di header dan footer dengan mengubah warna utama, seperti yang dijelaskan di Menyesuaikan palet warna.
• Sesuaikan ukuran dan gaya font item menu di toolbar navigasi di header dan footer dengan mengubah gaya Font dan Tombol, seperti yang dijelaskan dalam Menyesuaikan jenis dan gaya font.
• Sesuaikan tinggi toolbar navigasi header dengan mengakses editor tema lanjutan dan sertakan variabel berikut dengan nilai yang disesuaikan di bagian Variabel: $layout-header-height: 64px;
• Sesuaikan tinggi toolbar navigasi footer dengan mengakses editor tema lanjutan dan sertakan variabel berikut dengan nilai yang disesuaikan di bagian Variabel: $layout-footer-height: 44px;
• Menyesuaikan logo di toolbar navigasi untuk layar desktop dan seluler.

Menyesuaikan gambar latar belakang

Sesuaikan gambar latar belakang di halaman beranda dengan melakukan salah satu tugas berikut:

• Upload versi gambar home-background.jpg Anda sendiri ke pengelola aset menggunakan nama dan ukuran file relatif yang sama (3000 piksel x 1996 piksel). Untuk mengetahui informasi selengkapnya, lihat Mengelola aset.

• Ubah nama file gambar latar belakang dan padding-nya dengan mengakses editor tema lanjutan dan menyertakan SCSS berikut dengan nilai yang disesuaikan di bagian Gaya Kustom:

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

• Tambahkan gambar latar ke semua halaman di portal dengan mengakses editor tema lanjutan dan menyertakan SCSS berikut dengan nilai yang disesuaikan di bagian Gaya Kustom:

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

Menyesuaikan tipografi

Sesuaikan tipografi dengan mengakses editor tema lanjutan dan menyesuaikan nilai untuk satu atau beberapa variabel tipografi berikut di bagian Variables:

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

Contoh:

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

Kemudian, Anda dapat menerapkan tipografi ke pemilih CSS tertentu, seperti yang ditunjukkan dalam contoh berikut:

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

Atau, Anda dapat menerapkan tingkat tipografi tertentu yang ditentukan dalam tipografi kustom ke pemilih CSS, seperti yang ditunjukkan dalam contoh berikut:

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

Menyesuaikan tema menggunakan editor tema lanjutan

Sesuaikan tema dengan mengganti variabel tema atau dengan menyesuaikan elemen gaya tema langsung di editor tema lanjutan.

Catatan: Penyesuaian gaya yang berlaku dapat dipengaruhi oleh aturan kekhususan CSS, seperti yang dijelaskan dalam Memahami aturan kekhususan CSS.

Mengganti variabel tema

Ganti variabel tema di bagian Variables pada editor tema lanjutan. Untuk mengetahui daftar variabel tema, lihat Referensi variabel tema.

Misalnya, untuk menyesuaikan tinggi toolbar navigasi header dan footer, sertakan variabel berikut dengan nilai yang disesuaikan di bagian Variables pada editor tema lanjutan:

Untuk contoh tambahan, lihat:

• Menyesuaikan palet warna dengan mengganti variabel tema
• Menyesuaikan jenis dan gaya font dengan mengganti variabel tema

Untuk mengganti variabel tema:

1. Akses editor tema.
2. Di panel kanan, klik Lanjutan.
3. Klik Variabel.
4. Tambahkan penggantian variabel Anda.
   Untuk mengetahui daftar variabel yang dapat diganti, lihat Referensi variabel tema.
5. Klik Simpan untuk menyimpan perubahan.
6. Klik x untuk menutup editor tema lanjutan.
7. Lihat perubahan Anda di panel pratinjau atau klik Pratinjau untuk melihat pratinjau perubahan portal di browser. Catatan: Anda dapat mengklik navigasi portal di panel pratinjau untuk melihat perubahan di semua halaman.
8. Klik Publikasikan untuk memublikasikan tema Anda. Anda akan diminta untuk mengonfirmasi pembaruan.

Menyesuaikan elemen gaya tema

Sesuaikan elemen gaya tema langsung di bagian Gaya Kustom pada editor tema lanjutan.

Misalnya, untuk mengubah warna tombol Buat di halaman Aplikasi Baru yang muncul saat mendaftarkan aplikasi di portal, sertakan elemen gaya tema berikut dengan nilai yang disesuaikan:

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

Lihat juga Menyesuaikan gambar latar.

Catatan:

• Semua elemen gaya SCSS didukung.
• Saat menyesuaikan tema, pertimbangkan bahwa update mendatang pada tema dasar dapat menyebabkan hasil yang tidak terduga.

Untuk menyesuaikan elemen gaya tema:

1. Akses editor tema.
2. Di panel kanan, klik Lanjutan.
3. Klik Gaya Kustom.
4. Tambahkan elemen gaya tema Anda.
5. Klik Simpan untuk menyimpan perubahan.
6. Tutup x untuk menutup editor tema lanjutan.
7. Lihat perubahan Anda di panel pratinjau atau klik Pratinjau untuk melihat pratinjau perubahan portal di browser.
   Catatan: Anda dapat mengklik navigasi portal di panel pratinjau untuk melihat perubahan di semua halaman.
8. Klik Publikasikan untuk memublikasikan tema Anda. Anda akan diminta untuk mengonfirmasi pembaruan.

Membuat panel lebar penuh di halaman portal

Untuk membuat panel lebar penuh di halaman portal:

1. Tambahkan elemen gaya tema berikut di editor tema lanjutan, seperti yang dijelaskan di Menyesuaikan elemen gaya tema:

   .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. Edit konten halaman portal untuk menyertakan elemen <div> berikut, seperti yang dijelaskan dalam Mengembangkan konten portal menggunakan editor halaman:

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

Memublikasikan tema

Catatan: Apigee merekomendasikan agar Anda melihat pratinjau semua konten di portal sebelum memublikasikan ke portal aktif.

Untuk memublikasikan penyesuaian tema dan gaya yang telah Anda tambahkan ke portal aktif:

1. Akses editor tema.
2. Klik Publikasikan.

Untuk melihat konten yang dipublikasikan di portal aktif, klik Lihat Portal di toolbar navigasi atas.

Memahami aturan kekhususan CSS

Catatan: Penggunaan aturan !important pada deklarasi elemen gaya untuk mengganti deklarasi lain dianggap sebagai praktik yang buruk dan tidak direkomendasikan. Aturan !important memengaruhi aturan CSS yang bersifat berurutan dan spesifik, serta dapat mempersulit proses debug deklarasi elemen gaya Anda.

Spesifisitas CSS menjelaskan metode yang digunakan oleh browser untuk menentukan prioritas deklarasi elemen gaya CSS saat konflik muncul. Spesifisitas CSS dihitung dengan menerapkan bobot ke deklarasi elemen gaya CSS tertentu berdasarkan jenis pemilihnya. Makin spesifik pemilih CSS, makin tinggi bobotnya. Misalnya, atribut ID akan diberi bobot yang lebih tinggi dalam penghitungan daripada pemilih jenis.

Misalnya, jika Anda menentukan elemen gaya berikut dalam kode CSS, elemen paragraf akan berwarna merah karena deklarasi elemen gaya p dalam elemen div lebih spesifik daripada deklarasi elemen gaya p.

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

Demikian pula, jika Anda menentukan deklarasi elemen gaya berikut dalam kode CSS, teks apa pun yang diapit dalam tag <div class="test"></div> akan berwarna biru karena deklarasi gaya atribut id dalam elemen div lebih spesifik daripada deklarasi elemen gaya div.

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

Untuk deklarasi elemen gaya dengan kekhususan yang sama, deklarasi elemen gaya terakhir yang ditentukan akan lebih diutamakan. Misalnya, dengan urutan deklarasi elemen gaya berikut, elemen paragraf akan berwarna biru.

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

Referensi variabel tema

Bagian berikut merangkum variabel yang dapat diganti di bagian Variabel pada editor tema lanjutan, seperti yang dijelaskan di Mengganti variabel tema.

• Variabel tema dasar
• Variabel palet warna
• Variabel gaya dan jenis font
• Variabel tipografi

Variabel tema dasar

Sesuaikan warna latar depan tema dasar yang digunakan di seluruh situs. Nilai yang valid adalah light dan dark.

$base-theme: light;

Variabel palet warna

Sesuaikan palet warna dengan mengubah variabel berikut untuk mengubah warna pesan utama, sekunder, aksen, dan peringatan. Lihat Tentang kategori palet warna.

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

Nilai numerik menunjukkan nilai bayangan untuk elemen default, lebih terang, dan lebih gelap. Lihat konten file SCSS tema material (material-theming.scss) untuk mengidentifikasi variabel warna standar.

Misalnya, Anda dapat mengubah palet warna primer menjadi hijau, sebagai berikut:

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

Untuk hanya menyesuaikan nilai bayangan untuk kumpulan warna default yang ditentukan dalam tema dasar, sertakan kode berikut dengan nilai bayangan yang disesuaikan:

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

Variabel gaya dan jenis font

Sesuaikan jenis dan gaya font.

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

Tentukan tipografi kustom Anda sendiri untuk kontrol yang lebih terperinci, seperti yang ditunjukkan pada contoh berikut:

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

Variabel tipografi

Sesuaikan tipografi material sudut. Setiap tingkat tipografi menentukan ukuran font, tinggi baris, dan ketebalan font.

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