CSSã¡ãã£ã¢ã¯ãšãªã掻çšããŠããŠã§ããµã€ãã®ã«ã©ãŒã¹ããŒã ããŠãŒã¶ãŒã®OSããŒãïŒã©ã€ããŸãã¯ããŒã¯ïŒãšçµ±åããã¢ã¯ã»ã·ããªãã£ã®é«ãåªããäœéšãå®çŸããæ¹æ³ãåŠã³ãŸãã
CSSã«ã©ãŒã¹ããŒã ïŒã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®ããã®ã·ã¹ãã ããŒãçµ±åã®å°å ¥
仿¥ã®å€æ§ãªããžã¿ã«ç°å¢ã«ãããŠãããŸããŸãªããã€ã¹ããã©ãããã©ãŒã ã§äžè²«æ§ããããæ¥œãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããšãæãéèŠã§ããããã®éèŠãªåŽé¢ã¯ããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ã®ã«ã©ãŒã¹ããŒã ããŠãŒã¶ãŒã®ã·ã¹ãã èšå®ãå ·äœçã«ã¯éžæãããããŒãïŒã©ã€ããŸãã¯ããŒã¯ïŒã«é©å¿ãããããšã§ããããã«ãããèŠèŠçãªé åãé«ãŸãã ãã§ãªããã¢ã¯ã»ã·ããªãã£ãšãŠãŒã¶ãŒæºè¶³åºŠãå€§å¹ ã«åäžããŸãããã®ããã°æçš¿ã§ã¯ãCSSãžã®ã·ã¹ãã ããŒãçµ±åã®ããã»ã¹ãã¬ã€ãããã°ããŒãã«ãªèªè ã«ã·ãŒã ã¬ã¹ã§ããŒãœãã©ã€ãºããããšã¯ã¹ããªãšã³ã¹ãä¿èšŒããŸãã
ã·ã¹ãã ããŒãèšå®ã®çè§£
WindowsãmacOSãAndroidãiOSãªã©ã®ææ°ã®ãªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã§ã¯ããŠãŒã¶ãŒã¯ã·ã¹ãã å šäœã®ããŒãïŒéåžžã¯ã©ã€ãã¢ãŒããŸãã¯ããŒã¯ã¢ãŒãïŒãéžæã§ããŸãããã®èšå®ã¯ããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã®ã€ã³ã¿ãŒãã§ã€ã¹ãšå€ãã®ã¢ããªã±ãŒã·ã§ã³ã®å€èгã«åœ±é¿ãäžããŸããCSSã¡ãã£ã¢ã¯ãšãªã掻çšããããšã§ããŠãŒã¶ãŒãåªå ããã«ã©ãŒã¹ããŒã ãæ€åºããããã«å¿ããŠãŠã§ããµã€ãã®ã¹ã¿ã€ã«ã調æŽã§ããŸãã
prefers-color-schemeã¡ãã£ã¢ã¯ãšãª
prefers-color-schemeã¡ãã£ã¢ã¯ãšãªã¯ãã·ã¹ãã ããŒãçµ±åã®éµãšãªããŸããããã«ããããŠãŒã¶ãŒãéžæããããŒãã«åºã¥ããŠç°ãªãCSSã«ãŒã«ãé©çšã§ããŸããå¯èœãªå€ã¯æ¬¡ã®ãšããã§ãã
lightïŒãŠãŒã¶ãŒãã©ã€ãããŒããåªå ããããšã瀺ããŸããdarkïŒãŠãŒã¶ãŒãããŒã¯ããŒããåªå ããããšã瀺ããŸããno-preferenceïŒãŠãŒã¶ãŒãåªå èšå®ã衚æããŠããªãããšã瀺ããŸãã
ãã®ã¡ãã£ã¢ã¯ãšãªã®äœ¿ç𿹿³ã®åºæ¬çãªäŸã次ã«ç€ºããŸãã
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #eee;
}
}
ãã®ã³ãŒãã¹ããããã¯ããŠãŒã¶ãŒã®ã·ã¹ãã ãããŒã¯ã¢ãŒãã®å Žåãèæ¯è²ãæ¿ãç°è²ïŒ#333ïŒã«ãããã¹ãã®è²ãæããç°è²ïŒ#eeeïŒã«èšå®ããŸãã
ã·ã¹ãã ããŒãçµ±åã®å®è£ ïŒã¹ããããã€ã¹ãããã¬ã€ã
CSSã§ã·ã¹ãã ããŒãçµ±åãå®è£ ããæ¹æ³ã®å®è·µçãªäŸãèŠãŠãããŸãããã
1. ããã©ã«ãã¹ã¿ã€ã«ã®ç¢ºç«
ãŸããããã©ã«ãã®ã¹ã¿ã€ã«ã確ç«ããŸããããã¯éåžžãã©ã€ãããŒãçšã«ãªããŸããããã«ãããåªå
èšå®ãæå®ããŠããªããŠãŒã¶ãŒïŒãŸãã¯ãã©ãŠã¶ãprefers-color-schemeããµããŒãããŠããªããŠãŒã¶ãŒïŒã§ããèŠèŠçã«é
åçãªãšã¯ã¹ããªãšã³ã¹ãåŸãããŸããããšãã°ïŒ
body {
background-color: #fff;
color: #333;
font-family: sans-serif;
}
a {
color: #007bff;
}
a:hover {
color: #0056b3;
}
2. ããŒã¯ã¢ãŒãã¹ã¿ã€ã«ã®å®çŸ©
次ã«ããŠãŒã¶ãŒãããŒã¯ããŒããåªå
ããå Žåã«é©çšããå¿
èŠãããã¹ã¿ã€ã«ãå®çŸ©ããŸããprefers-color-schemeã¡ãã£ã¢ã¯ãšãªã䜿çšããŠããããã®ã¹ã¿ã€ã«ãã«ãã»ã«åããŸãã
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #eee;
}
a {
color: #90caf9;
}
a:hover {
color: #64b5f6;
}
}
ãã®äŸã§ã¯ãæãç°å¢ã«é©ããèæ¯è²ãšããã¹ãã®è²ã調æŽããŸããããŸãããªã³ã¯ã®è²ã倿ŽããŠãã³ã³ãã©ã¹ããšèŠèªæ§ãåäžãããŸããã
3. ç»åãšã¢ã€ã³ã³ã®åŠç
ç»åãšã¢ã€ã³ã³ã¯ãããŒã¯ã¢ãŒãã§è¡šç€ºãããèŠèŠçã«é åçãªç¶æ ãä¿ã€ããã«èª¿æŽãå¿ èŠã«ãªãå ŽåããããŸããCSSãã£ã«ã¿ãŒã䜿çšããããããŒã¯ã¢ãŒãçšã®ä»£æ¿ç»åãœãŒã¹ãæäŸããããšãæ€èšããŠãã ããã
CSSãã£ã«ã¿ãŒã®äœ¿çš
invertãbrightnessã®ãããªCSSãã£ã«ã¿ãŒã䜿çšããŠãç»åã®ã«ã©ãŒã調æŽã§ããŸãããã ãããããã®ãã£ã«ã¿ãŒã¯åžžã«æåŸ
ã©ããã®çµæãåŸããããšã¯éããªããããæ³šæããŠäœ¿çšããŠãã ãããããšãã°ïŒ
@media (prefers-color-scheme: dark) {
.logo {
filter: invert(1);
}
}
ãã®ã³ãŒãã¯ãããŒã¯ã¢ãŒãã®å Žåã.logoèŠçŽ ã®è²ãå転ãããŸããããã¯åçŽãªã¢ãã¯ãããŽã«ã¯é©ããŠããŸãããããè€éãªç»åã§ã¯åé¡ãçºçããå¯èœæ§ããããŸãã
代æ¿ç»åãœãŒã¹ã®æäŸ
ããä¿¡é Œæ§ã®é«ãæ¹æ³ã¯ãã©ã€ãããŒããšããŒã¯ããŒãçšã«æé©åãããåå¥ã®ç»åãœãŒã¹ãæäŸããããšã§ãã<picture>èŠçŽ ãŸãã¯CSSèæ¯ç»åãã¡ãã£ã¢ã¯ãšãªã§äœ¿çšããŠããããå®çŸã§ããŸããããšãã°ã<picture>èŠçŽ ã䜿çšããŸãã
<picture>
<source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
<img src="logo-light.png" alt="Logo">
</picture>
ãã®ã³ãŒãã¯ããŠãŒã¶ãŒãããŒã¯ããŒããåªå
ããå Žåã¯logo-dark.pngã衚瀺ãããã以å€ã®å Žåã¯logo-light.pngã衚瀺ããŸãã
4. ã»ãã³ãã£ãã¯ã«ã©ãŒå€æ°ïŒCSSã«ã¹ã¿ã ããããã£ïŒ
ã«ã©ãŒã¹ããŒã ã®ç®¡çã«ã¯ãCSSã«ã¹ã¿ã ããããã£ïŒå€æ°ïŒã䜿çšããããšã匷ããå§ãããŸããããã«ãããäžå€®ã®å Žæã«è²ãå®çŸ©ããã¹ã¿ã€ã«ã·ãŒãå šäœã§ç°¡åã«æŽæ°ã§ããŸãã
:root {
--bg-color: #fff;
--text-color: #333;
--link-color: #007bff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #333;
--text-color: #eee;
--link-color: #90caf9;
}
}
ãã®äŸã§ã¯ãèæ¯è²ãããã¹ãã®è²ããªã³ã¯ã®è²ã倿°ãšããŠå®çŸ©ããŸãããæ¬¡ã«ãããŒã¯ã¢ãŒãã¡ãã£ã¢ã¯ãšãªã¯ãããŒã¯ããŒãã«é©ããå€ã§ãããã®å€æ°ãæŽæ°ããŸãã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
JavaScriptçµ±å
CSSã¡ãã£ã¢ã¯ãšãªã¯ã»ãšãã©ã®å Žåã«ååã§ãããæ¬¡ã®ãããªããè€éãªã·ããªãªã§ã¯JavaScriptã䜿çšããå¿ èŠããããããããŸããã
- ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã«åºã¥ããŠã¹ã¿ã€ã«ãåçã«æŽæ°ããã
- ãŠãŒã¶ãŒã®ããŒãèšå®ãCookieãŸãã¯ããŒã«ã«ã¹ãã¬ãŒãžã«ä¿åããŠãã»ãã·ã§ã³éã§ä¿æããã
- ãŠãŒã¶ãŒãã©ã€ãã¢ãŒããšããŒã¯ã¢ãŒããæåã§åãæ¿ããããšãã§ããããŒãåãæ¿ããæäŸããã
window.matchMedia()ã¡ãœããã䜿çšããŠãJavaScriptã§ãŠãŒã¶ãŒãåªå
ããã«ã©ãŒã¹ããŒã ãããã°ã©ã ã§ç¢ºèªã§ããŸãã
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
// User prefers dark mode
}
ã¢ã¯ã»ã·ããªãã£ã®èæ ®äºé
ã·ã¹ãã ããŒãçµ±åãå®è£ ããéã¯ãã¢ã¯ã»ã·ããªãã£ãèæ ®ããããšãéèŠã§ããèŠèŠé害ã®ãããŠãŒã¶ãŒã«å¿«é©ãªèªæžäœéšãæäŸããããã«ãã«ã©ãŒã³ã³ãã©ã¹ãæ¯ãWCAGã¬ã€ãã©ã€ã³ãæºãããŠããããšã確èªããŠãã ããã
è²ã®ã³ã³ãã©ã¹ã
WebAIM Color Contrast Checkerãªã©ã®ã«ã©ãŒã³ã³ãã©ã¹ããã§ãã«ãŒã䜿çšããŠãããã¹ããšèæ¯è²ã®ã³ã³ãã©ã¹ããååã§ããããšã確èªããŠãã ãããWCAG AAæšæºã§ã¯ãéåžžã®ããã¹ãã®å Žåã¯å°ãªããšã4.5ïŒ1ã倧ããªããã¹ãã®å Žåã¯3ïŒ1ã®ã³ã³ãã©ã¹ãæ¯ãå¿ èŠã§ãã
ãã©ãŒã«ã¹ç¶æ
ç¹ã«ãã¿ã³ããªã³ã¯ãªã©ã®ã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ã®ãã©ãŒã«ã¹ç¶æ ã«æ³šæããŠãã ããããã©ãŒã«ã¹ç¶æ ãã©ã€ãã¢ãŒããšããŒã¯ã¢ãŒãã®äž¡æ¹ã§æç¢ºã«è¡šç€ºãããããšã確èªããŠãã ããã
ãã¹ããšãããã°
ããŸããŸãªãã©ãŠã¶ããã³ãªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã§å®è£ ã培åºçã«ãã¹ãããŸãããã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠãé©çšãããã¹ã¿ã€ã«ã調ã¹ãã·ã¹ãã ã®ããŒãèšå®ã«åºã¥ããŠæ£ããã¹ã¿ã€ã«ãé©çšãããŠããããšã確èªããŠãã ããã
ãã©ãŠã¶éçºè ããŒã«
ã»ãšãã©ã®ææ°ã®ãã©ãŠã¶ã«ã¯ãããŸããŸãªã«ã©ãŒã¹ããŒã ãã·ãã¥ã¬ãŒãããããã®ããŒã«ãçšæãããŠããŸããããšãã°ãChrome DevToolsã§ã¯ã[ã¬ã³ããªã³ã°]ã¿ãã§prefers-color-schemeããšãã¥ã¬ãŒãã§ããŸãã
åœéåïŒi18nïŒãšããŒã«ãªãŒãŒã·ã§ã³ïŒl10nïŒ
ã·ã¹ãã ããŒãçµ±åã¯äž»ã«èŠèŠçãªè¡šçŸãæ±ããŸãããåœéçãªèªè ãžã®åœ±é¿ãèæ ®ããããšãéèŠã§ããæåãç°ãªããšãã«ã©ãŒã¹ããŒã ãšèŠèŠçãªçŸåŠã«é¢ãã奜ã¿ãç°ãªãå ŽåããããŸããç¹å®ã®æåã§åŠå®çãªæå³ãæã€è²ã䜿çšããããšã¯é¿ããŠãã ããããŠãŒã¶ãŒãããŒãèšå®ãããã«ã«ã¹ã¿ãã€ãºããããã®ãªãã·ã§ã³ãæäŸããããšãæ€èšããŠãã ãããããã«ã¯ãæåçã«é¢é£ã®ããã«ã©ãŒãã¬ãããå«ããããšãã§ããŸãã
ããã©ãŒãã³ã¹ã®æé©å
è€æ°ã®ã¹ã¿ã€ã«ã·ãŒãã䜿çšããããããŒãããšã«è€éãªCSSã«ãŒã«ã䜿çšãããããå Žåã¯ãããã©ãŒãã³ã¹ã«æ³šæããŠãã ãããäžèŠãªã¹ã¿ã€ã«ã®éè€ãé¿ããCSSã®æé©åææ³ïŒminifyãå§çž®ãªã©ïŒã®äœ¿çšãæ€èšããŠãã ããã
äžçäžã®äŸ
å€ãã®äººæ°ã®ãããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã«ã·ã¹ãã ããŒãçµ±åããã§ã«æ¡çšããŠããŸããããã€ãã®äŸã次ã«ç€ºããŸãã
- Apple.comïŒAppleã®ãŠã§ããµã€ãã¯ããŠãŒã¶ãŒã®ã·ã¹ãã èšå®ã«åºã¥ããŠã«ã©ãŒã¹ããŒã ãèªåçã«èª¿æŽããã·ãŒã ã¬ã¹ãªãã©ãŠãžã³ã°ãšã¯ã¹ããªãšã³ã¹ãæäŸããŸãã
- GitHub.comïŒGitHubã¯ã©ã€ãããŒããšããŒã¯ããŒãã®äž¡æ¹ãæäŸãããŠãŒã¶ãŒã®ã·ã¹ãã èšå®ã«åºã¥ããŠèªåçã«åãæ¿ãããŸãã
- Microsoft.comïŒMicrosoftã®ãŠã§ããµã€ãã¯ãAppleãšåæ§ã«ããŠãŒã¶ãŒã®ã·ã¹ãã ããŒãã«åãããŠäžè²«æ§ã®ãããšã¯ã¹ããªãšã³ã¹ãå®çŸããŸãã
- Twitter.comïŒTwitterã¯ããŠãŒã¶ãŒã®ã·ã¹ãã èšå®ãå°éããæåã§åãæ¿ããããšãã§ããããŒã¯ã¢ãŒããªãã·ã§ã³ãæäŸããŸãã
ãããã¯ã»ãã®äžäŸã§ãããä»ã®å€ãã®çµç¹ãã¢ã¯ã»ã·ããªãã£ãšãŠãŒã¶ãŒæºè¶³åºŠãåäžãããããã«ã·ã¹ãã ããŒãçµ±åãå®è£ ããŠããŸãã
çµè«
CSSã«ã·ã¹ãã ããŒãèšå®ãçµ±åããããšã¯ããŠã§ããµã€ããŸãã¯ã¢ããªã±ãŒã·ã§ã³ã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã®ã·ã³ãã«ã§ãããªãã匷åãªæ¹æ³ã§ããprefers-color-schemeã¡ãã£ã¢ã¯ãšãªã䜿çšããããšã§ãã°ããŒãã«ãªèªè
ã«ãšã£ãŠããããŒãœãã©ã€ãºãããã¢ã¯ã»ã·ãã«ãªãšã¯ã¹ããªãšã³ã¹ãäœæã§ããŸããã¢ã¯ã»ã·ããªãã£ãèæ
®ãã培åºçã«ãã¹ãããä¿å®ã®ããã«ã»ãã³ãã£ãã¯ã«ã©ãŒå€æ°ã䜿çšããããšãå¿ããªãã§ãã ãããã·ã¹ãã ããŒãçµ±åã®åãæŽ»çšããŠãããèŠèŠçã«é
åçã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªãŠã§ããäœæããŠãã ããã