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