皆さんこんにちはルサカです。最近ダークテーマ流行してますよね！
今回は、ユーザーのテーマを取得したり、ユーザーがテーマを変更できるといったものを作って行きたいと思います。
まぁ作っていこう！
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
っていう方法でもダークテーマとかの切り替えはできますが、
テーマを変更する処理が結構めんどくさいので、今回は、以下のコードのようにbodyタグにtheme属性を作ってテーマの切り替えを容易にします。
<!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)を見ると理解が深まると思います。
: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にこのようなボタンを追加してください。
<button id="themechange">テーマの変更</button>
ちなみに私の場合は以下のようにボタンを装飾しました。
#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で書きます。
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のテーマを取得して、テーマの初期値を設定しましょう。
コードは以下のようになります。
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.setAttribute("theme","dark")
} else {
document.body.setAttribute("theme","light")
}
これで基本的なテーマ切り替えが完了しました。
他にも、ユーザーがテーマを変更したらその設定をlocalstorageに保存するといったことができると思います。