ダークテーマとかに切り替える。

皆さんこんにちはルサカです。最近ダークテーマ流行してますよね！
今回は、ユーザーのテーマを取得したり、ユーザーがテーマを変更できるといったものを作って行きたいと思います。
## まぁ作っていこう！

``` CSS
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
```
っていう方法でもダークテーマとかの切り替えはできますが、
テーマを変更する処理が結構めんどくさいので、今回は、以下のコードのように``` body ```タグに``` theme ```属性を作ってテーマの切り替えを容易にします。

``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ダークテーマ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body theme="dark">
    
</body>
</html>
```
ちなみにCSSはこのように属性ごとにCSS変数を設定しています。
CSS変数についてあまりわからないという方は
[CSS カスタムプロパティ (変数) の使用(MDN)](https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties)を見ると理解が深まると思います。

``` CSS
:root {
    --s-1: 0 2px 5px rgba(0, 0, 0, 0.26);
    --s-2: 0 2px 10px rgba(0, 0, 0, .2);
}

body[theme="dark"] {
    --m-bg: #121212;
    --d-color: #fff;
    --s-color: #9F9F9F;
    --s-bg: #242424;
    --b-1: 1px #242424 solid;
    --a-color: #EF5455;
}

body[theme="light"] {
    --m-bg: #FFF;
    --d-color: #202124;
    --s-color: #5F6368;
    --b-1: 1px solid #dadce0;
    --a-color: #EF5455;
}
@keyframes s-1 {
    0% {
        box-shadow: 0 0.001px 0.001px rgba(0, 0, 0, 0.26);
    }
    100% {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
    }
}

body{
    background: var(--m-bg);
    color: var(--d-color);
}
```
## 切り替え系を作っていこう！
ここからが本番ですね！
まずHTMLにこのようなボタンを追加してください。

``` html
<button id="themechange">テーマの変更</button>
```
ちなみに私の場合は以下のようにボタンを装飾しました。

```CSS
#themechange{
    border: var(--b-1);
    background: var(--m-bg);
    color: var(--a-color);
    font-size: 18px;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 4px;
    transition: all 1s;
}

#themechange:hover{
    border-color: var(--a-color);
    background: var(--a-color);
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
    animation: s-1 1s ease 0s 1 alternate none running;
}
#themechange:focus{
    outline: none;
}
```
切り替えの処理はJavaScriptで書きます。

``` javascript
document.getElementById("themechange").addEventListener("click",function(){
    var theme = document.body.getAttribute("theme")
    if (theme === "dark") {
        document.body.setAttribute("theme","light")
    } else {
        document.body.setAttribute("theme","dark")
    }
})
```
次に、OSのテーマを取得して、テーマの初期値を設定しましょう。
コードは以下のようになります。

``` javascript
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.body.setAttribute("theme","dark")
} else {
    document.body.setAttribute("theme","light")
}
```
これで基本的なテーマ切り替えが完了しました。
他にも、ユーザーがテーマを変更したらその設定をlocalstorageに保存するといったことができると思います。
## デモ！
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="anyfre"
        data-slug-hash="jOEmWEW"
        style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
        data-pen-title="jOEmWEW">
        <span>See the Pen <a href="https://codepen.io/anyfre/pen/jOEmWEW">
                jOEmWEW</a> by anyfre (<a href="https://codepen.io/anyfre">@anyfre</a>)
            on <a href="https://codepen.io">CodePen</a>.</span>
    </p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
## まとめ
結構簡単にできました。
[Twitter](https://twitter.com/Luscaca_)フォローしてください！