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