過去にWebシステムの管理画面を作った際に、管理画面としては無難な配色でリリースしたのですが、
一部の利用者からページの色合いがイマイチ気に入らない、といった意見をいただきました。
一部の意見で配色を変更したとしても、別の一部から同様の意見が出ないとも限らないため、
だったら各自で好みの配色を選択できるようにしてしまおう！
ということで、JavaScriptでそんな機能を作ってみました。
HTML
まずはHTMLです。
青、緑、赤の各ボタン押下をすることで、
<ul>のメニュー部分と<h1>の見出しの配色を変更することとします。
<button>のvalue値に配色コードを持たせています。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script src="sample.js"></script>
</head>
<body>
<ul>
<li>メニューA</li>
<li>メニューB</li>
<li>メニューC</li>
</ul>
<h1>見出しサンプル</h1>
<p>下のボタンをクリックで配色を変更します</p>
<button type="button" class="colorChangeButton" value="1">青</button>
<button type="button" class="colorChangeButton" value="2">緑</button>
<button type="button" class="colorChangeButton" value="3">赤</button>
</body>
</html>
CSS
以下が基本となるCSSです。
default.css
body {
background: #eee;
color: #111;
}
li {
display: inline-block;
padding: 2px 5px;
list-style: none;
}
以下は３パターンの配色用CSSファイルです。
color1.css
ul { background: #006; }
li { background: #669; }
h1 { color:#006; }
color2.css
ul { background: #060; }
li { background: #696; }
h1 { color:#060; }
color3.css
ul { background: #600; }
li { background: #966; }
h1 { color:#600; }
JavaScript
localStorageにユーザーが選択した配色コードを保存することで、
次回以降にページを開いても選択した配色で表示されます。
append()で配色用cssファイルを読み込ませるlinkタグを追加します。
各ボタンのonclickイベントにchange()を登録し、
ボタンクリックすることでlocalStorageに配色コード保存と配色CSSファイルの差し替えを行います。
sample.js
document.addEventListener('DOMContentLoaded', () => {
const cssId = 'colorCss';
const selector = '.colorChangeButton';
const keyName = 'colorType';
append(localStorage.getItem(keyName) || 1);
document.querySelectorAll(selector).forEach(function (button) {
button.addEventListener('click', {value: `${button.value}`, handleEvent: change});
});
function append(colorType) {
const link = document.createElement('link');
link.id = cssId;
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'color' + colorType + '.css');
document.getElementsByTagName('head')[0].appendChild(link);
}
function change() {
if (this.value === localStorage.getItem(keyName)) {
return;
}
localStorage.setItem(keyName, this.value);
document.getElementById(cssId).remove();
append(this.value);
}
});
さいごに
簡単なHTMLとCSSの例でしたが、これを応用することで複雑な配色やレイアウトの切り替えなど、使える場面はいろいろありそうな気がします。
何かの参考になれば幸いです。