ปรับแต่งสี Theme CoreUI ให้เป็นแบบที่ต้องการ
จากที่ผมเคยแนะนำให้ใช้ CoreUI และการติดตั้งจากบทความ Laravel: Admin Theme ง่ายๆ ด้วย CoreUI วันนี้ผมจะมาแชร์เรื่องการปรับแต่งให้เป็นไปแบบที่ต้องการ
ถ้าใครทำตามผมตาม tutorial ที่แล้วก็จะได้หน้าตาออกมาประมาณนี้
แต่ที่ผมจะปรับเปลี่ยนใหม่คือ ผมต้องการให้ Navbar กับ Sidebar เป็นสีเดียวกัน รวมทั้งสามารถปรับเปลี่ยนเป็นสีอื่นๆ ได้ง่าย เพื่อให้สามารถไปใช้กับ Project อื่นๆ ได้ง่าย
ตัวอย่างหลังจากที่ปรับเปลี่ยน
ผมลองทำออกมา 3 แบบด้วยกัน ซึ่งการปรับเปลี่ยนก็แค่เปลี่ยนค่าสีที่เดียว เนื่องด้วยเราใช้ Laravel อยู่แล้ว และ CoreUI ก็มากับ SCSS แบบนี้ก็ง่ายเลยครับ เราสามารถเรียก variable ต่างๆ แล้วเปลี่ยนค่าสีตามที่ต้องการได้เลย อันนี้เป็นตัวอย่างไฟล์ _variables.scss ที่ผมใช้งานครับ
หลักๆ เราเปลี่ยนค่าสี $primary อย่างเดียวพอครับ หรือถ้าต้องการปรัปเปลี่ยนสี link ใน Navbar หรือ Sidebar ก็ให้เปลี่ยนค่า $navbar-sidebar-link-color
สิ่งที่ผมปรับแต่งเพิ่มเข้ามาคือสี border ของ input ครับ อันเก่าผมว่ามันเห็นไม่ชัด (อันนี้แล้วแต่ความชอบครับ) ลองดูตัวอย่างก่อนและหลังปรับจากรูปด้านบนดูครับ
$input-border-color: #cacfd4;$input-group-addon-border-color: #cacfd4;
หลังจากแก้ไขก็ให้รันคำสั่ง
yarn devเพื่อทำการ แปลง scss ให้เป็น css ครับ เบื้องต้นหลักๆ ผมก็ใช้ประมาณนี้ครับ ที่เหลือถ้ามีปรับแต่งอีกก็แล้วแต่ Project นั้นครับ ก่อนลองเอาไปใช้กันดูครับ
ก่อนไปผมขอแถมอีกสีครับ ในตัวอย่างจะใช้สี $primary: #CF4647;
