4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-11-28

theme-colorについて

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?