> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

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

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

Source: https://perfectvector.com/th/blog/dark-mode-svg-logo

Language: th
Author: Irene Kim
Published: 2026-10-22T08:00:00+09:00

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

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

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

**คุณลักษณะสื่อ CSS `prefers-color-scheme`** ตรวจความต้องการสว่าง/มืดที่เบราว์เซอร์หรือระบบปฏิบัติการแจ้ง [MDN อธิบายแหล่งข้อมูลความต้องการเหล่านั้น](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) แอตทริบิวต์ `data-theme="dark"` ของเว็บไซต์เองเป็นเพียงสถานะแอป จนกว่า CSS หรือโค้ดจะทำให้เกิดผล

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

**พร็อพเพอร์ตี `color-scheme`** เป็นตัวควบคุมอีกอย่าง บอกเบราว์เซอร์ว่าองค์ประกอบรองรับชุดสีใด ไม่ได้ออกแบบสีเติมที่ผู้สร้างระบุไว้ใหม่ทั้งหมดโดยอัตโนมัติ [เอกสารพร็อพเพอร์ตีของ MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) แยกการเรนเดอร์ที่เบราว์เซอร์จัดการออกจากสไตล์ธีมที่ผู้สร้างยังต้องให้เอง

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

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

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

SVG อินไลน์เป็นส่วนหนึ่งของเอกสารหน้า ตัวเลือกที่เจาะจงจึงเข้าถึงพาธได้ [การเทียบ SVG อินไลน์กับภาพ](https://perfectvector.com/th/blog/inline-svg-vs-img) อธิบายขอบเขตการเข้าถึงนี้ละเอียดขึ้น

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

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

ใช้กฎกับภาพอินไลน์ที่ต้องการแทนทุกพาธบนเว็บไซต์ โลโก้อาจมีหลายสีที่ตั้งใจ มาสก์ หรือไล่สี [คู่มือเปลี่ยนสี SVG](https://perfectvector.com/th/blog/how-to-change-svg-color) ครอบคลุมการตรวจสิ่งที่ระบายรูปทรงจริงก่อนเปลี่ยนสไตล์

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

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

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

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

```xml
<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](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) อธิบายความสัมพันธ์นี้ มันเป็นสัญญาณชุดสี ไม่ใช่ตัวเลือก 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 เป็นม่วง

![ชุดทดสอบเบราว์เซอร์จริงเทียบ SVG ภายนอกปรับธีมเดียวกันบนโฮสต์สว่างและมืด โลโก้อินไลน์ธีมเลือกเอง และตัวควบคุมภายนอกคงที่ซึ่งรักษาสีเดิม](https://perfectvector.com/blog/dark-mode-svg-logo/theme-ownership.webp)

*การทดสอบ HTML/CSS ต้นฉบับจริงในเบราว์เซอร์ในแอป Codex ธีมเลือกเองของหน้าเป็นมืดขณะที่การสอบถามความต้องการผู้ใช้รายงานสว่าง ชุดสีโฮสต์แถวบนเป็นข้อมูลทดสอบที่กำหนดชัด ไม่ได้เปลี่ยนความต้องการระบบปฏิบัติการ*

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

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

เปิด SVG ต้นฉบับแยกเพื่อตรวจเรขาคณิต แล้วตรวจผ่านการฝังในหน้าจริง ตรวจทั้งสองธีม สีเน้น ช่องโปร่งใส และพื้นหลังติดกัน โลโก้ตอบสนองขนาดอาจเปลี่ยนองค์ประกอบเมื่อแคบ [คู่มือจัดองค์ประกอบโลโก้ตอบสนองขนาด](https://perfectvector.com/th/blog/responsive-svg-logo-lockup) อธิบายการตัดสินใจนั้นแยก

ภาพ SVG ภายนอกมีข้อจำกัด: [MDN ระบุว่าสคริปต์ถูกปิดและทรัพยากรภายนอกถูกจำกัด](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) เก็บสไตล์จำเป็นในไฟล์สำหรับวิธีที่แสดง แล้วทดสอบบริบทส่งใช้งานจริง ผลเบราว์เซอร์ไม่ได้รับประกันพฤติกรรมเดียวกันในตัวเรนเดอร์อีเมลหรือโปรแกรมนำเข้างานออกแบบ

สำหรับโลโก้ที่เหมาะสมซึ่งมีเพียง PNG หรือ JPEG [กระบวนการแปลงโลโก้ของ PerfectVector](https://perfectvector.com/th/vectorize-logo) สร้างพาธ SVG ตัวเลือกได้ เปรียบเทียบเงารูป ตัวอักษร และช่องเล็กกับต้นฉบับก่อนเตรียมรุ่นธีม การแปลงเวกเตอร์ไม่ได้กำหนดบทบาทสีเชิงความหมาย เพิ่มตรรกะธีมแอป หรืออนุมัติโลโก้กลับสี เครื่องหมายทดสอบของเราสร้างจากรูปทรงเวกเตอร์โดยตรง

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

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

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

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

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

1. [MDN: prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) — ข้อมูลความต้องการผู้ใช้และพฤติกรรม SVG ที่ฝัง
2. [MDN: color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) — การรองรับชุดสีกับความรับผิดชอบจัดสไตล์แยกของผู้สร้าง
3. [CSS Color Adjustment: ผลของชุดสีที่ใช้](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) — สัญญาณชุดสีที่ส่งให้เนื้อหาฝัง
4. [MDN: SVG ในฐานะภาพ](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — ข้อจำกัดสคริปต์และทรัพยากรในบริบทภาพ

***

ต้องการพาธที่แก้ได้จากโลโก้ที่มีแค่ราสเตอร์ใช่ไหม? [สร้างและตรวจ SVG ตัวเลือก](https://perfectvector.com/th/vectorize-logo) เก็บต้นฉบับที่ยอมรับแล้ว จากนั้นนิยามบทบาทสีและทดสอบหน้าธีมจริง

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/dark-mode-svg-logo)
- [หยุดโลโก้ SVG ดันเค้าโครงด้วยการจองพื้นที่](https://perfectvector.com/th/blog/svg-logo-layout-reservation.md)
- [แก้ช่องว่างใต้ SVG อินไลน์ด้วยเค้าโครง CSS](https://perfectvector.com/th/blog/inline-svg-baseline-gap.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)