[{"data":1,"prerenderedAt":585},["ShallowReactive",2],{"blog-theme-sombre-scss":3},{"id":4,"title":5,"ancienne_url":6,"body":7,"date":575,"description":576,"extension":577,"meta":578,"navigation":235,"path":579,"seo":580,"stem":581,"tags":582,"__hash__":584},"blog\u002Fblog\u002Ftheme-sombre-scss.md","Avoir le choix d'un thème sombre sur son site (SCSS et JavaScript)","\u002Fdivers\u002Ftheme_sombre_scss\u002F",{"type":8,"value":9,"toc":571},"minimark",[10,17,20,27,56,79,84,87,96,163,171,341,346,460,471,549,553,567],[11,12,13],"blockquote",{},[14,15,16],"p",{},"Billet d'archive (2020), rédigé à l'époque du site sous Hugo. Le principe reste\nvalable ; le site actuel (Nuxt) utilise la même mécanique de variables CSS et\nde préférence système.",[14,18,19],{},"Étonnamment, je préfère les thèmes sombres, sûrement une dérive des journées\npassées sur une flotte de terminaux (et des soirées ?). Du coup, mon site web\nétait aussi en sombre. Mais tout le monde n'est pas fan, et le noir peut être mal\nperçu. Alors, pourquoi ne pas donner le choix au visiteur ?",[14,21,22],{},[23,24],"img",{"alt":25,"src":26},"Le site avec un thème sombre ou clair","\u002Fimgs\u002Ftheme_sombre_example.png",[14,28,29,30,37,38,42,43,46,47,50,51,55],{},"Sur cette piste, il existe plusieurs voies. J'ai choisi de combiner le SCSS déjà\ninclus dans le ",[31,32,36],"a",{"href":33,"rel":34},"https:\u002F\u002Fthemes.gohugo.io\u002Fhermit\u002F",[35],"nofollow","thème Hugo",", des ",[39,40,41],"strong",{},"variables\nCSS"," et des ",[39,44,45],{},"attributs de page"," pour une mise à jour instantanée, du\n",[39,48,49],{},"JavaScript"," et la requête de média CSS ",[52,53,54],"code",{},"prefers-color-scheme",". On obtient une\nsolution dont le thème :",[57,58,59,73,76],"ul",{},[60,61,62,63,66,67,72],"li",{},"est adapté aux préférences générales ",[52,64,65],{},"clair\u002Fsombre"," de l'utilisateur, si c'est\n",[31,68,71],{"href":69,"rel":70},"https:\u002F\u002Fcaniuse.com\u002F#feat=prefers-color-scheme",[35],"supporté par le navigateur"," ;",[60,74,75],{},"est modifiable localement par l'utilisateur avec un bouton ;",[60,77,78],{},"dont le choix est stocké pour les visites suivantes.",[80,81,83],"h3",{"id":82},"concrètement","Concrètement",[14,85,86],{},"En gardant la structure de mon site en Hugo, cela donnait :",[57,88,89],{},[60,90,91,92,95],{},"dans ",[52,93,94],{},"\u002Fassets\u002Fscss\u002F_predefined.scss",", on définit les couleurs :",[97,98,103],"pre",{"className":99,"code":100,"language":101,"meta":102,"style":102},"language-scss shiki shiki-themes github-light github-dark-default","$text: #000000;\n$background: #ffffff;\n$darkmode-text: #ffffff;\n$darkmode-background: #000000;\n","scss","",[52,104,105,126,139,151],{"__ignoreMap":102},[106,107,110,114,118,122],"span",{"class":108,"line":109},"line",1,[106,111,113],{"class":112},"sjlk-","$text",[106,115,117],{"class":116},"sfpNf",": ",[106,119,121],{"class":120},"sPgVT","#000000",[106,123,125],{"class":124},"szmH1",";\n",[106,127,129,132,134,137],{"class":108,"line":128},2,[106,130,131],{"class":112},"$background",[106,133,117],{"class":116},[106,135,136],{"class":120},"#ffffff",[106,138,125],{"class":124},[106,140,142,145,147,149],{"class":108,"line":141},3,[106,143,144],{"class":112},"$darkmode-text",[106,146,117],{"class":116},[106,148,136],{"class":120},[106,150,125],{"class":124},[106,152,154,157,159,161],{"class":108,"line":153},4,[106,155,156],{"class":112},"$darkmode-background",[106,158,117],{"class":116},[106,160,121],{"class":120},[106,162,125],{"class":124},[57,164,165],{},[60,166,91,167,170],{},[52,168,169],{},"\u002Fassets\u002Fscss\u002Fstyle.scss",", on définit les variables CSS et on les\napplique là où il faut :",[97,172,174],{"className":99,"code":173,"language":101,"meta":102,"style":102},"[data-theme=\"light\"] {\n  --background: #{$background};\n  --text: #{$text};\n}\n\n[data-theme=\"dark\"] {\n  --background: #{$darkmode-background};\n  --text: #{$darkmode-text};\n}\n\nbody {\n  color: var(--text);\n  background: var(--background);\n}\n",[52,175,176,201,213,225,230,237,255,267,279,284,289,299,319,336],{"__ignoreMap":102},[106,177,178,181,185,189,193,196,198],{"class":108,"line":109},[106,179,180],{"class":124},"[",[106,182,184],{"class":183},"syv4q","data-theme",[106,186,188],{"class":187},"sDgYj","=",[106,190,192],{"class":191},"sNbzA","\"",[106,194,195],{"class":124},"light",[106,197,192],{"class":191},[106,199,200],{"class":124},"] {\n",[106,202,203,206,208,211],{"class":108,"line":128},[106,204,205],{"class":112},"  --background",[106,207,117],{"class":124},[106,209,210],{"class":112},"#{$background}",[106,212,125],{"class":124},[106,214,215,218,220,223],{"class":108,"line":141},[106,216,217],{"class":112},"  --text",[106,219,117],{"class":124},[106,221,222],{"class":112},"#{$text}",[106,224,125],{"class":124},[106,226,227],{"class":108,"line":153},[106,228,229],{"class":124},"}\n",[106,231,233],{"class":108,"line":232},5,[106,234,236],{"emptyLinePlaceholder":235},true,"\n",[106,238,240,242,244,246,248,251,253],{"class":108,"line":239},6,[106,241,180],{"class":124},[106,243,184],{"class":183},[106,245,188],{"class":187},[106,247,192],{"class":191},[106,249,250],{"class":124},"dark",[106,252,192],{"class":191},[106,254,200],{"class":124},[106,256,258,260,262,265],{"class":108,"line":257},7,[106,259,205],{"class":112},[106,261,117],{"class":124},[106,263,264],{"class":112},"#{$darkmode-background}",[106,266,125],{"class":124},[106,268,270,272,274,277],{"class":108,"line":269},8,[106,271,217],{"class":112},[106,273,117],{"class":124},[106,275,276],{"class":112},"#{$darkmode-text}",[106,278,125],{"class":124},[106,280,282],{"class":108,"line":281},9,[106,283,229],{"class":124},[106,285,287],{"class":108,"line":286},10,[106,288,236],{"emptyLinePlaceholder":235},[106,290,292,296],{"class":108,"line":291},11,[106,293,295],{"class":294},"sXQ1o","body",[106,297,298],{"class":124}," {\n",[106,300,302,305,307,310,313,316],{"class":108,"line":301},12,[106,303,304],{"class":120},"  color",[106,306,117],{"class":124},[106,308,309],{"class":120},"var",[106,311,312],{"class":124},"(",[106,314,315],{"class":112},"--text",[106,317,318],{"class":124},");\n",[106,320,322,325,327,329,331,334],{"class":108,"line":321},13,[106,323,324],{"class":120},"  background",[106,326,117],{"class":124},[106,328,309],{"class":120},[106,330,312],{"class":124},[106,332,333],{"class":112},"--background",[106,335,318],{"class":124},[106,337,339],{"class":108,"line":338},14,[106,340,229],{"class":124},[57,342,343],{},[60,344,345],{},"la checkbox à insérer où l'on veut :",[97,347,351],{"className":348,"code":349,"language":350,"meta":102,"style":102},"language-html shiki shiki-themes github-light github-dark-default","\u003Cdiv class=\"theme-switch-wrapper\">\n  \u003Clabel class=\"theme-switch\" for=\"checkbox\">\n    \u003Cinput type=\"checkbox\" id=\"checkbox\" \u002F>\n    \u003Cdiv class=\"slider round\">\u003C\u002Fdiv>\n  \u003C\u002Flabel>\n\u003C\u002Fdiv>\n","html",[52,352,353,372,397,422,442,451],{"__ignoreMap":102},[106,354,355,358,361,364,366,369],{"class":108,"line":109},[106,356,357],{"class":124},"\u003C",[106,359,360],{"class":294},"div",[106,362,363],{"class":183}," class",[106,365,188],{"class":124},[106,367,368],{"class":191},"\"theme-switch-wrapper\"",[106,370,371],{"class":124},">\n",[106,373,374,377,380,382,384,387,390,392,395],{"class":108,"line":128},[106,375,376],{"class":124},"  \u003C",[106,378,379],{"class":294},"label",[106,381,363],{"class":183},[106,383,188],{"class":124},[106,385,386],{"class":191},"\"theme-switch\"",[106,388,389],{"class":183}," for",[106,391,188],{"class":124},[106,393,394],{"class":191},"\"checkbox\"",[106,396,371],{"class":124},[106,398,399,402,405,408,410,412,415,417,419],{"class":108,"line":141},[106,400,401],{"class":124},"    \u003C",[106,403,404],{"class":294},"input",[106,406,407],{"class":183}," type",[106,409,188],{"class":124},[106,411,394],{"class":191},[106,413,414],{"class":183}," id",[106,416,188],{"class":124},[106,418,394],{"class":191},[106,420,421],{"class":124}," \u002F>\n",[106,423,424,426,428,430,432,435,438,440],{"class":108,"line":153},[106,425,401],{"class":124},[106,427,360],{"class":294},[106,429,363],{"class":183},[106,431,188],{"class":124},[106,433,434],{"class":191},"\"slider round\"",[106,436,437],{"class":124},">\u003C\u002F",[106,439,360],{"class":294},[106,441,371],{"class":124},[106,443,444,447,449],{"class":108,"line":232},[106,445,446],{"class":124},"  \u003C\u002F",[106,448,379],{"class":294},[106,450,371],{"class":124},[106,452,453,456,458],{"class":108,"line":239},[106,454,455],{"class":124},"\u003C\u002F",[106,457,360],{"class":294},[106,459,371],{"class":124},[57,461,462],{},[60,463,464,465,467,468,470],{},"côté JavaScript, on change le curseur et l'attribut de page ",[52,466,184],{},",\net on écoute ",[52,469,54],{}," :",[97,472,476],{"className":473,"code":474,"language":475,"meta":102,"style":102},"language-javascript shiki shiki-themes github-light github-dark-default","const toggleSwitch = document.querySelector('.theme-switch input[type=\"checkbox\"]');\nconst currentTheme = localStorage.getItem('theme');\n\nif (currentTheme) {\n  document.documentElement.setAttribute('data-theme', currentTheme);\n  toggleSwitch.checked = currentTheme === 'dark';\n}\n\nfunction switchTheme(e) {\n  const theme = e.target.checked ? 'dark' : 'light';\n  document.documentElement.setAttribute('data-theme', theme);\n  localStorage.setItem('theme', theme);\n}\n\ntoggleSwitch.addEventListener('change', switchTheme, false);\n","javascript",[52,477,478,483,488,492,497,502,507,511,515,520,525,530,535,539,543],{"__ignoreMap":102},[106,479,480],{"class":108,"line":109},[106,481,482],{},"const toggleSwitch = document.querySelector('.theme-switch input[type=\"checkbox\"]');\n",[106,484,485],{"class":108,"line":128},[106,486,487],{},"const currentTheme = localStorage.getItem('theme');\n",[106,489,490],{"class":108,"line":141},[106,491,236],{"emptyLinePlaceholder":235},[106,493,494],{"class":108,"line":153},[106,495,496],{},"if (currentTheme) {\n",[106,498,499],{"class":108,"line":232},[106,500,501],{},"  document.documentElement.setAttribute('data-theme', currentTheme);\n",[106,503,504],{"class":108,"line":239},[106,505,506],{},"  toggleSwitch.checked = currentTheme === 'dark';\n",[106,508,509],{"class":108,"line":257},[106,510,229],{},[106,512,513],{"class":108,"line":269},[106,514,236],{"emptyLinePlaceholder":235},[106,516,517],{"class":108,"line":281},[106,518,519],{},"function switchTheme(e) {\n",[106,521,522],{"class":108,"line":286},[106,523,524],{},"  const theme = e.target.checked ? 'dark' : 'light';\n",[106,526,527],{"class":108,"line":291},[106,528,529],{},"  document.documentElement.setAttribute('data-theme', theme);\n",[106,531,532],{"class":108,"line":301},[106,533,534],{},"  localStorage.setItem('theme', theme);\n",[106,536,537],{"class":108,"line":321},[106,538,229],{},[106,540,541],{"class":108,"line":338},[106,542,236],{"emptyLinePlaceholder":235},[106,544,546],{"class":108,"line":545},15,[106,547,548],{},"toggleSwitch.addEventListener('change', switchTheme, false);\n",[80,550,552],{"id":551},"références","Références",[57,554,555,561],{},[60,556,557],{},[31,558,559],{"href":559,"rel":560},"https:\u002F\u002Fdev.to\u002Fananyaneogi\u002Fcreate-a-dark-light-mode-switch-with-css-variables-34l8",[35],[60,562,563],{},[31,564,565],{"href":565,"rel":566},"https:\u002F\u002Fmedium.com\u002F@jonas_duri\u002Fenable-dark-mode-with-css-variables-and-javascript-today-66cedd3d7845",[35],[568,569,570],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sjlk-, html code.shiki .sjlk-{--shiki-default:#E36209;--shiki-dark:#FFA657}html pre.shiki code .sfpNf, html code.shiki .sfpNf{--shiki-default:#24292E;--shiki-dark:#FFA657}html pre.shiki code .sPgVT, html code.shiki .sPgVT{--shiki-default:#005CC5;--shiki-dark:#79C0FF}html pre.shiki code .szmH1, html code.shiki .szmH1{--shiki-default:#24292E;--shiki-dark:#E6EDF3}html pre.shiki code .syv4q, html code.shiki .syv4q{--shiki-default:#6F42C1;--shiki-dark:#79C0FF}html pre.shiki code .sDgYj, html code.shiki .sDgYj{--shiki-default:#D73A49;--shiki-dark:#FF7B72}html pre.shiki code .sNbzA, html code.shiki .sNbzA{--shiki-default:#032F62;--shiki-dark:#A5D6FF}html pre.shiki code .sXQ1o, html code.shiki .sXQ1o{--shiki-default:#22863A;--shiki-dark:#7EE787}",{"title":102,"searchDepth":128,"depth":128,"links":572},[573,574],{"id":82,"depth":141,"text":83},{"id":551,"depth":141,"text":552},"2020-01-08","Donner au visiteur le choix entre thème clair et sombre : variables CSS, prefers-color-scheme, un peu de JavaScript et un choix mémorisé.","md",{},"\u002Fblog\u002Ftheme-sombre-scss",{"title":5,"description":576},"blog\u002Ftheme-sombre-scss",[52,583],"hugo","km71SYYT8YL0D68Q-ccP02j9OuShdQgvf3d_YX-lLcc",1783955632941]