Search code examples
javascriptjqueryanimationmeta-tags

Animation of meta name="theme-color"


I want to use an animation consisting of several colors, in <meta name="theme-color" content="..."> eg: #87CEFA , #1E90FF , #4169E1...

Is it possible to animate the theme-color in Chrome on Android?


Solution

  • Finally I found a solution to this problem with the following JavaScript code. With this code, 3 theme-colors on browser's URL bar change dynamically.

    var themeColorTest = new function() {
      function e() {
        "#87CEFA" === $themeColor.content ? $themeColor.content = "#1E90FF" : "#1E90FF" === $themeColor.content ? $themeColor.content = "#4169E1" : $themeColor.content = "#87CEFA",
          setTimeout(e, 500)
      }
      this.init = function() {
        $themeColor = document.querySelector("meta[name='theme-color']"),
          e()
      }
    };
    themeColorTest.init();
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>Animation of meta name theme-color</title>
      <meta name="theme-color" content="#87CEFA" />
    </head>
    
    <body>
      <p>More info on the <code>theme-color</code> meta tag is at this <a href="https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android?hl=en">Google Developers Blog Post</a>.</p>
    </body>
    
    </html>