{"id":1029,"date":"2015-04-28T20:20:15","date_gmt":"2015-04-28T18:20:15","guid":{"rendered":"http:\/\/www.robinglauser.ch\/blog\/?p=1029"},"modified":"2015-04-29T07:48:55","modified_gmt":"2015-04-29T05:48:55","slug":"animate-the-theme-color-of-your-website-in-chrome-on-android","status":"publish","type":"post","link":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/","title":{"rendered":"Animate the theme color of your website in chrome on android"},"content":{"rendered":"<blockquote><p><strong>Update:\u00a0<\/strong>Apparently it doesn&#8217;t work in the beta version of chrome. Thanks to \/u\/aurimas_chromium for reporting\u00a0the bug. (<a href=\"http:\/\/crbug.com\/482291\" target=\"_blank\">crbug.com\/482291<\/a>)<\/p>\n<p>It also only works if you have the option &#8220;Merge Tabs and Apps&#8221; turned on. Thanks to \/u\/plastix3000<\/p><\/blockquote>\n<p>You maybe knew that you could set the color of the navigation bar in chrome on android by adding the following meta tag to your website:<\/p>\n<pre>&lt;meta name=\"theme-color\" content=\"#db5945\"&gt;<\/pre>\n<p>But did you know that you can <a href=\"http:\/\/party.robinglauser.ch\" target=\"_blank\">animate<\/a> it?<\/p>\n<p>If created a little demo on <a href=\"http:\/\/party.robinglauser.ch\" target=\"_blank\">http:\/\/party.robinglauser.ch<\/a>\u00a0\u00a0so you can test it on your android device. (Tip: Click on the disco ball for extra party effect :D)<\/p>\n<p>Below is the main logic to animate the navigation:<\/p>\n<pre class=\"brush: jscript; light: true; title: ; notranslate\" title=\"\">\r\n var metaTag = $('meta&#x5B;name=&quot;theme-color&quot;]');\r\n var body = $('body');\r\n var hue = 0;\r\n\r\n function animate() {\r\n     hue++;\r\n\r\n     if (hue == 361) {\r\n         hue = 0;\r\n     }\r\n     metaTag.attr(&quot;content&quot;, 'hsl(' + parseInt(hue) + ',100%,50%)');\r\n     body.css({&quot;backgroundColor&quot;: 'hsl(' + parseInt(hue) + ',100%,50%)'});\r\n }\r\n\r\n setInterval(animate, 16);<\/pre>\n","protected":false},"excerpt":{"rendered":"<p class=\"excerpt\">Update:\u00a0Apparently it doesn&#8217;t work in the beta version of chrome. Thanks to \/u\/aurimas_chromium for reporting\u00a0the bug. (crbug.com\/482291) It also only works if you have the option &#8220;Merge Tabs and Apps&#8221; turned on. Thanks to \/u\/plastix3000 You maybe knew that you could set the color of the navigation bar in chrome on android by adding the following meta tag to your &#8230; <a class=\"read-more\" href=\"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/\">Read More<\/a><\/p>\n","protected":false},"author":2,"featured_media":1030,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[45,28],"tags":[101,102,103],"class_list":["post-1029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-random-pages","tag-android","tag-chrome","tag-webdev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Animate the theme color of your website in chrome on android - Robin Glauser<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animate the theme color of your website in chrome on android - Robin Glauser\" \/>\n<meta property=\"og:description\" content=\"Update:\u00a0Apparently it doesn&#8217;t work in the beta version of chrome. Thanks to \/u\/aurimas_chromium for reporting\u00a0the bug. (crbug.com\/482291) It also only works if you have the option &#8220;Merge Tabs and Apps&#8221; turned on. Thanks to \/u\/plastix3000 You maybe knew that you could set the color of the navigation bar in chrome on android by adding the following meta tag to your ... Read More\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/\" \/>\n<meta property=\"og:site_name\" content=\"Robin Glauser\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-28T18:20:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-04-29T05:48:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/04\/party.png\" \/>\n\t<meta property=\"og:image:width\" content=\"788\" \/>\n\t<meta property=\"og:image:height\" content=\"367\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Robin Glauser\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@robinglauser\" \/>\n<meta name=\"twitter:site\" content=\"@robinglauser\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Robin Glauser\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/\"},\"author\":{\"name\":\"Robin Glauser\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#\\\/schema\\\/person\\\/e1a94504a6ff5171fa13670932514b19\"},\"headline\":\"Animate the theme color of your website in chrome on android\",\"datePublished\":\"2015-04-28T18:20:15+00:00\",\"dateModified\":\"2015-04-29T05:48:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/\"},\"wordCount\":167,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#\\\/schema\\\/person\\\/e1a94504a6ff5171fa13670932514b19\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/party.png\",\"keywords\":[\"android\",\"chrome\",\"webdev\"],\"articleSection\":[\"Development\",\"Random Pages\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/\",\"url\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/\",\"name\":\"Animate the theme color of your website in chrome on android - Robin Glauser\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/party.png\",\"datePublished\":\"2015-04-28T18:20:15+00:00\",\"dateModified\":\"2015-04-29T05:48:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/party.png\",\"contentUrl\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/party.png\",\"width\":788,\"height\":367},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/04\\\/28\\\/animate-the-theme-color-of-your-website-in-chrome-on-android\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animate the theme color of your website in chrome on android\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/\",\"name\":\"Robin Glauser\",\"description\":\"My Blog about Development, Design and my random thoughts.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#\\\/schema\\\/person\\\/e1a94504a6ff5171fa13670932514b19\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#\\\/schema\\\/person\\\/e1a94504a6ff5171fa13670932514b19\",\"name\":\"Robin Glauser\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/DSC_1244_small.jpg\",\"url\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/DSC_1244_small.jpg\",\"contentUrl\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/DSC_1244_small.jpg\",\"width\":800,\"height\":530,\"caption\":\"Robin Glauser\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/DSC_1244_small.jpg\"},\"description\":\"I'm a web developer.\",\"sameAs\":[\"https:\\\/\\\/www.robinglauser.ch\",\"https:\\\/\\\/www.instagram.com\\\/robinglauser\\\/\",\"https:\\\/\\\/x.com\\\/robinglauser\"],\"url\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/author\\\/robin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animate the theme color of your website in chrome on android - Robin Glauser","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/","og_locale":"en_US","og_type":"article","og_title":"Animate the theme color of your website in chrome on android - Robin Glauser","og_description":"Update:\u00a0Apparently it doesn&#8217;t work in the beta version of chrome. Thanks to \/u\/aurimas_chromium for reporting\u00a0the bug. (crbug.com\/482291) It also only works if you have the option &#8220;Merge Tabs and Apps&#8221; turned on. Thanks to \/u\/plastix3000 You maybe knew that you could set the color of the navigation bar in chrome on android by adding the following meta tag to your ... Read More","og_url":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/","og_site_name":"Robin Glauser","article_published_time":"2015-04-28T18:20:15+00:00","article_modified_time":"2015-04-29T05:48:55+00:00","og_image":[{"width":788,"height":367,"url":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/04\/party.png","type":"image\/png"}],"author":"Robin Glauser","twitter_card":"summary_large_image","twitter_creator":"@robinglauser","twitter_site":"@robinglauser","twitter_misc":{"Written by":"Robin Glauser","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/#article","isPartOf":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/"},"author":{"name":"Robin Glauser","@id":"https:\/\/www.robinglauser.ch\/blog\/#\/schema\/person\/e1a94504a6ff5171fa13670932514b19"},"headline":"Animate the theme color of your website in chrome on android","datePublished":"2015-04-28T18:20:15+00:00","dateModified":"2015-04-29T05:48:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/"},"wordCount":167,"commentCount":0,"publisher":{"@id":"https:\/\/www.robinglauser.ch\/blog\/#\/schema\/person\/e1a94504a6ff5171fa13670932514b19"},"image":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/#primaryimage"},"thumbnailUrl":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/04\/party.png","keywords":["android","chrome","webdev"],"articleSection":["Development","Random Pages"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/","url":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/","name":"Animate the theme color of your website in chrome on android - Robin Glauser","isPartOf":{"@id":"https:\/\/www.robinglauser.ch\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/#primaryimage"},"image":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/#primaryimage"},"thumbnailUrl":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/04\/party.png","datePublished":"2015-04-28T18:20:15+00:00","dateModified":"2015-04-29T05:48:55+00:00","breadcrumb":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/#primaryimage","url":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/04\/party.png","contentUrl":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/04\/party.png","width":788,"height":367},{"@type":"BreadcrumbList","@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/04\/28\/animate-the-theme-color-of-your-website-in-chrome-on-android\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robinglauser.ch\/blog\/"},{"@type":"ListItem","position":2,"name":"Animate the theme color of your website in chrome on android"}]},{"@type":"WebSite","@id":"https:\/\/www.robinglauser.ch\/blog\/#website","url":"https:\/\/www.robinglauser.ch\/blog\/","name":"Robin Glauser","description":"My Blog about Development, Design and my random thoughts.","publisher":{"@id":"https:\/\/www.robinglauser.ch\/blog\/#\/schema\/person\/e1a94504a6ff5171fa13670932514b19"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.robinglauser.ch\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.robinglauser.ch\/blog\/#\/schema\/person\/e1a94504a6ff5171fa13670932514b19","name":"Robin Glauser","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/10\/DSC_1244_small.jpg","url":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/10\/DSC_1244_small.jpg","contentUrl":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/10\/DSC_1244_small.jpg","width":800,"height":530,"caption":"Robin Glauser"},"logo":{"@id":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/10\/DSC_1244_small.jpg"},"description":"I'm a web developer.","sameAs":["https:\/\/www.robinglauser.ch","https:\/\/www.instagram.com\/robinglauser\/","https:\/\/x.com\/robinglauser"],"url":"https:\/\/www.robinglauser.ch\/blog\/author\/robin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/posts\/1029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/comments?post=1029"}],"version-history":[{"count":8,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/posts\/1029\/revisions"}],"predecessor-version":[{"id":1038,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/posts\/1029\/revisions\/1038"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/media\/1030"}],"wp:attachment":[{"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/media?parent=1029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/categories?post=1029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/tags?post=1029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}