ธีม

แม้แต่การสร้างแบรนด์ก็ยังปรับเปลี่ยนตามอุปกรณ์ได้ คุณสามารถปรับการนำเสนอเว็บไซต์ของคุณให้ตรงกับความต้องการของผู้ใช้ได้ แต่ก่อนอื่น ต่อไปนี้คือวิธีขยายการสร้างแบรนด์ของเว็บไซต์ให้ครอบคลุมเบราว์เซอร์

ปรับแต่งอินเทอร์เฟซเบราว์เซอร์

บางเบราว์เซอร์จะอนุญาตให้คุณแนะนำสีธีมได้โดยอิงจากชุดสีของเว็บไซต์ของคุณ อินเทอร์เฟซของเบราว์เซอร์จะปรับตามสีที่คุณแนะนำ เพิ่มสีในองค์ประกอบ meta ชื่อ theme-color ใน head ของหน้าเว็บ

<meta name="theme-color" content="#00D494">
clearleft.com การออกแบบเว็บที่ยืดหยุ่น.com The Session org.
ผู้ใช้เห็นเว็บไซต์ 3 เว็บไซต์ในเบราว์เซอร์ Safari แต่ละธีมจะมีสีธีมของตัวเองที่จะขยายออกเป็นอินเทอร์เฟซของเบราว์เซอร์

คุณอัปเดตค่าของ 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 ภาพที่มีความสว่างปกติ รูปภาพ 3 รูปที่มีความสว่างน้อยลงเล็กน้อย
เอฟเฟกต์จะเล็กน้อย แต่คุณลดความสว่างของรูปภาพในโหมดมืดได้

คุณอาจต้องเปลี่ยนรูปภาพบางรูปในโหมดมืดเลย ตัวอย่างเช่น คุณอาจต้องการแสดงแผนที่โดยใช้รูปแบบสีที่เข้มขึ้น ใช้องค์ประกอบ <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 ฉบับ โดยที่ฉบับหนึ่งใช้สีอ่อน และอีกแผนหนึ่งใช้สีเข้ม
แผนที่เดียวกันมี 2 เวอร์ชัน เวอร์ชันหนึ่งสำหรับโหมดสว่าง และอีกเวอร์ชันสำหรับโหมดมืด

แบบฟอร์ม

เบราว์เซอร์มีชุดสีเริ่มต้นสำหรับช่องแบบฟอร์ม แจ้งให้เบราว์เซอร์ทราบว่าเว็บไซต์มีทั้งโหมดมืดและโหมดสว่าง วิธีนี้ช่วยให้เบราว์เซอร์ใช้การจัดรูปแบบเริ่มต้นที่เหมาะสมสำหรับแบบฟอร์มได้

เพิ่มไปยัง 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);
}

การใช้โหมดมืดเป็นเพียงตัวอย่างหนึ่งของการปรับเว็บไซต์ให้เหมาะกับความต้องการของผู้ใช้ ถัดไป คุณจะได้เรียนรู้วิธีทำให้เว็บไซต์ปรับให้เข้ากับข้อควรพิจารณาเกี่ยวกับการช่วยเหลือพิเศษทุกรูปแบบ

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับการกำหนดธีม

หากต้องการระบุสีธีมที่ส่งผลต่อเบราว์เซอร์ภายนอกหน้าเว็บ ให้ใช้สีต่อไปนี้

CSS
ข้อมูลธีม CSS อาจทำให้เกิดแสงแฟลชสีปกติ ซึ่งเป็นประสบการณ์ของผู้ใช้ที่ไม่พึงประสงค์
JavaScript
เฉพาะกรณีที่คุณใช้เพื่ออัปเดตแท็ก <meta> ของ "ธีมสี" เท่านั้น
ไฟล์ Manifest ของเว็บแอป
ระบุ manifest.json และรวมช่องสำหรับระบุสีของธีมสำหรับการปรับลักษณะการเปิดแอปจากหน้าจอหลักของอุปกรณ์เคลื่อนที่ได้
แท็ก <meta> "ธีมสี"
เบราว์เซอร์จะสังเกตเห็นสีธีมนี้ในแท็ก <head> ทันทีที่ทำได้เพื่อหลีกเลี่ยงแสงวาบที่ไม่พึงประสงค์

หากต้องการความสนใจในระบบของผู้ใช้เกี่ยวกับธีมสว่างหรือมืด ให้ใช้ปุ่มต่อไปนี้

คิวรี่สื่อ (prefers-color-scheme)
ส่งค่าที่ต้องการตรวจสอบ เช่น สว่างหรือมืด แล้วพร้อมใช้งาน
JavaScript
ซึ่งจะใช้ไวยากรณ์คิวรี่สื่อ CSS เพื่อขอสถานะปัจจุบันของค่ากำหนด

แม้ว่าคุณจะรองรับธีมมืด แต่การป้อนข้อมูลในแบบฟอร์มทั้งหมดจะยังคงเป็นธีมสว่าง คุณทำอะไรได้บ้าง

เพิ่ม html { color-scheme: light dark; } ลงใน CSS
ซึ่งจะเป็นการส่งสัญญาณจาก CSS ว่าอินพุตของแบบฟอร์มควรตรงกับรูปแบบสีของระบบ
เพิ่ม <meta name="supported-color-schemes" content="light dark"> ลงในแท็ก HTML <head>
ซึ่งจะเป็นการส่งสัญญาณจาก HTML ว่าอินพุตของแบบฟอร์มควรตรงกับรูปแบบสีของระบบ
เขียน CSS จำนวนมากเพื่อเปลี่ยนค่าเริ่มต้นทั้งหมดของอินพุต
วิธีนี้ได้ผลเช่นเดียวกัน แต่ยากขึ้นเล็กน้อย