โลโก้ SVG โหมดมืด: เลือกว่าอะไรควบคุมสี

โลโก้ SVG โหมดมืดต้องมีแหล่งข้อมูลธีมที่ระบุชัด CSS ของหน้าจัดสไตล์พาธของ SVG อินไลน์ได้ SVG ภายนอกที่โหลดผ่านองค์ประกอบภาพมีบริบทสไตล์ของตัวเอง แต่คำสั่งสอบถาม prefers-color-scheme ภายในสามารถตอบสนองต่อชุดสีขององค์ประกอบที่ฝังภาพ คลาสธีมที่เลือกเองกับความต้องการสว่าง/มืดของผู้ใช้เป็นข้อมูลคนละชุด ตัดสินใจว่าอะไรควรควบคุมภาพ

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

แยกค่าผู้ใช้จากธีมหน้าเว็บ

คุณลักษณะสื่อ CSS prefers-color-scheme ตรวจความต้องการสว่าง/มืดที่เบราว์เซอร์หรือระบบปฏิบัติการแจ้ง MDN อธิบายแหล่งข้อมูลความต้องการเหล่านั้น แอตทริบิวต์ data-theme="dark" ของเว็บไซต์เองเป็นเพียงสถานะแอป จนกว่า CSS หรือโค้ดจะทำให้เกิดผล

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

พร็อพเพอร์ตี color-scheme เป็นตัวควบคุมอีกอย่าง บอกเบราว์เซอร์ว่าองค์ประกอบรองรับชุดสีใด ไม่ได้ออกแบบสีเติมที่ผู้สร้างระบุไว้ใหม่ทั้งหมดโดยอัตโนมัติ เอกสารพร็อพเพอร์ตีของ MDN แยกการเรนเดอร์ที่เบราว์เซอร์จัดการออกจากสไตล์ธีมที่ผู้สร้างยังต้องให้เอง

อย่าเพิ่มกลไกธีมอิสระสามชุดแล้วหวังว่าจะตรงกัน ระบุผู้ควบคุมก่อนแก้ปัญหาสีที่มองเห็น

ใช้ตัวเลือกของหน้ากับโลโก้อินไลน์ที่มีธีมเลือกเอง

SVG อินไลน์เป็นส่วนหนึ่งของเอกสารหน้า ตัวเลือกที่เจาะจงจึงเข้าถึงพาธได้ การเทียบ SVG อินไลน์กับภาพ อธิบายขอบเขตการเข้าถึงนี้ละเอียดขึ้น

เราสร้างเครื่องหมายรูป F ที่มีบทบาทสีสองแบบ: รูปทรงหลักกับจุดกลมเน้นแยกกัน สีตัวอย่างเหล่านี้เลือกขึ้นเอง ไม่ใช่มาตรฐานแบรนด์

.ink { fill: #183c35; }
.accent { fill: #c58868; }
[data-theme="dark"] .ink { fill: #f5f0e7; }
[data-theme="dark"] .accent { fill: #ffc34d; }

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

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

ให้ SVG ภายนอกดูแลกฎสื่อภายในเอง

ภาพภายนอกเป็นบริบทสไตล์แยก การตั้ง color: rebeccapurple บนองค์ประกอบภาพ HTML ไม่ได้เข้าถึงภายในเพื่อเปลี่ยนสีพาธใด ๆ แม้มี currentColor ใน SVG ก็ไม่ได้กลายเป็นสีข้อความของหน้าโฮสต์โดยอัตโนมัติ

ไฟล์อาจมีกฎธีมของตนแทน นี่คือ SVG ปรับธีมขนาดเล็กครบไฟล์ที่ใช้ในการทดสอบต้นฉบับของเรา:

<svg xmlns="http://www.w3.org/2000/svg" width="140" height="105"
  viewBox="0 0 140 105">
  <style>
    .ink { fill: #183c35; }
    .accent { fill: #c58868; }
    @media (prefers-color-scheme: dark) {
      .ink { fill: #f5f0e7; }
      .accent { fill: #ffc34d; }
    }
  </style>
  <path class="ink" d="M15 15H85V30H33V48H70V63H33V90H15Z"/>
  <circle class="accent" cx="102" cy="73" r="17"/>
</svg>

สำหรับภาพ SVG ที่ฝัง คำสั่งสอบถามความต้องการของมันอาจสะท้อนชุดสีที่องค์ประกอบฝังใช้อยู่ ข้อกำหนด CSS Color Adjustment อธิบายความสัมพันธ์นี้ มันเป็นสัญญาณชุดสี ไม่ใช่ตัวเลือก CSS ปกติของหน้าโฮสต์ข้ามเข้าไฟล์

ในชุดทดสอบ โฮสต์หนึ่งตั้ง color-scheme: light ชัดเจน อีกโฮสต์ตั้ง color-scheme: dark ทั้งคู่โหลดไฟล์ปรับธีมเดียวกัน เรายังกำหนดสีพื้นหลังกับข้อความโดยตั้งใจด้วย การตั้งพร็อพเพอร์ตีอย่างเดียวไม่ได้ให้สไตล์ทั้งหมดนั้น

หากแอปควบคุมธีม ให้ประสานชุดสีโฮสต์กับตัวเลือกนั้นเมื่อใช้วิธีนี้ พื้นหลังมืดแต่โฮสต์ยังประกาศสว่างอาจส่งสัญญาณต่างจากที่ตั้งใจ

เทียบสามวิธีในเบราว์เซอร์จริง

ชุดทดสอบ HTML ต้นฉบับมีโฮสต์ชุดสีคงที่สองแบบด้านบน ใต้ลงมามีปุ่มเปลี่ยนธีมเลือกเองของหน้าสำหรับเครื่องหมายอินไลน์กับภาพภายนอกสีคงที่ ไฟล์ควบคุมภายนอกมีเรขาคณิตเดียวกันแต่ไม่มีกฎสื่อธีมมืด

เบราว์เซอร์รายงานความต้องการผู้ใช้เป็นสว่าง เมื่อคลิกปุ่มธีมเลือกเอง สีหลักอินไลน์เปลี่ยนจาก rgb(24, 60, 53) เป็น rgb(245, 240, 231) และสีเน้นจาก rgb(197, 136, 104) เป็น rgb(255, 195, 77) ค่าความต้องการที่แสดงยังเป็นสว่าง ตัวเลือกของหน้าเองทำให้สีเปลี่ยน

ภาพบนสองภาพแสดงสีสว่างและมืดที่เลือกด้วยชุดสีโฮสต์ของตน ภาพภายนอกคงที่ยังเป็นสีเขียวกับทองแดง แม้พื้นรอบเป็นมืดและค่า color ที่คำนวณขององค์ประกอบภาพ HTML เป็นม่วง

เราตรวจสไตล์ที่คำนวณและภาพเรนเดอร์จริง ภาพภายนอกทั้งสามโหลดด้วยขนาดธรรมชาติ 140 × 105 และแสดงที่ 280 × 210 การทดสอบยืนยันพฤติกรรมไฟล์เหล่านี้ในเซสชันเบราว์เซอร์นี้ ไม่ใช่การทดสอบข้ามเบราว์เซอร์ โปรแกรมอีเมล การส่งออก PDF หรือการสลับระบบปฏิบัติการ

ทดสอบการใช้จริง ไม่ใช่แค่เปิดไฟล์เดี่ยว

เปิด SVG ต้นฉบับแยกเพื่อตรวจเรขาคณิต แล้วตรวจผ่านการฝังในหน้าจริง ตรวจทั้งสองธีม สีเน้น ช่องโปร่งใส และพื้นหลังติดกัน โลโก้ตอบสนองขนาดอาจเปลี่ยนองค์ประกอบเมื่อแคบ คู่มือจัดองค์ประกอบโลโก้ตอบสนองขนาด อธิบายการตัดสินใจนั้นแยก

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

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

คำถามที่พบบ่อย

หน้ามืดจะเปลี่ยนสีโลโก้ SVG ภายนอกโดยอัตโนมัติไหม? ไม่ กฎสีภายในภาพยังมีผล SVG ภายนอกปรับธีมใช้การสอบถามความต้องการของตัวเองกับชุดสีองค์ประกอบฝังได้ แต่ SVG สีคงที่อาจคงสีเดิม

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

ควรกลับทุกสีโลโก้ SVG สำหรับโหมดมืดไหม? ใช้รุ่นที่อนุมัติเมื่อมี ตรวจสีหลัก สีเน้น เส้นขอบ และช่องเปิดบนพื้นผิวที่ต้องการ แทนการถือว่าการกลับสีทั้งหมดรักษาแบบไว้

แหล่งอ้างอิง

1. MDN: prefers-color-scheme — ข้อมูลความต้องการผู้ใช้และพฤติกรรม SVG ที่ฝัง
2. MDN: color-scheme — การรองรับชุดสีกับความรับผิดชอบจัดสไตล์แยกของผู้สร้าง
3. CSS Color Adjustment: ผลของชุดสีที่ใช้ — สัญญาณชุดสีที่ส่งให้เนื้อหาฝัง
4. MDN: SVG ในฐานะภาพ — ข้อจำกัดสคริปต์และทรัพยากรในบริบทภาพ

ต้องการพาธที่แก้ได้จากโลโก้ที่มีแค่ราสเตอร์ใช่ไหม? สร้างและตรวจ SVG ตัวเลือก เก็บต้นฉบับที่ยอมรับแล้ว จากนั้นนิยามบทบาทสีและทดสอบหน้าธีมจริง