Mengatur Global Colors di Theme Settings (WordPress Theme)
Cara mengatur Color Scheme, Primary, Secondary, Accent, background, teks, link, dan border di section Global Colors Theme Settings.
Di section Global Colors, Anda menentukan palet warna yang dipakai tema secara global: Light/Dark Mode, warna brand (primary, secondary, accent), background, warna teks, link, sampai border. Begitu disimpan, warna-warna ini akan dipakai ulang oleh komponen tema di banyak halaman.
Gunakan panduan ini kalau Anda ingin menyamakan warna tombol, link, harga produk, badge promo, dan background tanpa perlu mengedit CSS manual.
Tutorial ini berlaku untuk semua tema WordPress by TokoPressID, termasuk LarisManis, Adora, Salvia, LarisGram, LarisDigital, dan tema TokoPressID lainnya dengan struktur Theme Settings yang sama.
Prasyarat
- Lisensi tema aktif
- Panel Theme Settings: General dapat diakses
Cara membuka
TokoPressID → Theme Settings → General → Global Colors
URL: wp-admin/admin.php?page=theme-settings§ion=larismanis_section_colors
Opsi utama
Skema dan warna brand
| Opsi | Fungsi |
|---|---|
| Color Scheme | Light Mode atau Dark Mode (menentukan set warna aktif) |
| Primary Color | Link, tombol primary (Used for links, primary buttons, etc.) |
| Secondary Color | Tombol secondary (Used for secondary buttons, etc.) |
| Accent Color | Harga produk, sale badge, mini cart count, tombol aksen |
Background
| Opsi | Mode |
|---|---|
| [Light] Body Background Color | Light Mode |
| [Dark] Body Background Color | Dark Mode |
Text Color
| Opsi | Mode |
|---|---|
| [Light] Body Text Color | Light Mode |
| [Dark] Body Text Color | Dark Mode |
| [Light] Heading Text Color | Light Mode |
| [Dark] Heading Text Color | Dark Mode |
Link Color
| Opsi | Mode |
|---|---|
| [Light] Link Text Color | Light Mode |
| [Dark] Link Text Color | Dark Mode |
| [Light] Link Text Color (Hover) | Light Mode |
| [Dark] Link Text Color (Hover) | Dark Mode |
Border Color
| Opsi | Mode |
|---|---|
| [Light] Border Color | Light Mode |
| [Dark] Border Color | Dark Mode |
Opsi bertanda [Light] atau [Dark] hanya tampil sesuai Color Scheme yang dipilih.
Langkah konfigurasi
- Buka section Global Colors.
- Pilih Color Scheme (Light Mode atau Dark Mode).
- Atur Primary Color, Secondary Color, dan Accent Color sesuai brand.
- Sesuaikan Body Background Color dan Body Text Color untuk mode yang dipilih.
- Klik Save Changes.
- Buka frontend dan refresh halaman.
Catatan
- Accent Color memengaruhi elemen WooCommerce seperti harga dan badge Sale! di banyak varian tema.
- Section Style di panel Sections dapat menimpa warna lokal untuk komponen tertentu (header, footer). Mulai dari Global Colors, lalu fine-tune di Sections jika perlu.
- Untuk preview langsung per komponen, Anda dapat memakai Appearance → Customize dengan panel yang sama.
Verifikasi
- Tombol primary memakai Primary Color
- Teks body dan heading kontras dengan background
- Link hover berubah sesuai Link Text Color (Hover)