meta theme-colorを動的に制御する

theme-colorについて

アドレスバー・通知エリアの背景色指定できるHTMLタグ。
※今のところ主要ブラウザではAndroid Chromeのみ対応

※Facebookの例

作ったもの

Demo

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でランダムに色を変化させたり
• 今居るコンテンツのカラーに合わせてスクロールイベントで変化させてみたり