theme-colorについて
アドレスバー・通知エリアの背景色指定できるHTMLタグ。 ※今のところ主要ブラウザではAndroid Chromeのみ対応作ったもの
JSからcontentの値を動的に変更すると通知エリアもリアルタイムで反映されます。
瞬時に色が変わるのではなくフェードで色が変わりますが、これはブラウザ側の仕様のようです。
var color1 = '#99f';
var color2 = '#4ff';
var $metaColor = document.querySelector('meta[name="theme-color"]');
var $body = document.getElementsByTagName('body')[0];
var $button = document.getElementsByTagName('button')[0];
$metaColor.setAttribute('content', color1);
$button.addEventListener('click', function() {
if(!$body.classList.contains('js-meta-theme-change')) {
$body.classList.add('js-meta-theme-change');
$metaColor.setAttribute('content', color2);
} else {
$body.classList.remove('js-meta-theme-change');
$metaColor.setAttribute('content', color1);
}
}, false);
演出アイデア
- サイドバーを開くイベント時に色を替えたり
- setIntervalでランダムに色を変化させたり
- 今居るコンテンツのカラーに合わせてスクロールイベントで変化させてみたり