Au d\u00e9but on se dit qu’il faut questionner le choix utilisateur avec une mediaQuery:<\/p>\n\n\n\n
(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)<\/code><\/pre>\n\n\n\nReste que si l’on est dans un contexte incertain, d\u00e9veloppement d’un add-on dans mon cas, se r\u00e9soudre \u00e0 cette simple requ\u00eate est une mauvaise strat\u00e9gies car le site sur lequel on vient se pluger lui peut ne pas adapter son style aux choix utilisateur (dark mode ou non).<\/p>\n\n\n\n
Sur Firefox qui est mon browser de dev, je ne comprenais pas pourquoi j’obtenais \u00ab\u00a0rgba(0, 0, 0, 0)\u00a0\u00bb avec la ligne suivante sur des pages o\u00f9 le fond est blanc mais le syst\u00e8me est en dark mode:<\/p>\n\n\n\n
window.getComputedStyle(document.body,null).getPropertyValue('background-color');<\/code><\/pre>\n\n\n\nA vrai dire, mon erreur \u00e9tait de comprendre cette ligne comme parlant de la couleur noire (0,0,0) alors que le dernier 0 indique en rgba que le fond est transparent, or le fond d’\u00e9cran d’une page web est blanc. La propriet\u00e9 (‘background’) retourne d’ailleurs ‘none’. Chrome et safari retournent une valeur rgb qui est plus simple \u00e0 comprendre.<\/p>\n\n\n\n
Au final, je pense \u00eatre pas mal avec ce bloc:<\/p>\n\n\n\n
var dark = false;\nlet bs = window.getComputedStyle(document.body,null);\nlet baco = bs.getPropertyValue('background-color');\n if(bs.getPropertyValue('background') == 'none') {\n if(!(\/rgba.*,\\s?0\\)$\/.test(baco))) {\n dark = true;\n }\n} else {\n let sacos = baco.split(\/,\/);\n let moy = 128;\n if((sacos != null) && (sacos.length > 2)) {\n moy = (parseInt(sacos[0].replace(\/\\D+\/g,''))+parseInt(sacos[1].replace(\/\\D\/g,''))+parseInt(sacos[2].replace(\/\\D\/g,''))) \/ 3;\n }\n \n if((moy < 128) && !(\/rgba.*,\\s?0\\)$\/.test(baco))) {\n dark = true;\n }\n}<\/code><\/pre>\n\n\n\nAu final, j’aime bien mon petit calcul pour essayer d’\u00e9valuer si la couleur est plut\u00f4t sombre ou claire.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Au d\u00e9but on se dit qu’il faut questionner le choix utilisateur avec une mediaQuery: Reste que si l’on est dans un contexte incertain, d\u00e9veloppement d’un add-on dans mon cas, se r\u00e9soudre \u00e0 cette simple requ\u00eate est une mauvaise strat\u00e9gies car le site sur lequel on vient se pluger lui peut ne pas adapter son style … Continuer la lecture de Let it be dark in javascript<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,41],"tags":[57,42,58],"class_list":["post-336","post","type-post","status-publish","format-standard","hentry","category-non-classe","category-remix","tag-css","tag-javascript","tag-styles"],"_links":{"self":[{"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/posts\/336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/comments?post=336"}],"version-history":[{"count":3,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/posts\/336\/revisions"}],"predecessor-version":[{"id":339,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/posts\/336\/revisions\/339"}],"wp:attachment":[{"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/media?parent=336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/categories?post=336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/tags?post=336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}