ธีม

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

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

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

<meta name="theme-color" content="#00D494">

คุณอัปเดตค่าของ 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 สำหรับ favicon คุณจะปรับให้เหมาะกับดาร์กโหมดได้ Thomas Steiner เขียนเกี่ยวกับ prefers-color-scheme ในไอคอน favicon ของ SVG สำหรับไอคอนโหมดมืด

การกำหนดธีมด้วยพร็อพเพอร์ตี้ที่กำหนดเอง

หากคุณใช้ค่าสีเดียวกันในหลายที่ทั่วทั้ง CSS การทำซ้ำตัวเลือกทั้งหมดภายใน prefers-color-scheme Media Query อาจเป็นเรื่องที่น่าเบื่อ

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 Media Query คุณก็ไม่ต้องเขียนตัวเลือกทั้งหมด 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);
  }
}

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

ฟอร์ม

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

เพิ่มโค้ดต่อไปนี้ลงใน 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);
}

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

ทดสอบความเข้าใจ

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