> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Logo SVG ở chế độ tối: chọn yếu tố điều khiển màu > Chọn để logo SVG theo tùy chọn của người dùng hay theo chủ đề của trang. So sánh CSS nội tuyến, tệp ngoài tự thích ứng và hình màu cố định trong phép thử trình duyệt. Source: https://perfectvector.com/vi/blog/dark-mode-svg-logo Language: vi Author: Irene Kim Published: 2026-10-22T08:00:00+09:00 Logo SVG chế độ tối cần nguồn thông tin chủ đề rõ ràng. CSS của trang có thể tạo kiểu cho đường dẫn của SVG nội tuyến. SVG ngoài nạp qua phần tử ảnh có ngữ cảnh kiểu riêng, nhưng truy vấn `prefers-color-scheme` bên trong có thể phản hồi theo chế độ màu của phần tử nhúng. Lớp chủ đề thủ công và tùy chọn sáng/tối của người dùng là hai đầu vào riêng; hãy quyết định đầu vào nào điều khiển hình. Hãy giữ các phiên bản đã duyệt cho nền sáng và nền tối nếu có. Đảo mọi màu có thể làm đổi màu nhấn, mất đường viền có chủ đích hoặc tạo logo chưa được duyệt. Hỗ trợ chủ đề là quyết định về màu tô và tích hợp, sau khi bản thân hình đã đúng. ## Tách tùy chọn người dùng khỏi chủ đề trang **Tính năng media `prefers-color-scheme`** của CSS phát hiện tùy chọn sáng/tối do trình duyệt hoặc hệ điều hành truyền đến. [MDN mô tả các đầu vào tùy chọn đó](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). Thuộc tính `data-theme="dark"` riêng của trang web chỉ là trạng thái ứng dụng cho đến khi CSS hoặc mã làm nó có tác dụng. Phân biệt này giải thích một tình huống không khớp thường gặp: tùy chọn trình duyệt vẫn là sáng trong khi khách truy cập chọn giao diện tối trong một trang web. Logo chỉ theo tùy chọn đó có thể giữ màu dành cho nền sáng trên trang tối ấy. **Thuộc tính `color-scheme`** là một cơ chế điều khiển khác. Nó cho trình duyệt biết phần tử hỗ trợ những chế độ màu nào; nó không tự thiết kế lại mọi màu tô tác giả chỉ định. [Tài liệu tham chiếu của MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) phân biệt phần kết xuất do trình duyệt quản lý với kiểu chủ đề mà tác giả vẫn tự cung cấp. | Nguồn điều khiển dự kiến | Cách tích hợp | Cần xác minh | | ------------------------------------------- | ------------------------------------------------------------------------ | ----------------------------------------------------------- | | Chủ đề thủ công của ứng dụng | Đường dẫn nội tuyến tạo kiểu bằng bộ chọn chủ đề của trang | Cả hai màu tô của logo đổi khi chủ đề trang đổi | | Chế độ màu của bề mặt nhúng | SVG ngoài có quy tắc media riêng, cùng chế độ màu phù hợp ở phần tử chứa | Cùng một tệp chọn đúng màu tô dự kiến trên mỗi phần tử chứa | | Phiên bản thương hiệu cố định được cung cấp | Chọn đúng tài nguyên đã duyệt trong ứng dụng | Tệp được chọn khớp với nền và vẫn được đặt tên đúng | Đừng thêm ba cơ chế chủ đề độc lập rồi mong chúng khớp nhau. Hãy xác định nguồn điều khiển dự kiến trước khi gỡ lỗi màu hiển thị. ## Dùng bộ chọn trang cho logo nội tuyến có chủ đề thủ công SVG nội tuyến thuộc tài liệu của trang, nên bộ chọn nhắm đích có thể tới đường dẫn của nó. [Bài so sánh SVG nội tuyến với ảnh](https://perfectvector.com/vi/blog/inline-svg-vs-img) giải thích ranh giới truy cập đó kỹ hơn. Chúng tôi vẽ biểu trưng hình chữ F với hai vai trò màu: hình chính và một chấm tròn nhấn riêng. Các màu minh họa này do chúng tôi tự chọn cho ví dụ, không phải tiêu chuẩn thương hiệu. ```css .ink { fill: #183c35; } .accent { fill: #c58868; } [data-theme="dark"] .ink { fill: #f5f0e7; } [data-theme="dark"] .accent { fill: #ffc34d; } ``` Áp dụng các quy tắc này cho đúng hình nội tuyến dự kiến thay vì mọi đường dẫn trên trang web. Logo có thể chứa nhiều màu tô, mặt nạ hoặc dải chuyển màu có chủ đích. [Hướng dẫn đổi màu SVG](https://perfectvector.com/vi/blog/how-to-change-svg-color) trình bày cách kiểm tra yếu tố thực sự tô màu cho hình trước khi đổi kiểu. Dùng `currentColor` hữu ích khi một hình cần dùng chung màu chữ của phần tử chứa nó. Logo nhiều màu không cần đến nó. Hãy giữ màu nhấn riêng khi thiết kế cần một màu tô khác, và kiểm tra toàn bộ biểu trưng trên từng nền dự kiến. ## Để SVG ngoài tự quản lý quy tắc media bên trong Ảnh ngoài là một ngữ cảnh tạo kiểu riêng. Đặt `color: rebeccapurple` cho phần tử ảnh HTML của nó không đi vào trong để đổi màu đường dẫn tùy ý. Ngay cả `currentColor` bên trong tệp SVG cũng không tự động trở thành màu chữ của trang chứa. Thay vào đó, tệp có thể chứa quy tắc chủ đề riêng. Đây là toàn bộ SVG tự thích ứng nhỏ dùng trong phép thử do chúng tôi tự tạo: ```xml ``` Với ảnh SVG nhúng, truy vấn tùy chọn bên trong có thể phản ánh chế độ màu đang dùng của phần tử nhúng. [Đặc tả CSS Color Adjustment](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) mô tả quan hệ đó. Đây là tín hiệu chế độ màu, không phải bộ chọn CSS thông thường của trang chứa đi xuyên vào tệp. Trong trang thử, một phần tử chứa đặt rõ `color-scheme: light`; phần tử kia đặt `color-scheme: dark`. Cả hai nạp cùng một tệp tự thích ứng. Màu nền và màu chữ của chúng cũng được viết có chủ đích. Chỉ đặt thuộc tính này không cung cấp đủ các kiểu đó. Nếu ứng dụng quyết định chủ đề, hãy phối hợp chế độ màu của phần tử chứa với lựa chọn đó khi dùng cách này. Nền tối mà phần tử chứa vẫn khai báo sáng có thể gửi tín hiệu khác với ý định của bạn. ## So sánh ba cách trong một trình duyệt thực tế Trang thử HTML tự tạo của chúng tôi có hai phần tử chứa với chế độ màu cố định ở hàng trên. Bên dưới, một nút đổi chủ đề thủ công của trang cho biểu trưng nội tuyến và ảnh ngoài màu cố định. Tệp ngoài đối chứng đó có cùng hình học nhưng không có quy tắc media cho chủ đề tối. Trình duyệt báo tùy chọn người dùng là sáng. Bấm nút chủ đề thủ công làm màu tô chính nội tuyến đổi từ `rgb(24, 60, 53)` thành `rgb(245, 240, 231)`, và màu nhấn đổi từ `rgb(197, 136, 104)` thành `rgb(255, 195, 77)`. Giá trị tùy chọn được hiển thị vẫn là sáng. Chính bộ chọn của trang đã gây ra thay đổi màu đó. Hai ảnh hàng trên hiển thị màu sáng và tối được chọn theo chế độ màu của phần tử chứa tương ứng. Ảnh ngoài màu cố định vẫn giữ hình xanh lục và màu đồng dù nền xung quanh đã chuyển tối và giá trị `color` tính được của phần tử ảnh HTML là màu tím. ![Trang thử thực tế trong trình duyệt so sánh cùng SVG ngoài tự thích ứng trên phần tử chứa sáng và tối, logo nội tuyến theo chủ đề thủ công và ảnh ngoài đối chứng màu cố định giữ màu gốc](https://perfectvector.com/blog/dark-mode-svg-logo/theme-ownership.webp) *Phép thử HTML/CSS thực tế do chúng tôi tự tạo trong trình duyệt tích hợp của Codex. Chủ đề trang được đặt thủ công là tối trong khi truy vấn tùy chọn người dùng báo sáng. Chế độ màu của các phần tử chứa ở hàng trên là đầu vào thử được đặt rõ ràng; tùy chọn hệ điều hành không bị đổi.* Chúng tôi kiểm tra kiểu tính được và kết quả kết xuất thực tế. Cả ba ảnh ngoài đều tải ở kích thước tự nhiên 140 × 105 và hiển thị ở 280 × 210. Phép thử xác lập hành vi của các tệp trong phiên trình duyệt này. Đây không phải phép thử nhiều trình duyệt, ứng dụng email, xuất PDF hay chuyển chế độ hệ điều hành. ## Thử ở nơi dùng cuối cùng, không chỉ tệp đứng riêng Mở riêng tệp SVG gốc để kiểm tra hình học, rồi xem nó qua cách nhúng thực tế trên trang. Kiểm tra cả hai trạng thái chủ đề, màu nhấn, các khoảng hở trong suốt và nền ngay phía sau. Logo đáp ứng còn có thể đổi bố cục ở kích thước hẹp; [hướng dẫn bố cục logo đáp ứng](https://perfectvector.com/vi/blog/responsive-svg-logo-lockup) bàn về quyết định riêng đó. Ảnh SVG ngoài có giới hạn: [MDN lưu ý rằng tập lệnh bị tắt và tài nguyên ngoài bị hạn chế](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image). Với cách làm ở đây, hãy giữ các kiểu cần thiết trong tài nguyên và thử trong ngữ cảnh phân phối thực tế. Kết quả trình duyệt không hứa hẹn hành vi tương tự trong trình kết xuất email hay trình nhập của ứng dụng thiết kế. Với logo phù hợp chỉ có dạng PNG hoặc JPEG, [quy trình vector hóa logo của PerfectVector](https://perfectvector.com/vi/vectorize-logo) có thể dựng lại đường dẫn cho một bản SVG ứng viên. So dáng bao, chữ và các khe nhỏ với bản nguồn trước khi chuẩn bị phiên bản theo chủ đề. Vector hóa không gán vai trò màu theo ngữ nghĩa, không thêm cơ chế chủ đề của ứng dụng hay duyệt phiên bản thương hiệu đảo màu. Biểu trưng thử của chúng tôi được vẽ trực tiếp bằng vector. ## Câu hỏi thường gặp **Trang tối có tự động đổi màu logo SVG ngoài không?** Không. Quy tắc màu bên trong ảnh vẫn quan trọng. SVG ngoài tự thích ứng có thể dùng truy vấn tùy chọn riêng cùng chế độ màu của phần tử nhúng; SVG màu cố định có thể giữ nguyên màu gốc. **Lớp chủ đề tối thủ công có đổi prefers-color-scheme không?** Tự nó thì không. Lớp hoặc thuộc tính dữ liệu là trạng thái ứng dụng. Trong phép thử, chủ đề thủ công của trang đã đổi trong khi truy vấn tùy chọn người dùng của trình duyệt vẫn là sáng. **Có nên đảo mọi màu logo SVG cho chế độ tối không?** Hãy dùng các phiên bản đã duyệt khi có. Kiểm tra màu chính, màu nhấn, đường viền và các khoảng hở trên nền dự kiến thay vì cho rằng đảo toàn bộ màu sẽ giữ nguyên thiết kế. ## Nguồn tham khảo 1. [MDN: prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) — Đầu vào tùy chọn người dùng và hành vi của SVG nhúng. 2. [MDN: color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) — Hỗ trợ chế độ màu và trách nhiệm tạo kiểu riêng của tác giả. 3. [CSS Color Adjustment: Tác dụng của chế độ màu được dùng](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) — Tín hiệu chế độ màu được cung cấp cho nội dung nhúng. 4. [MDN: SVG dưới dạng ảnh](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — Hạn chế về tập lệnh và tài nguyên trong ngữ cảnh ảnh. *** Cần đường dẫn chỉnh sửa được từ logo chỉ có dạng raster? [Tạo và kiểm tra bản SVG ứng viên](https://perfectvector.com/vi/vectorize-logo), giữ bản chính đã chấp nhận, rồi xác định vai trò màu và thử trên trang có chủ đề thực tế. ## Explore - [Read the HTML article](https://perfectvector.com/vi/blog/dark-mode-svg-logo) - [Chừa chỗ cho logo SVG để tránh dịch chuyển bố cục](https://perfectvector.com/vi/blog/svg-logo-layout-reservation.md) - [Sửa khe hở dưới SVG nội tuyến bằng bố cục CSS](https://perfectvector.com/vi/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)