การปรับแต่ง Bootstrap ให้ตรงตาม Corporate Identity ของแบรนด์ ไม่ใช่แค่การเปลี่ยนสีปุ่มครับ แต่คือการควบคุมโทนสี , แบบอักษร และความโค้งมน ให้เป็นไปในทิศทางเดียวกันทั้งหมด เพื่อให้จัดการง่ายและยืดหยุ่นที่สุด ผมแนะนำให้ใช้ Sass ในการ Override ตัวแปรหลักของ Bootstrap ครับ
กำหนดค่าสีหลัก
ในคู่มือ CI ของคุณมักจะมีค่า HEX Code มาให้ ให้คุณนำมาใส่ในไฟล์ SCSS ก่อนที่จะ import Bootstrap เข้ามา
JavaScript
// 1. กำหนดตัวแปรสีตาม CI
$primary: #004a99; // สีหลักขององค์กร
$secondary: #6c757d; // สีรอง
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;
// 2. รวมสีเข้ากับ Map ของ Bootstrap
$theme-colors: ;