ธีม

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

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

บางเบราว์เซอร์อนุญาตให้คุณแนะนำสีธีมตามจานสีของเว็บไซต์ของคุณ อินเทอร์เฟซของเบราว์เซอร์จะปรับตามสีที่แนะนำ เพิ่มสีในองค์ประกอบ 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 สำหรับไอคอน 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);
  }
}

วันที่

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

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

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

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