(For Admins) การเปลี่ยน Theme สี ของ SharePoint Online (Modern exp.)
Content difficulty — Technical
วันนี้มาเสนอวิธีการปรับจูนสี Theme ของ SharePoint Online ที่เป็น Modern site ครับ ซึ่ง Modern Site ใน SharePoint Online ตัว framework เรื่องของ User Interface (UI) design ที่เรียกว่า Fluent Design System ซึ่งเป็นมาตรฐานการ design ของ Microsoft เองครับ ซึ่ง framework นี้ก็มี reference แนะนำเพื่อที่จะให้ developer เอาหลักการไปใช้ พัฒนา Application ทั้ง web app, mobile platform ต่างๆ ซึ่งตอนนี้ website ของ Microsoft หรือ Office 365 ที่เป็น Admin Portal ของ Services ต่างๆที่ปรับหน้าตาใหม่ก็มี แบบจำลอง, style หรือ layout ที่ตาม Fluent Design นี้ ซึ่งสามารถไปดูรายละเอียดได้ที่ https://www.microsoft.com/design/fluent/
สำหรับ SharePoint Online ที่เป็น Modern Site ก็จะมีส่วน ล้อตามพื้นฐานนี้ Fluent Design นี้ (รวมถึง SharePoint Server version ใหม่ด้วย) ซึ่ง Out Of The Box (OOB) ของ SharePoint ก็มี Theme สีซึ่งประกอบด้วย
- Primary Color
- Text Color
- Background Color
แล้วจากสีหลักทั้งสามส่วนก็จะมีไล่โทนสีให้จางลงมา ซึ่งตาม framework ก็จะ มีการปรับ recommend ว่า สีที่ได้เมื่อไปใส่ใน Application แล้วจะไม่มีปัญหาในเรื่องการมองเห็น สามารถเห็ text, ปุ่ม, switch, DropDown หรือ Text Input ที่ชัดเจนไม่คลุมเครือ
ความแตกต่างของ Modern site กับ Classic web part สามารถดูได้ที่ https://support.microsoft.com/en-us/office/sharepoint-classic-and-modern-experiences-5725c103-505d-4a6e-9350-300d3ec7d73f?ui=en-us&rs=en-us&ad=us
การเลือก Color Theme
จากหน้า SharePoint Site ถ้าคลิกที่ Gear Icon -> Change the look -> Theme ก็จะเห็น Template สีเบื้องต้นที่เอามาใช้ได้ใน SharePoint Online หรือเราสามารถ คลิก ที่ Customize เพื่อเลือกสีเบื้องต้นได้
แต่ถ้าในองค์กรมีสีหรือ branding อยู่แล้วก็จะต้องใช้เรื่องของ customization อย่างแรกเลย คือ การเอาสี Brand หรือ Logo ของบริษัทเรามาหาค่า color code ที่เป็น HEX เสียก่อน ซึ่งก็มี Online website มากมายที่ช่วยเราหาค่าสีได้ เช่น ของ Google Color Picker ซึ่งให้เราหาค่าสีได้ https://htmlcolors.com/google-color-picker
จากนั้นเราเข้ามาที่ tool ชื่อ Fluent UI Theme Designer เพื่อหา Tone สีของ SharePoint Site เราว่า สีหลักของ Brand เราเข้ากับ accent ไหนบ้าง เพื่อให้ตรงตามมาตฐาน ก็จะมีขึ้นฟ้องว่าชุดสี Primary color, Text color และ Background color ของเราตามมาตรฐานหรือไม่ เพื่อว่าไม่ทำให้เกิดปัญหาเวลามองจาก PC หรือ จอเล็กๆอย่างมือถือ โดยเราเอา Color code ของเรามาเป็นตัวหลัก
เมื่อได้ชุดที่ต้องการสามารถคลิกปุ่มขวาบนเพื่อ Export Theme เป็น Code, JSON หรือ PowerShell ได้ ซึ่งเราจะ Copy ในส่วนของ PowerShell เก็บไว้
Deploy ไปที่ SharePoint Online
อันดับแรกให้เรา Install ตัว PowerShell Module ของ SharePoint Online ก่อนไปที่ PowerShell แล้วให้ run as administrator
คนที่ run คำสั่งนี้ควรมี role เป็น Global Administrator หรือ SharePoint Administrator บน Office 365
Install-Module -Name Microsoft.Online.SharePoint.PowerShell
จากนั้น connect ไปที่ SharePoint Online แล้วใส่ site ที่เราต้องการ
Connect-SPOService -Url https://$orgName-admin.sharepoint.com แล้วใส่ชื่อ tenant แทนที $orgName
ตั้ง variable ชื่อ $color = แล้ว paste ค่า array ที่เรา copy มาจาก Fluent UI Theme Designer มาใส่
สุดท้ายใส่ command เพื่อการ deploy ลง Tenant ของเรา โดยตัวอย่างข่างล่างจะตั้งชื่อ Theme ว่า Blue Curacao โดยใส่ค่าตัวแปร array ของเฉดสีไปที่ $color ด้วย
Add-SPOTheme -Identity “Blue Curacao” -palette $color -IsInverted:$false -Overwrite
ค่า -IsInverted:$false จะเป็น dark background ส่วนถ้าเปลี่ยนเป็น -IsInverted:$True จะเป็น light foreground
ใช้ -Name หรือ -Identity ก็ได้ ตามด้วยชื่อ Theme
เมื่อเรา refresh จอแล้ว คลิกที่ Gear Icon -> Change the look -> Theme ก็จะเห็น Company Theme พร้อมชื่อที่เราตั้งจาก PowerShell เพิ่มขึ้นมา
คำสั้ง Get-SPOTheme ก็จะ list ตัว custom theme ที่เราสร้างมาทั้งหมด
ถ้าจะลบ Theme ทำได้โดยคำสั่ง Remove-SPOTheme -Identity “ชื่อ Theme” เช่นในกรณีนี้ คือ Remove-SPOTheme -Identity “Blue Curacao”
