ธีม

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

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

<meta name="theme-color" content="#00D494">
เคลียร์ซ้าย ดอท com Resilient Web Design ดอท com. The Session.org
สามารถดูเว็บไซต์ได้สามเว็บไซต์ในเบราว์เซอร์ 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);
}

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

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

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

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

JavaScript
ไฟล์ Manifest ของเว็บแอป
CSS
'สีของธีม' แท็ก <meta>

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

JavaScript
คิวรี่สื่อ (prefers-color-scheme)

ดังนั้น คุณจึงรองรับธีมมืด แต่อินพุตทั้งหมดในแบบฟอร์มจะยังคงมีธีมสว่างอยู่ คุณทำอะไรได้บ้าง

เพิ่ม html { color-scheme: light dark; } ลงใน CSS
เขียน CSS จำนวนมากเพื่อเปลี่ยนค่าเริ่มต้นทั้งหมดของอินพุต
เพิ่ม <meta name="supported-color-schemes" content="light dark"> ลงในแท็ก HTML <head>