> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Logo SVG en mode sombre : qui contrôle la couleur ? > Choisis si un logo SVG suit la préférence utilisateur ou le thème de la page. Compare CSS en ligne, fichier externe adaptatif et dessin fixe dans un test de navigateur. Source: https://perfectvector.com/fr/blog/dark-mode-svg-logo Language: fr Author: Irene Kim Published: 2026-10-22T08:00:00+09:00 Un logo SVG pour le mode sombre a besoin d’une source explicite d’information sur le thème. Le CSS de la page peut styliser les chemins d’un SVG en ligne. Un SVG externe chargé par un élément image possède son propre contexte de style, mais une requête interne `prefers-color-scheme` peut réagir au schéma de couleurs de l’élément qui l’intègre. Une classe de thème manuel et la préférence claire/sombre de l’utilisateur sont deux entrées distinctes ; décide laquelle doit contrôler le dessin. Conserve les variantes approuvées pour surfaces claires et sombres lorsqu’elles existent. Inverser toutes les couleurs peut modifier un accent, perdre un contour volontaire ou produire un logo non approuvé. La prise en charge du thème est une décision de peinture et d’intégration qui vient après la correction du dessin lui-même. ## Distingue la préférence utilisateur du thème de page La **caractéristique média CSS `prefers-color-scheme`** détecte une préférence claire/sombre communiquée par le navigateur ou le système d’exploitation. [MDN décrit ces entrées de préférence](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). L’attribut `data-theme="dark"` propre à un site n’est qu’un état applicatif tant que du CSS ou du code ne lui donne pas d’effet. Cette distinction explique un désaccord courant : la préférence du navigateur reste claire alors qu’un visiteur sélectionne une surface sombre sur un site. Un logo qui suit uniquement la préférence peut garder ses couleurs pour surface claire sur cette page sombre. La **propriété `color-scheme`** est un autre contrôle. Elle indique au navigateur les schémas pris en charge par un élément ; elle ne redessine pas automatiquement tous les remplissages définis par l’auteur. [La référence MDN de cette propriété](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) distingue le rendu géré par le navigateur des styles de thème que les auteurs doivent encore fournir. | Contrôleur prévu | Choix d’intégration | Points à vérifier | | ---------------------------------- | --------------------------------------------------------------------- | ----------------------------------------------------------------- | | Thème manuel de l’application | Chemins en ligne stylisés par les sélecteurs de thème de la page | Les deux peintures du logo changent avec le thème de page | | Schéma de la surface d’intégration | SVG externe avec ses propres règles média et un schéma hôte approprié | Le même fichier choisit les peintures prévues sur chaque hôte | | Variante de marque fixe fournie | Sélection de la bonne ressource approuvée dans l’application | Le fichier choisi correspond à la surface et garde un nom correct | N’ajoute pas trois mécanismes de thème indépendants en espérant qu’ils concordent. Nomme le contrôleur prévu avant de déboguer la couleur visible. ## Utilise les sélecteurs de page pour un logo en ligne à thème manuel Le SVG en ligne appartient au document de la page : des sélecteurs ciblés peuvent donc atteindre ses chemins. Notre [comparaison SVG en ligne et image](https://perfectvector.com/fr/blog/inline-svg-vs-img) explique plus précisément cette limite d’accès. Nous avons créé un signe en F avec deux rôles de peinture : une forme principale et un accent circulaire séparé. Ces couleurs illustratives sont des choix d’exemple originaux, pas une norme de marque. ```css .ink { fill: #183c35; } .accent { fill: #c58868; } [data-theme="dark"] .ink { fill: #f5f0e7; } [data-theme="dark"] .accent { fill: #ffc34d; } ``` Applique ces règles au dessin en ligne visé plutôt qu’à tous les chemins du site. Un logo peut contenir plusieurs peintures, masques ou dégradés volontaires. Notre [guide de changement de couleur SVG](https://perfectvector.com/fr/blog/how-to-change-svg-color) couvre l’inspection de ce qui peint réellement une forme avant de modifier ses styles. Utiliser `currentColor` est utile lorsqu’une forme doit partager la couleur de texte de son élément. Ce n’est pas une obligation pour un logo multicolore. Garde l’accent séparé lorsque le dessin prévoit une autre peinture et vérifie tout le signe sur chaque surface prévue. ## Laisse le SVG externe gérer ses règles média internes Une image externe possède un contexte de style séparé. Définir `color: rebeccapurple` sur son élément image HTML ne pénètre pas dans le fichier pour recolorer des chemins quelconques. Même un `currentColor` dans le fichier SVG ne devient pas automatiquement la couleur de texte de la page hôte. Le fichier peut plutôt contenir ses propres règles de thème. Voici le petit SVG adaptatif complet utilisé dans notre test original : ```xml ``` Pour une image SVG intégrée, sa requête de préférence peut refléter le schéma de couleurs utilisé par l’élément d’intégration. [La spécification CSS Color Adjustment](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) décrit cette relation. C’est un signal de schéma, pas le franchissement des sélecteurs CSS ordinaires de la page hôte vers le fichier. Dans notre dispositif de test, un hôte définit explicitement `color-scheme: light` ; un autre définit `color-scheme: dark`. Les deux chargent le même fichier adaptatif. Leurs couleurs de fond et de texte sont aussi délibérément définies. La propriété seule ne fournirait pas ces styles complets. Si ton application contrôle le thème, coordonne son schéma hôte avec ce choix lorsque tu utilises cette approche. Un fond sombre avec un hôte qui déclare encore un schéma clair peut envoyer un autre signal que celui prévu. ## Compare les trois voies dans un vrai navigateur Notre dispositif HTML original possède deux hôtes à schéma fixe en haut. En dessous, un bouton change le thème manuel de la page pour un signe en ligne et une image externe à couleurs fixes. Ce fichier témoin externe contient la même géométrie, mais aucune règle média de thème sombre. Le navigateur signalait une préférence utilisateur claire. Cliquer sur le bouton de thème manuel faisait passer le remplissage principal en ligne de `rgb(24, 60, 53)` à `rgb(245, 240, 231)`, et son accent de `rgb(197, 136, 104)` à `rgb(255, 195, 77)`. La lecture de préférence restait claire. Les sélecteurs propres à la page provoquaient ce changement de peinture. Les deux images du haut affichaient les peintures claires et sombres choisies par leurs schémas hôtes respectifs. L’image externe fixe gardait son dessin vert et cuivré même lorsque sa surface environnante devenait sombre et que la valeur calculée de `color` de son élément image HTML était violette. ![Test réel dans le navigateur comparant le même SVG externe adaptatif sur hôtes clair et sombre, un logo en ligne à thème manuel et un témoin externe fixe qui garde ses peintures originales](https://perfectvector.com/blog/dark-mode-svg-logo/theme-ownership.webp) *Test original réel HTML/CSS dans le navigateur intégré à Codex. Le thème manuel de page est sombre tandis que la requête de préférence utilisateur indique clair. Les schémas des hôtes de la rangée supérieure sont des entrées de test explicites ; la préférence du système d’exploitation n’a pas été changée.* Nous avons inspecté les styles calculés et le résultat réellement rendu. Les trois images externes se chargeaient à leurs dimensions naturelles de 140 × 105 et s’affichaient à 280 × 210. Le test établit le comportement de ces fichiers dans cette session de navigateur. Ce n’est pas un test multinavigateur, de clients de messagerie, d’exportation PDF ou de changement de système d’exploitation. ## Teste l’usage final, pas seulement le fichier isolé Ouvre séparément le SVG original pour contrôler sa géométrie, puis inspecte-le à travers son intégration réelle dans la page. Vérifie les deux états de thème, l’accent, les ouvertures transparentes et le fond immédiat. Un logo adaptatif peut aussi changer sa composition à une largeur réduite ; notre [guide des compositions de logo responsives](https://perfectvector.com/fr/blog/responsive-svg-logo-lockup) traite cette décision séparée. Une image SVG externe comporte des restrictions : [MDN indique que les scripts sont désactivés et les ressources externes limitées](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image). Garde les styles nécessaires dans la ressource pour l’approche montrée ici et teste le véritable contexte de livraison. Un résultat de navigateur ne promet pas le même comportement dans un moteur d’e-mail ou un importateur de dessin. Pour un logo adapté disponible uniquement en PNG ou JPEG, [le flux de vectorisation de logo PerfectVector](https://perfectvector.com/fr/vectorize-logo) peut reconstruire des chemins pour un SVG candidat. Compare sa silhouette, ses lettres et petits espaces à la source avant de préparer les variantes de thème. La vectorisation n’attribue pas des rôles sémantiques de peinture, n’ajoute pas la logique de thème de ton application et n’approuve pas une variante de marque inversée. Notre signe de test a été créé directement en formes vectorielles. ## FAQ **Une page sombre recolore-t-elle automatiquement un logo SVG externe ?** Non. Les règles de peinture internes à l’image comptent toujours. Un SVG externe adaptatif peut utiliser sa propre requête de préférence avec le schéma de couleurs de l’élément d’intégration ; un SVG à couleurs fixes peut conserver ses peintures originales. **Une classe manuelle de thème sombre change-t-elle prefers-color-scheme ?** Pas à elle seule. La classe ou l’attribut de données est un état applicatif. Dans notre test, le thème manuel de la page changeait tandis que la requête de préférence utilisateur du navigateur restait claire. **Faut-il inverser toutes les couleurs du logo SVG pour le mode sombre ?** Utilise des variantes approuvées lorsqu’elles existent. Inspecte la peinture principale, l’accent, les contours et les ouvertures sur la surface prévue au lieu de supposer qu’une inversion globale préserve le dessin. ## Sources 1. [MDN : prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) — Entrées de préférence utilisateur et comportement du SVG intégré. 2. [MDN : color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) — Prise en charge des schémas et responsabilité séparée de l’auteur pour les styles. 3. [CSS Color Adjustment : effets du schéma de couleurs utilisé](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) — Signal de schéma fourni au contenu intégré. 4. [MDN : SVG comme image](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — Restrictions des scripts et ressources dans le contexte image. *** Besoin de chemins éditables à partir d’un logo uniquement matriciel ? [Crée et inspecte un SVG candidat](https://perfectvector.com/fr/vectorize-logo), conserve le master accepté, puis définis les rôles de peinture et teste la véritable page à thème. ## Explore - [Read the HTML article](https://perfectvector.com/fr/blog/dark-mode-svg-logo) - [Logo SVG : réserve sa place pour éviter les décalages](https://perfectvector.com/fr/blog/svg-logo-layout-reservation.md) - [Supprime l’espace sous un SVG en ligne avec CSS](https://perfectvector.com/fr/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)