Warna adalah salah satu elemen terpenting dalam identitas brand. Sitemas menggunakan sistem warna Material Design 3 (M3) yang fleksibel dan powerful. Artikel ini akan memandu Anda mengubah warna tema sesuai brand Anda.

Memahami Sistem Warna M3

Material Design 3 menggunakan sistem color tokens yang terdiri dari:

KategoriTokensFungsi
Primaryprimary, on-primary, primary-containerWarna utama brand
Secondarysecondary, on-secondary, secondary-containerWarna pendukung
Tertiarytertiary, on-tertiary, tertiary-containerWarna aksen ketiga
Errorerror, on-error, error-containerStatus error
Surfacesurface, surface-container, on-surfaceBackground dan container
Outlineoutline, outline-variantBorder dan divider

Light Mode vs Dark Mode

M3 menyediakan dua set warna untuk setiap mode. Sitemas sudah dikonfigurasi untuk keduanya dengan transisi yang smooth.

Lokasi File Warna

Semua token warna ada di src/styles/m3-tokens.css:

src/styles/m3-tokens.css
css 
:root {
    /* ============================================
       LIGHT MODE COLORS
       ============================================ */
    
    /* Primary */
    --md-sys-color-primary: #7438D2;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-on-primary-container: #21005E;
    
    /* Secondary */
    --md-sys-color-secondary: #625B71;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1E192B;
    
    /* ... more colors */
}

[data-theme="dark"] {
    /* ============================================
       DARK MODE COLORS
       ============================================ */
    
    /* Primary */
    --md-sys-color-primary: #CFBCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-primary-container: #4F378B;
    --md-sys-color-on-primary-container: #EADDFF;
    
    /* ... more colors */
}

Cara Mengubah Warna Primary

Pilih Warna Brand Anda

Tentukan warna utama brand Anda dalam format HEX. Contoh:

  • Tech Blue: #0061A4
  • Nature Green: #006D3B
  • Creative Purple: #7B1FA2
  • Sunset Orange: #E65100

Generate Palette dengan Material Theme Builder

Kunjungi Material Theme Builder dan:

  1. Klik Primary color
  2. Masukkan HEX warna brand Anda
  3. System akan generate seluruh palette otomatis
  4. Klik Export → CSS
  5. Copy variabel CSS yang dihasilkan

Update m3-tokens.css

Ganti nilai variabel di m3-tokens.css dengan nilai dari Theme Builder:

Contoh: Brand Color Biru
css 
:root {
    /* Primary - Tech Blue */
    --md-sys-color-primary: #0061A4;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #D1E4FF;
    --md-sys-color-on-primary-container: #001D36;
    
    /* Primary Inverse */
    --md-sys-color-inverse-primary: #9ECAFF;
}

[data-theme="dark"] {
    /* Primary - Tech Blue Dark */
    --md-sys-color-primary: #9ECAFF;
    --md-sys-color-on-primary: #003258;
    --md-sys-color-primary-container: #00497D;
    --md-sys-color-on-primary-container: #D1E4FF;
}

Test di Browser

Jalankan dev server dan test perubahan:

npm run dev

Toggle antara Light dan Dark mode untuk memastikan kedua mode terlihat baik.

Palette Siap Pakai

Berikut beberapa palette M3 yang sudah digenerate dan siap pakai:

Tech Blue

Tech Blue Palette
css 
/* Light Mode */
--md-sys-color-primary: #0061A4;
--md-sys-color-primary-container: #D1E4FF;

/* Dark Mode */
--md-sys-color-primary: #9ECAFF;
--md-sys-color-primary-container: #00497D;

Nature Green

Nature Green Palette
css 
/* Light Mode */
--md-sys-color-primary: #006D3B;
--md-sys-color-primary-container: #94F7B7;

/* Dark Mode */
--md-sys-color-primary: #78DA9C;
--md-sys-color-primary-container: #005229;

Sunset Orange

Sunset Orange Palette
css 
/* Light Mode */
--md-sys-color-primary: #9D4300;
--md-sys-color-primary-container: #FFDBC9;

/* Dark Mode */
--md-sys-color-primary: #FFB690;
--md-sys-color-primary-container: #783200;

Royal Purple

Royal Purple Palette
css 
/* Light Mode */
--md-sys-color-primary: #7B1FA2;
--md-sys-color-primary-container: #F3E5F5;

/* Dark Mode */
--md-sys-color-primary: #E1BEE7;
--md-sys-color-primary-container: #5A0072;

Mengubah Warna Kategori

Sitemas memiliki warna khusus untuk setiap kategori artikel:

Warna kategori di m3-tokens.css
css 
:root {
    /* Extended Colors - Category */
    --md-ext-color-dokumentasi: #8b5cf6;  /* Purple */
    --md-ext-color-tutorial: #3b82f6;     /* Blue */
    --md-ext-color-insight: #f59e0b;      /* Amber */
    --md-ext-color-tips: #10b981;         /* Green */
}

[data-theme="dark"] {
    --md-ext-color-dokumentasi: #a78bfa;
    --md-ext-color-tutorial: #60a5fa;
    --md-ext-color-insight: #fbbf24;
    --md-ext-color-tips: #34d399;
}

Warna ini digunakan di:

  • Badge kategori
  • Dot indicator di sidebar
  • Hover state

Mengubah Surface Colors

Surface colors mengontrol background halaman dan komponen:

Surface colors
css 
:root {
    /* Surface - Light Mode */
    --md-sys-color-surface: #FFFBFE;
    --md-sys-color-surface-dim: #DED8E1;
    --md-sys-color-surface-bright: #FFFBFE;
    --md-sys-color-surface-container-lowest: #FFFFFF;
    --md-sys-color-surface-container-low: #F7F2FA;
    --md-sys-color-surface-container: #F3EDF7;
    --md-sys-color-surface-container-high: #ECE6F0;
    --md-sys-color-surface-container-highest: #E6E0E9;
    
    /* On Surface */
    --md-sys-color-on-surface: #1C1B1F;
    --md-sys-color-on-surface-variant: #49454F;
}
Surface Hierarchy

Gunakan surface container variants untuk membuat hierarki visual:

  • surface-container-lowest: Background utama
  • surface-container: Cards
  • surface-container-high: Elevated cards
  • surface-container-highest: Modals, popovers

Membuat Dark Mode yang Baik

Tips untuk dark mode yang nyaman di mata:

  1. Jangan pure black — Gunakan #1C1B1F atau #121212 daripada #000000
  2. Kurangi kontras — Text tidak harus pure white, gunakan #E6E0E9
  3. Desaturate colors — Warna di dark mode sebaiknya lebih muted
  4. Test di malam hari — Pastikan nyaman saat mata lelah
Dark mode best practice
css 
[data-theme="dark"] {
    /* ❌ Jangan */
    --md-sys-color-surface: #000000;
    --md-sys-color-on-surface: #FFFFFF;
    
    /* ✅ Lebih baik */
    --md-sys-color-surface: #1C1B1F;
    --md-sys-color-on-surface: #E6E0E9;
}

Menggunakan CSS Variables di Komponen

Untuk membuat komponen Anda mengikuti tema:

Contoh penggunaan
css 
.my-button {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: var(--md-sys-shape-corner-full);
}

.my-button:hover {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.my-card {
    background-color: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
}

Mengubah Warna Aksen Global

Sitemas menggunakan variabel --color-accent sebagai warna aksen utama yang di-sync dengan primary:

Sync accent dengan primary
css 
:root {
    --color-accent: var(--md-sys-color-primary);
    --color-accent-subtle: var(--md-sys-color-primary-container);
}

Verifikasi Kontras (Accessibility)

Pastikan kombinasi warna memenuhi standar WCAG:

KombinasiMinimum Ratio
Text normal4.5:1
Text besar (18px+)3:1
UI components3:1

Tools untuk cek kontras:

Langkah Selanjutnya

Setelah warna selesai, kustomisasi typography:

Ubah Font

Pelajari cara mengubah font dan typography untuk identitas yang lebih personal.

Kustomisasi Typography

Kesimpulan

Sistem warna M3 di Sitemas sangat fleksibel. Dengan mengubah beberapa variabel CSS, Anda bisa mengubah seluruh tampilan website sesuai brand.

Ingat prinsip utama:

  1. Gunakan Material Theme Builder untuk generate palette
  2. Selalu update Light DAN Dark mode
  3. Test kontras untuk accessibility
  4. Konsisten menggunakan token, bukan hardcode warna
M

Mas Admin

Penulis Konten

Menyajikan konten terbaik seputar teknologi dan produktivitas.