> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Logo SVG en modo oscuro: elige qué controla el color > Decide si el logo SVG sigue la preferencia del usuario o el tema de página. Compara CSS en línea, un archivo externo adaptable y un diseño fijo en un navegador. Source: https://perfectvector.com/es/blog/dark-mode-svg-logo Language: es Author: Irene Kim Published: 2026-10-22T08:00:00+09:00 Un logo SVG para modo oscuro necesita una fuente explícita de información sobre el tema. El CSS de la página puede aplicar estilos a los trazados de un SVG en línea. Un SVG externo cargado mediante un elemento de imagen tiene su propio contexto de estilos, pero una consulta interna `prefers-color-scheme` puede responder al esquema de color del elemento que lo incorpora. Una clase de tema manual y la preferencia clara u oscura del usuario son entradas separadas; decide cuál debe controlar el diseño. Conserva las variantes aprobadas para superficies claras y oscuras cuando existan. Invertir todos los colores puede cambiar un acento, eliminar un contorno intencional o producir un logo no aprobado. El soporte de temas es una decisión de color e integración una vez que el diseño está correcto. ## Distingue la preferencia del usuario del tema de página La **característica de medios CSS `prefers-color-scheme`** detecta una preferencia clara u oscura comunicada por el navegador o sistema operativo. [MDN describe esas entradas de preferencia](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). Un atributo propio del sitio como `data-theme="dark"` es solo estado de la aplicación hasta que el CSS o el código le dan un efecto. Esa distinción explica una discrepancia frecuente: la preferencia del navegador sigue siendo clara mientras el visitante elige una superficie oscura dentro de un sitio. Un logo que siga solo la preferencia puede conservar sus colores para superficie clara en esa página oscura. La **propiedad `color-scheme`** es otro control. Indica al navegador qué esquemas admite un elemento; no rediseña automáticamente cada relleno especificado por el autor. La [referencia de la propiedad de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) distingue el renderizado que administra el navegador de los estilos de tema que sigue aportando quien crea la página. | Responsable previsto | Opción de integración | Qué verificar | | ------------------------------------------------ | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | Tema manual de la aplicación | Trazados en línea con estilos de los selectores de tema de la página | Los dos colores del logo cambian cuando cambia el tema de página | | Esquema de la superficie que incorpora la imagen | SVG externo con sus propias reglas de medios y un esquema de color adecuado en el contenedor | El mismo archivo elige los colores previstos en cada contenedor | | Variante de marca fija suministrada | Seleccionar el recurso aprobado correcto en la aplicación | El archivo elegido corresponde a la superficie y conserva un nombre correcto | No añadas tres mecanismos de tema independientes esperando que coincidan. Identifica al responsable previsto antes de depurar el color visible. ## Usa selectores de página para un logo en línea con tema manual El SVG en línea pertenece al documento de página, por lo que los selectores dirigidos pueden acceder a sus trazados. Nuestra [comparación entre SVG en línea e imagen](https://perfectvector.com/es/blog/inline-svg-vs-img) explica con más detalle ese límite de acceso. Creamos una marca en F con dos funciones de color: una forma principal y un acento circular separado. Estos colores ilustrativos son elecciones originales del ejemplo, no un estándar de marca. ```css .ink { fill: #183c35; } .accent { fill: #c58868; } [data-theme="dark"] .ink { fill: #f5f0e7; } [data-theme="dark"] .accent { fill: #ffc34d; } ``` Aplica las reglas al diseño en línea previsto, no a todos los trazados del sitio. Un logo puede contener varios colores deliberados, máscaras o degradados. Nuestra [guía para cambiar el color de un SVG](https://perfectvector.com/es/blog/how-to-change-svg-color) explica cómo inspeccionar qué pinta realmente una forma antes de modificar sus estilos. `currentColor` resulta útil cuando una forma debe compartir el color de texto de su elemento. No es un requisito para un logo multicolor. Mantén separado el acento cuando el diseño requiera otro color y revisa la marca completa sobre cada superficie prevista. ## Deja las reglas de medios internas dentro del SVG externo Una imagen externa es un contexto de estilos separado. Asignar `color: rebeccapurple` a su elemento de imagen HTML no accede al interior para recolorear trazados arbitrarios. Ni siquiera un `currentColor` dentro del archivo SVG se convierte automáticamente en el color del texto de la página que lo incorpora. El archivo puede contener sus propias reglas de tema. Este es el SVG adaptable pequeño completo que usamos en nuestra prueba original: ```xml ``` En una imagen SVG incorporada, su consulta de preferencia puede reflejar el esquema de color usado por el elemento que la incorpora. La [especificación CSS Color Adjustment](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) describe esa relación. Es una señal de esquema, no selectores CSS comunes de la página que entran en el archivo. En nuestra página de prueba, un contenedor define explícitamente `color-scheme: light` y otro `color-scheme: dark`. Ambos cargan el mismo archivo adaptable. Los colores de fondo y texto también se definieron deliberadamente. Asignar solo la propiedad no proporcionaría esos estilos completos. Si tu aplicación controla el tema, coordina el esquema del contenedor con esa elección al usar este enfoque. Un fondo oscuro cuyo contenedor todavía declara claro puede transmitir una señal distinta de la deseada. ## Compara las tres vías en un navegador real Nuestra página HTML original tiene dos contenedores de esquema fijo en la parte superior. Debajo, un botón cambia el tema manual de la página para una marca en línea y una imagen externa de color fijo. Ese archivo externo de control contiene la misma geometría, pero ninguna regla de medios para tema oscuro. El navegador indicó una preferencia clara del usuario. Al pulsar el botón de tema manual, el relleno principal en línea cambió de `rgb(24, 60, 53)` a `rgb(245, 240, 231)` y el acento de `rgb(197, 136, 104)` a `rgb(255, 195, 77)`. El indicador de preferencia siguió en claro. Los selectores propios de la página provocaron ese cambio de color. Las dos imágenes superiores mostraron los colores claros y oscuros seleccionados por los esquemas de sus respectivos contenedores. La imagen externa fija conservó su diseño verde y cobrizo aunque la superficie que la rodeaba se volvió oscura y el `color` calculado de su elemento de imagen HTML era morado. ![Prueba real en navegador que compara el mismo SVG externo adaptable en contenedores claro y oscuro, un logo en línea con tema manual y un control externo fijo que conserva sus colores originales](https://perfectvector.com/blog/dark-mode-svg-logo/theme-ownership.webp) *Prueba HTML/CSS original real en el navegador integrado de Codex. El tema manual de página es oscuro mientras la consulta de preferencia del usuario indica claro. Los esquemas de los contenedores superiores son entradas explícitas de prueba; no se cambió la preferencia del sistema operativo.* Inspeccionamos los estilos calculados y el resultado renderizado real. Las tres imágenes externas se cargaron con sus dimensiones naturales de 140 × 105 y se mostraron a 280 × 210. La prueba establece el comportamiento de estos archivos en esta sesión del navegador. No es una prueba entre navegadores, clientes de correo, exportación PDF ni cambios del sistema operativo. ## Prueba el uso final, además del archivo independiente Abre el SVG original por separado para comprobar su geometría e inspecciónalo después incorporado en la página real. Revisa ambos estados de tema, el acento, las aberturas transparentes y el fondo inmediato. Un logo adaptable también puede cambiar de composición en tamaños estrechos; nuestra [guía de composiciones de logo adaptables](https://perfectvector.com/es/blog/responsive-svg-logo-lockup) trata esa decisión por separado. Una imagen SVG externa tiene restricciones: [MDN señala que los scripts están desactivados y los recursos externos están restringidos](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image). Mantén los estilos necesarios dentro del recurso para el enfoque mostrado y prueba el contexto real de entrega. Un resultado en navegador no promete el mismo comportamiento en un renderizador de correo o un importador de diseño. Para un logo apropiado disponible solo como PNG o JPEG, el [flujo de vectorización de logos de PerfectVector](https://perfectvector.com/es/vectorize-logo) puede reconstruir trazados para un SVG candidato. Compara la silueta, las letras y los pequeños huecos con la fuente antes de preparar variantes de tema. La vectorización no asigna funciones semánticas a los colores, ni añade la lógica de temas de tu aplicación ni aprueba una variante invertida de marca. La marca de prueba se creó directamente como formas vectoriales. ## Preguntas frecuentes **¿Una página oscura recolorea automáticamente un logo SVG externo?** No. Las reglas internas de color de la imagen siguen importando. Un SVG externo adaptable puede usar su propia consulta de preferencia con el esquema del elemento que lo incorpora; un SVG de colores fijos puede conservar los originales. **¿Una clase manual de tema oscuro cambia prefers-color-scheme?** No por sí sola. La clase o el atributo de datos es estado de la aplicación. En la prueba cambió el tema manual de página mientras la consulta de preferencia del usuario del navegador seguía en claro. **¿Debo invertir todos los colores del logo SVG para el modo oscuro?** Usa variantes aprobadas cuando estén disponibles. Inspecciona el color principal, el acento, los contornos y las aberturas sobre la superficie prevista, en lugar de suponer que una inversión general conserva el diseño. ## Fuentes 1. [MDN: prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) — Entradas de preferencia del usuario y comportamiento del SVG incorporado. 2. [MDN: color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) — Esquemas admitidos y responsabilidad separada del autor sobre los estilos. 3. [CSS Color Adjustment: Efectos del esquema de color usado](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) — Señal de esquema suministrada al contenido incorporado. 4. [MDN: SVG como imagen](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — Restricciones de scripts y recursos en el contexto de imagen. *** ¿Necesitas trazados editables de un logo que solo existe como ráster? [Crea e inspecciona un SVG candidato](https://perfectvector.com/es/vectorize-logo), conserva el maestro aceptado, define las funciones de color y prueba la página real con sus temas. ## Explore - [Read the HTML article](https://perfectvector.com/es/blog/dark-mode-svg-logo) - [Evita saltos del logo SVG reservando su espacio](https://perfectvector.com/es/blog/svg-logo-layout-reservation.md) - [Corrige el espacio bajo un SVG en línea mediante CSS](https://perfectvector.com/es/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)