Penggunaan Warna Otomatis pada Template Flat UI Pro

Rafiqi, S.Kom.
Desember 03, 2024
2
Cara Penggunaan Warna Otomatis pada Template

Dalam dunia desain web, penggunaan warna otomatis dengan variabel CSS mempermudah proses pengaturan dan konsistensi desain pada sebuah template. Artikel ini akan membahas cara menggunakan warna otomatis pada template dengan palet warna berikut:

  • Warna Background Muda #EEE2CC
  • Warna Background Tua #DACEB8
  • Warna Teks Tua #704214
  • Warna Teks Muda #A4835F
  • Warna SVG #704214

Langkah-Langkah Implementasi

  1. Pendefinisian Variabel CSS

    Variabel CSS mempermudah pengaturan warna karena dapat digunakan kembali di berbagai elemen tanpa harus menulis ulang kode, kode dibawah ini sudah ter-include didalam tema anda.

    :root {
    --background-color-muda: #EEE2CC;
    --background-color-tua: #DACEB8;
    --text-color-tua: #704214;
    --text-color-muda: #A4835F;
    --svg-fill-color: #704214;
}

  2. Contoh Struktur CSS
    Jika anda ingin warna tema menjadi otomatis, anda cukup menerapkannya seperti dibawah ini.

    body {
    background-color: var(--background-color-muda);
    color: var(--text-color-tua);
}

h1, h2, h3 {
    color: var(--text-color-tua);
}

p {
    color: var(--text-color-muda);
}

.highlight {
    background-color: var(--background-color-tua);
}

svg {
    fill: var(--svg-fill-color);
}

  3. Contoh Struktur HTML
    Berikut contoh bagaimana variabel warna ini diterapkan pada elemen-elemen HTML.

    <!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Warna Otomatis</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Template Warna Otomatis</h1>
    </header>
    <section>
        <p>Ini adalah contoh teks dengan warna otomatis menggunakan variabel CSS.</p>
        <p class="highlight">Paragraf ini menggunakan warna latar tua.</p>
    </section>
    <footer>
        <svg width="50" height="50">
            <circle cx="25" cy="25" r="20" />
        </svg>
    </footer>
</body>
</html>

  4. Keuntungan Menggunakan Variabel Warna

    • Konsistensi: Semua elemen yang menggunakan variabel akan diperbarui secara otomatis ketika nilai variabel diubah.
    • Kemudahan Pemeliharaan: Tidak perlu mencari kode warna di berbagai tempat dalam file CSS.
    • Efisiensi: Proses pengembangan lebih cepat karena variabel mempersingkat kode.

Penutup

Dengan pendekatan ini, Anda dapat menciptakan template yang lebih fleksibel dan mudah diatur. Pastikan untuk memilih palet warna yang harmonis agar desain Anda tetap menarik dan profesional. Semoga artikel ini bermanfaat untuk meningkatkan kualitas desain Anda!

Rafiqi, S.Kom.