แม้แต่การสร้างแบรนด์ก็ยังปรับเปลี่ยนตามอุปกรณ์ได้ คุณสามารถปรับการนำเสนอเว็บไซต์ของคุณให้ตรงกับความต้องการของผู้ใช้ได้ แต่ก่อนอื่น ต่อไปนี้คือวิธีขยายการสร้างแบรนด์ของเว็บไซต์ให้ครอบคลุมเบราว์เซอร์
ปรับแต่งอินเทอร์เฟซเบราว์เซอร์
บางเบราว์เซอร์จะอนุญาตให้คุณแนะนำสีธีมได้โดยอิงจากชุดสีของเว็บไซต์ของคุณ
อินเทอร์เฟซของเบราว์เซอร์จะปรับตามสีที่คุณแนะนำ เพิ่มสีในองค์ประกอบ meta
ชื่อ theme-color
ใน head
ของหน้าเว็บ
<meta name="theme-color" content="#00D494">
![clearleft.com](https://web.dev/static/learn/design/theming/image/clearleft-dot-com-fc330772c30d.png?authuser=6&hl=th)
![การออกแบบเว็บที่ยืดหยุ่น.com](https://web.dev/static/learn/design/theming/image/resilient-web-design-dot-79ec7ad52532.png?authuser=6&hl=th)
![The Session org.](https://web.dev/static/learn/design/theming/image/the-session-dot-org-138442c2e4689.png?authuser=6&hl=th)
คุณอัปเดตค่าของ theme-color
ได้โดยใช้ JavaScript แต่ให้ใช้ศักยภาพนี้อย่างชาญฉลาด
อาจเป็นเรื่องยุ่งยากสำหรับผู้ใช้หากรูปแบบสีของเบราว์เซอร์ที่เปลี่ยนบ่อยเกินไป
ลองคิดหาวิธีเล็กๆ น้อยๆ ในการปรับสีธีม หากการเปลี่ยนแปลงนั้นน่ารำคาญเกินไป ผู้ใช้ก็จะออกไปอย่างน่ารำคาญ
คุณยังระบุสีธีมในไฟล์ไฟล์ Manifest ของเว็บแอปได้ด้วย ซึ่งเป็นไฟล์ JSON ที่มีข้อมูลเมตาเกี่ยวกับเว็บไซต์ของคุณ
ลิงก์ไปยังไฟล์ Manifest จาก head
ของเอกสาร ใช้องค์ประกอบ link
ที่มีค่า rel
เป็น manifest
<link rel="manifest" href="/manifest.json">
แสดงข้อมูลเมตาโดยใช้คู่คีย์/ค่าในไฟล์ Manifest
{
"short_name": "Clearleft",
"name": "Clearleft design agency",
"start_url": "/",
"background_color": "#00D494",
"theme_color": "#00D494",
"display": "standalone"
}
หากผู้เข้าชมตัดสินใจเพิ่มเว็บไซต์ของคุณลงในหน้าจอหลัก เบราว์เซอร์จะใช้ข้อมูลในไฟล์ Manifest เพื่อแสดงทางลัดที่เหมาะสม
ระบุโหมดมืด
ระบบปฏิบัติการจำนวนมากให้ผู้ใช้ระบุค่ากำหนดสำหรับชุดสีอ่อนหรือสีเข้ม
ซึ่งเป็นความคิดที่ดีที่จะเพิ่มประสิทธิภาพเว็บไซต์ตามค่ากำหนดธีมของผู้ใช้
คุณเข้าถึงค่ากำหนดนี้ได้ในฟีเจอร์สื่อที่ชื่อว่า prefers-color-scheme
@media (prefers-color-scheme: dark) {
// Styles for a dark theme.
}
ระบุสีธีมด้วยฟีเจอร์สื่อ prefers-color-scheme
ภายในองค์ประกอบ meta
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
คุณยังใช้ฟีเจอร์สื่อ prefers-color-scheme
ภายใน SVG ได้ด้วย
หากใช้ไฟล์ SVG สำหรับไอคอน Fav คุณจะปรับการตั้งค่าสำหรับโหมดมืดได้
Thomas Steiner เขียนเกี่ยวกับ prefers-color-scheme
ในไอคอน Fav ของ SVG สำหรับไอคอนโหมดมืด
ธีมที่มีพร็อพเพอร์ตี้ที่กำหนดเอง
หากใช้ค่าสีเดียวกันในหลายๆ ตำแหน่งทั่วทั้ง CSS การสร้างตัวเลือกทั้งหมดซ้ำภายในคิวรี่สื่อ prefers-color-scheme
อาจเป็นเรื่องน่าเบื่อหน่าย
body {
background-color: white;
color: black;
}
input {
background-color: white;
color: black;
border-color: black;
}
button {
background-color: black;
color: white;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
input {
background-color: black;
color: white;
border-color: white;
}
button {
background-color: white;
color: black;
}
}
ใช้คุณสมบัติที่กำหนดเองของ CSS เพื่อจัดเก็บค่าสี พร็อพเพอร์ตี้ที่กำหนดเองทำงานเหมือนกับตัวแปรในภาษาโปรแกรม คุณอัปเดตค่าของตัวแปรได้โดยไม่ต้องอัปเดตชื่อ
หากคุณอัปเดตค่าของพร็อพเพอร์ตี้ที่กำหนดเองภายในคำค้นหาสื่อ prefers-color-scheme
คุณจะไม่ต้องเขียนตัวเลือกทั้งหมด 2 ครั้ง
html {
--page-color: white;
--ink-color: black;
}
@media (prefers-color-scheme: dark) {
html {
--page-color: black;
--ink-color: white;
}
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
input {
background-color: var(--page-color);
color: var(--ink-color);
border-color: var(--ink-color);
}
button {
background-color: var(--ink-color);
color: var(--page-color);
}
ดูการสร้างรูปแบบสีเพื่อดูตัวอย่างขั้นสูงขึ้นของการกำหนดธีมพร้อมด้วยคุณสมบัติที่กำหนดเอง
รูปภาพ
หากใช้ SVG ใน HTML คุณสามารถนำคุณสมบัติที่กำหนดเองไปใช้ในส่วนดังกล่าวได้
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
ตอนนี้ไอคอนจะเปลี่ยนสีไปพร้อมกับองค์ประกอบอื่นๆ ในหน้าเว็บ
หากต้องการลดความสว่างของรูปภาพที่ถ่ายเมื่อแสดงในโหมดมืด คุณสามารถใช้ฟิลเตอร์ใน CSS ได้
@media (prefers-color-scheme: dark) {
img {
filter: brightness(.8) contrast(1.2);
}
}
![ภาพถ่าย 3 ภาพที่มีความสว่างปกติ](https://web.dev/static/learn/design/theming/image/three-photographs-normal-e7cfaee065a3.png?authuser=6&hl=th)
![รูปภาพ 3 รูปที่มีความสว่างน้อยลงเล็กน้อย](https://web.dev/static/learn/design/theming/image/three-photographs-slight-6ca40f542a4e9.png?authuser=6&hl=th)
คุณอาจต้องเปลี่ยนรูปภาพบางรูปในโหมดมืดเลย
ตัวอย่างเช่น คุณอาจต้องการแสดงแผนที่โดยใช้รูปแบบสีที่เข้มขึ้น
ใช้องค์ประกอบ <picture>
ที่มีองค์ประกอบ <source>
ที่มีคิวรี่สื่อ prefers-color-scheme
<picture>
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
<img src="lightimage.png" alt="A description of the image.">
</picture>
![แผนที่ของ Broolyn 2 ฉบับ โดยที่ฉบับหนึ่งใช้สีอ่อน และอีกแผนหนึ่งใช้สีเข้ม](https://web.dev/static/learn/design/theming/image/two-maps-broolyn-using-5ab9d5d846e67.png?authuser=6&hl=th)
แบบฟอร์ม
เบราว์เซอร์มีชุดสีเริ่มต้นสำหรับช่องแบบฟอร์ม แจ้งให้เบราว์เซอร์ทราบว่าเว็บไซต์มีทั้งโหมดมืดและโหมดสว่าง วิธีนี้ช่วยให้เบราว์เซอร์ใช้การจัดรูปแบบเริ่มต้นที่เหมาะสมสำหรับแบบฟอร์มได้
เพิ่มไปยัง CSS ของคุณ:
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
นอกจากนี้คุณยังใช้ HTML ได้อีกด้วย เพิ่มนี้ลงใน head
ของเอกสาร:
<meta name="supported-color-schemes" content="light dark">
ใช้คุณสมบัติ accent-color
ใน CSS เพื่อจัดรูปแบบช่องทำเครื่องหมาย ปุ่มตัวเลือก และช่องฟอร์มอื่นๆ
html {
accent-color: red;
}
เป็นเรื่องปกติที่ธีมมืดจะมีสีโทนอ่อนของแบรนด์ คุณอัปเดตค่า accent-color
สำหรับโหมดมืดได้
html {
accent-color: red;
}
@media (prefers-color-scheme: dark) {
html {
accent-color: pink;
}
}
การใช้พร็อพเพอร์ตี้ที่กำหนดเองเป็นวิธีการที่เหมาะสมเพื่อให้คุณสามารถเก็บการประกาศสีทั้งหมดไว้ในที่เดียว
html {
color-scheme: light;
--page-color: white;
--ink-color: black;
--highlight-color: red;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
--page-color: black;
--ink-color: white;
--highlight-color: pink;
}
}
html {
accent-color: var(--highlight-color);
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
การใช้โหมดมืดเป็นเพียงตัวอย่างหนึ่งของการปรับเว็บไซต์ให้เหมาะกับความต้องการของผู้ใช้ ถัดไป คุณจะได้เรียนรู้วิธีทำให้เว็บไซต์ปรับให้เข้ากับข้อควรพิจารณาเกี่ยวกับการช่วยเหลือพิเศษทุกรูปแบบ
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการกำหนดธีม
หากต้องการระบุสีธีมที่ส่งผลต่อเบราว์เซอร์ภายนอกหน้าเว็บ ให้ใช้สีต่อไปนี้
<meta>
ของ "ธีมสี" เท่านั้นmanifest.json
และรวมช่องสำหรับระบุสีของธีมสำหรับการปรับลักษณะการเปิดแอปจากหน้าจอหลักของอุปกรณ์เคลื่อนที่ได้<meta>
"ธีมสี"<head>
ทันทีที่ทำได้เพื่อหลีกเลี่ยงแสงวาบที่ไม่พึงประสงค์หากต้องการความสนใจในระบบของผู้ใช้เกี่ยวกับธีมสว่างหรือมืด ให้ใช้ปุ่มต่อไปนี้
(prefers-color-scheme)
แม้ว่าคุณจะรองรับธีมมืด แต่การป้อนข้อมูลในแบบฟอร์มทั้งหมดจะยังคงเป็นธีมสว่าง คุณทำอะไรได้บ้าง
html { color-scheme: light dark; }
ลงใน CSS<meta name="supported-color-schemes" content="light dark">
ลงในแท็ก HTML <head>