{"id":38585,"date":"2022-10-11T10:50:00","date_gmt":"2022-10-11T08:50:00","guid":{"rendered":"https:\/\/www.codeur.com\/blog\/?p=38585"},"modified":"2025-09-12T14:28:28","modified_gmt":"2025-09-12T12:28:28","slug":"webdesign-site-dark-mode-css","status":"publish","type":"post","link":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/","title":{"rendered":"CSS : Comment passer votre site en mode sombre ?"},"content":{"rendered":"

La sp\u00e9cification CSS est en constante \u00e9volution. Le processus de mise en \u0153uvre de nouvelles fonctionnalit\u00e9s dans le CSS est compliqu\u00e9 : pour faire simple, disons qu\u2019un groupe de travail CSS d\u00e9cide des nouveaux \u00e9l\u00e9ments \u00e0 ajouter \u00e0 la sp\u00e9cification. Il appartient ensuite aux navigateurs de mettre en \u0153uvre ces nouveaux \u00e9l\u00e9ments, et les navigateurs choisissent dans quel ordre les mettre en \u0153uvre, ce qui explique pourquoi nous avons maintenant un d\u00e9calage dans la prise en charge des nouvelles fonctionnalit\u00e9s. Bien que cela puisse \u00eatre parfois ennuyeux, c’est une bien meilleure fa\u00e7on de proc\u00e9der, plut\u00f4t que si les navigateurs mettaient en \u0153uvre d\u2019un seul coup la sp\u00e9cification compl\u00e8te, comme nous l’avons vu dans les premiers temps du web.<\/p>\n

Le groupe de travail CSS est compos\u00e9 de membres de tous les principaux fournisseurs de navigateurs et d’autres soci\u00e9t\u00e9s technologiques comme Apple ou Adobe. Apple voulait trouver un moyen de d\u00e9tecter son nouveau mode sombre<\/a> dans le navigateur. Pour ce faire, la firme de Cupertino a pouss\u00e9 une recommandation \u00e0 la sp\u00e9cification pour une nouvelle requ\u00eate de m\u00e9dia de niveau 5.<\/p>\n

@media (prefers-color-scheme: light | dark)\n{ \u2026 }<\/pre>\n
Gr\u00e2ce \u00e0 cette media query, nous pouvons d\u00e9tecter si l’utilisateur utilise actuellement le mode clair ou fonc\u00e9 dans son syst\u00e8me d’exploitation.<\/p>\n
Il y a plusieurs fa\u00e7ons d’utiliser cette nouvelle requ\u00eate CSS pour mettre en \u0153uvre diff\u00e9rents th\u00e8mes. Nous allons en explorer trois dans ce tutoriel !<\/p>\n
D\u00e9couvrez comment bien utiliser le mode sombre dans votre design gr\u00e2ce \u00e0 l’article de Graphiste.com :\u00a0Web design : le guide du mode sombre<\/a><\/p><\/blockquote>\n
La fonction \u00ab Pr\u00e9f\u00e9rences de couleurs \u00bb pour g\u00e9rer le dark mode<\/h2>\n
\"wikipedia<\/p>\n
\u00c9tape 1 : Ajout de la fonction \u00ab\u00a0Pr\u00e9f\u00e9rences de couleurs\u00a0\u00bb<\/h3>\n
@media (prefers-color-scheme: dark) {\n\/* custom css *\/\n}<\/pre>\n
\u00c9tape 2 : Texte clair sur fond sombre<\/h3>\n
L’une des modifications les plus importantes est celle qui supplante la couleur de fond et la couleur du texte\u00a0:<\/p>\n
body {\nbackground-color : #1c1c1e ;\ncolor : #fefefe ;\n}<\/pre>\n
Attention : Pour \u00e9viter que le texte ne ressorte trop, et pour lui donner un aspect plus subtil lorsqu’il est en mode sombre, il est recommand\u00e9 d’\u00e9viter le blanc pur pour le texte. De m\u00eame, il est plus sage d’\u00e9viter d’utiliser le noir pur pour le fond.<\/p><\/blockquote>\n
\u00c9tape 3 : D\u00e9saturer les couleurs<\/h3>\n
Les couleurs d’accent sur un fond blanc (utilis\u00e9es par exemple pour les liens) peuvent appara\u00eetre plus vives sur un fond sombre, selon la couleur que vous utilisez actuellement. Si c’est le cas, d\u00e9saturez la couleur d’origine en une couleur moins satur\u00e9e.<\/p>\n
a {\ncolor : #5fa9ee ;\n}<\/pre>\n
Les images ont \u00e9galement tendance \u00e0 appara\u00eetre plus vives et, selon un sondage, la majorit\u00e9 des gens ont pr\u00e9f\u00e9r\u00e9 des images d\u00e9satur\u00e9es en mode sombre.<\/p>\n
img {\nfilter: grayscale(20%);\n}<\/pre>\n
Code final<\/h3>\n
@media (prefers-color-scheme: dark) {\nbody {\nbackground-color: #1c1c1e;\ncolor: #fefefe;\n}\na {\ncolor: #5fa9ee;\n}\nimg {\nfilter: grayscale(20%);\n}\n}<\/pre>\n
Cette approche modifie les principales composantes, mais pas toutes ! En fonction du style et du th\u00e8me de votre site, il y aura diff\u00e9rentes autres class\/id que vous devrez \u00e9galement modifier dans votre @media (Prefers-color-scheme: dark)<\/code> pour passer compl\u00e8tement du mode clair au mode fonc\u00e9.<\/p>\n
Attention : Ce que nous venons de faire fonctionne parfaitement bien sur des sites web de taille modeste. Cependant, cette m\u00e9thode serait un cauchemar \u00e0 g\u00e9rer sur un projet plus important, avec beaucoup d’\u00e9l\u00e9ments diff\u00e9rents qui doivent tous \u00eatre prioritaires.<\/p><\/blockquote>\n
Il existe une autre approche que nous allons d\u00e9tailler maintenant.<\/p>\n
\u00c0 lire aussi :<\/strong> Comment choisir le bon contraste de couleurs sur son site ?<\/a><\/p><\/blockquote>\n
Utilisez un filtre CSS pour activer le mode sombre<\/h2>\n
\"mode<\/a><\/figure>\n
L’une des valeurs que nous pouvons utiliser avec les filtres CSS est invert<\/code>. En effet, elle vous offre la possibilit\u00e9 de simplement appliquer cette valeur au HTML et inverser toutes les couleurs, ce qui donnerait un \u00ab mode sombre \u00bb.<\/p>\n
@media (prefers-color-scheme: dark) {\nhtml {\nfilter: invert(100%);\n}\n}<\/pre>\n
Attention : Bien que la m\u00e9thode \u00ab filter \u00bb fonctionne avec le contenu que nous avons dans notre document, elle n’est pas encore tr\u00e8s efficace. L’ombre de certains \u00e9l\u00e9ments, par exemple, se trouve \u00e9galement invers\u00e9e. Nous avons perdu le contr\u00f4le des styles, ce qui devient un probl\u00e8me encore plus important lorsque vous avez des arri\u00e8re-plans color\u00e9s. Nous avons \u00e9galement un tout nouveau probl\u00e8me \u00e0 prendre en compte lorsqu’il s’agit d’images. En effet, celles-ci se retrouvent \u00e9galement invers\u00e9es, offrant un retour involontaire au temps de l\u2019argentique et des n\u00e9gatifs.<\/p><\/blockquote>\n
Passez votre site en dark mode gr\u00e2ce aux Custom properties<\/h2>\n
\"messenger
\nLes m\u00e9thodes que nous avons explor\u00e9es jusqu’\u00e0 maintenant sont susceptibles de vous faire perdre le contr\u00f4le des styles, ou bien n\u00e9cessitent beaucoup de maintenance pour vous assurer que tout est mis \u00e0 jour en mode sombre.<\/p>\n
Une autre fa\u00e7on d’aborder la question existe : il vous suffit d’utiliser des \u00ab custom properties \u00bb pour d\u00e9finir vos couleurs et les remplacer par une \u00ab media query \u00bb.<\/p>\n
Afin d’utiliser les custom properties, vous devez la d\u00e9finir au sommet de votre CSS \u00e0 l’int\u00e9rieur de l’\u00e9l\u00e9ment :root<\/code>.<\/p>\n
:root {\n--background-color: #ededed;\n--page-background: #fff;\n--text-color: #212121;\n--color-alpha: #c3423f;\n}<\/pre>\n
Pour utiliser une propri\u00e9t\u00e9 personnalis\u00e9e, utilisez la syntaxe var(--custom-property-name)<\/code>.<\/p>\n
body {\nbackground-color: var(--background-color);\ncolor: var(--text-color);\n}\n.content-container {\nbackground-color: var(--page-background);\n}\n.text--alpha {\ncolor: var(--color-alpha);<\/pre>\n
Vous pouvez maintenant ajouter \u00e0 nouveau la \u00ab media query \u00bb, en passant cette fois outre les valeurs des \u00ab custom property \u00bb qui s’y trouvent. Vous la placerez juste apr\u00e8s la d\u00e9finition de :root<\/code>, et \u00e0 l’int\u00e9rieur de la requ\u00eate m\u00e9dia. Ainsi, vous pouvez simplement choisir de nouvelles valeurs pour toutes les couleurs du mode sombre.<\/p>\n
@media (prefers-color-scheme: dark) { :root {\n--background-color: #111;\n--page-background: #212121;\n--text-color: #ededed;\n--color-alpha: #50a8d8;\n}\n}<\/pre>\n
Gr\u00e2ce \u00e0 cette m\u00e9thode, vous gardez le contr\u00f4le de toute la feuille de style. Les images par exemple, ne seront pas affect\u00e9es : libre \u00e0 vous de les d\u00e9saturer l\u00e9g\u00e8rement !<\/p><\/blockquote>\n
Vous pouvez \u00e9galement faire appel \u00e0 un webdesigner freelance<\/a> pour passer votre site internet en mode sombre en toute s\u00e9curit\u00e9. Recevez rapidement de nombreux devis en postant votre projet gratuitement sur Codeur.com<\/a> !<\/p>\n
Enfin, pensez \u00e0 v\u00e9rifier la configuration par d\u00e9faut du navigateur de l’internaute. Une erreur UX courante est de proposer un dark mode, mais de ne pas l’activer par d\u00e9faut lorsque l’internaute utilise son navigateur en mode sombre.<\/p>\n","protected":false},"excerpt":{"rendered":"
La sp\u00e9cification CSS est en constante \u00e9volution. Le processus de mise en \u0153uvre de nouvelles fonctionnalit\u00e9s dans le CSS est compliqu\u00e9 : pour faire simple, disons qu\u2019un groupe de travail CSS d\u00e9cide des nouveaux \u00e9l\u00e9ments \u00e0 ajouter \u00e0 la sp\u00e9cification. Il appartient ensuite aux navigateurs de mettre en \u0153uvre ces nouveaux \u00e9l\u00e9ments, et les navigateurs choisissent […]<\/p>\n","protected":false},"author":5,"featured_media":38592,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[131],"tags":[79],"class_list":["post-38585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-ressources"],"acf":[],"yoast_head":"\nCSS : Comment passer votre site en mode sombre ?<\/title>\n<meta name=\"description\" content=\"De plus en plus d'internautes utilisent un mode sombre sur leur navigateur. D\u00e9couvrez comment adapter vos CSS pour cr\u00e9er un mode sombre.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS : Comment passer votre site en mode sombre ?\" \/>\n<meta property=\"og:description\" content=\"De plus en plus d'internautes utilisent un mode sombre sur leur navigateur. D\u00e9couvrez comment adapter vos CSS pour cr\u00e9er un mode sombre.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Codeur.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/fr-fr.facebook.com\/codeurfreelance\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-11T08:50:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-12T12:28:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/04\/dark-mode.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"618\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thomas Lazzaroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@totolazza\" \/>\n<meta name=\"twitter:site\" content=\"@codeur\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Lazzaroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"CSS : Comment passer votre site en mode sombre ?\",\"datePublished\":\"2022-10-11T08:50:00+00:00\",\"dateModified\":\"2025-09-12T12:28:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/\"},\"wordCount\":1006,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/04\/dark-mode.jpg\",\"keywords\":[\"Ressources\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/\",\"url\":\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/\",\"name\":\"CSS : Comment passer votre site en mode sombre ?\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/04\/dark-mode.jpg\",\"datePublished\":\"2022-10-11T08:50:00+00:00\",\"dateModified\":\"2025-09-12T12:28:28+00:00\",\"description\":\"De plus en plus d'internautes utilisent un mode sombre sur leur navigateur. D\u00e9couvrez comment adapter vos CSS pour cr\u00e9er un mode sombre.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#primaryimage\",\"url\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/04\/dark-mode.jpg\",\"contentUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/04\/dark-mode.jpg\",\"width\":1024,\"height\":618,\"caption\":\"dark mode site web\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.codeur.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement\",\"item\":\"https:\/\/www.codeur.com\/blog\/developpement\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Langages\",\"item\":\"https:\/\/www.codeur.com\/blog\/developpement\/langages\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"CSS\",\"item\":\"https:\/\/www.codeur.com\/blog\/developpement\/langages\/css\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"CSS : Comment passer votre site en mode sombre ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#website\",\"url\":\"https:\/\/www.codeur.com\/blog\/\",\"name\":\"Codeur.com\",\"description\":\"codeur\",\"publisher\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codeur.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\",\"name\":\"Codeur.com\",\"url\":\"https:\/\/www.codeur.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png\",\"contentUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png\",\"width\":2560,\"height\":465,\"caption\":\"Codeur.com\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/fr-fr.facebook.com\/codeurfreelance\/\",\"https:\/\/x.com\/codeur\",\"https:\/\/www.linkedin.com\/company\/codeur\/\",\"https:\/\/www.youtube.com\/channel\/UCgj9ySM9xy3gdL8qBafl9Uw\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"caption\":\"Thomas Lazzaroni\"},\"description\":\"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.\",\"sameAs\":[\"https:\/\/totolazza.com\",\"https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/\",\"https:\/\/x.com\/totolazza\"],\"url\":\"https:\/\/www.codeur.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS : Comment passer votre site en mode sombre ?","description":"De plus en plus d'internautes utilisent un mode sombre sur leur navigateur. D\u00e9couvrez comment adapter vos CSS pour cr\u00e9er un mode sombre.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/","og_locale":"fr_FR","og_type":"article","og_title":"CSS : Comment passer votre site en mode sombre ?","og_description":"De plus en plus d'internautes utilisent un mode sombre sur leur navigateur. D\u00e9couvrez comment adapter vos CSS pour cr\u00e9er un mode sombre.","og_url":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/","og_site_name":"Codeur.com","article_publisher":"https:\/\/fr-fr.facebook.com\/codeurfreelance\/","article_published_time":"2022-10-11T08:50:00+00:00","article_modified_time":"2025-09-12T12:28:28+00:00","og_image":[{"width":1024,"height":618,"url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/04\/dark-mode.jpg","type":"image\/jpeg"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@codeur","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#article","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"CSS : Comment passer votre site en mode sombre ?","datePublished":"2022-10-11T08:50:00+00:00","dateModified":"2025-09-12T12:28:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/"},"wordCount":1006,"commentCount":1,"publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/04\/dark-mode.jpg","keywords":["Ressources"],"articleSection":["CSS"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/","url":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/","name":"CSS : Comment passer votre site en mode sombre ?","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/04\/dark-mode.jpg","datePublished":"2022-10-11T08:50:00+00:00","dateModified":"2025-09-12T12:28:28+00:00","description":"De plus en plus d'internautes utilisent un mode sombre sur leur navigateur. D\u00e9couvrez comment adapter vos CSS pour cr\u00e9er un mode sombre.","breadcrumb":{"@id":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#primaryimage","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/04\/dark-mode.jpg","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2020\/04\/dark-mode.jpg","width":1024,"height":618,"caption":"dark mode site web"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codeur.com\/blog\/webdesign-site-dark-mode-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.codeur.com\/blog\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement","item":"https:\/\/www.codeur.com\/blog\/developpement\/"},{"@type":"ListItem","position":3,"name":"Langages","item":"https:\/\/www.codeur.com\/blog\/developpement\/langages\/"},{"@type":"ListItem","position":4,"name":"CSS","item":"https:\/\/www.codeur.com\/blog\/developpement\/langages\/css\/"},{"@type":"ListItem","position":5,"name":"CSS : Comment passer votre site en mode sombre ?"}]},{"@type":"WebSite","@id":"https:\/\/www.codeur.com\/blog\/#website","url":"https:\/\/www.codeur.com\/blog\/","name":"Codeur.com","description":"codeur","publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codeur.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.codeur.com\/blog\/#organization","name":"Codeur.com","url":"https:\/\/www.codeur.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","width":2560,"height":465,"caption":"Codeur.com"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/fr-fr.facebook.com\/codeurfreelance\/","https:\/\/x.com\/codeur","https:\/\/www.linkedin.com\/company\/codeur\/","https:\/\/www.youtube.com\/channel\/UCgj9ySM9xy3gdL8qBafl9Uw"]},{"@type":"Person","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","caption":"Thomas Lazzaroni"},"description":"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.","sameAs":["https:\/\/totolazza.com","https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/","https:\/\/x.com\/totolazza"],"url":"https:\/\/www.codeur.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/38585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/comments?post=38585"}],"version-history":[{"count":0,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/38585\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media\/38592"}],"wp:attachment":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media?parent=38585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/categories?post=38585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/tags?post=38585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}