{"id":9207,"date":"2024-12-13T11:26:16","date_gmt":"2024-12-13T19:26:16","guid":{"rendered":"https:\/\/blog.mozilla.org\/addons\/?p=9207"},"modified":"2024-12-13T11:26:16","modified_gmt":"2024-12-13T19:26:16","slug":"developer-spotlight-adaptive-tab-bar-color","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/","title":{"rendered":"Developer Spotlight: Adaptive Tab Bar Color"},"content":{"rendered":"

\"\"A few years ago software developer Yixin Wang (aka Eason) decided he wanted to \u201cde-Google\u201d his digital life. After switching from Chrome to Firefox, Eason created macOS Monterey Safari Dark<\/a> theme to mimic the look of Safari while experimenting with themes.<\/p>\n

\u201cDuring this process,\u201d Eason explains, \u201cI discovered that Firefox\u2019s theme colors can be changed programmatically. That\u2019s when it struck me \u2014 I could make Firefox dynamically adapt its theme color based on the web page it\u2019s displaying, imitating Safari’s tab bar tinting behavior.\u201d<\/p>\n

This revelation led Eason to develop Adaptive Tab Bar Color<\/a>, an extension that dynamically changes the color of Firefox\u2019s tab bar to match the look of any website.<\/p>\n

\"\"

Upcoming v2.2 will feature a revamped Options page with modern HTML and CSS for a cleaner design. Users will also gain the ability to set a minimum contrast ratio for better UI readability.<\/p><\/div>\n

While the concept may be simple, Adaptive Tab Bar Color\u2019s development presented unique challenges. Eason understands that users expect his extension to seamlessly integrate colors of any web page they visit, but there are often unforeseeable edge cases. \u201cWhat happens if a user always prefers dark mode, but the page has a bright color palette?\u201d Eason wonders. \u201cOr if a web page specifies a theme color that\u2019s purely branding related and unrelated to content? What about pages with transparent backgrounds? Balancing these nuances to ensure a consistent and visually appealing experience has been both challenging and rewarding.\u201d<\/p>\n

Creating a cool extension like Adaptive Tab Bar Color can lead to unexpected benefits. After Eason put it on his resume, job recruiters came calling. This led to \u201c… an incredible opportunity to write my Bachelor thesis at a company I\u2019d always dreamed of working for. I\u2019m so grateful for the support and enthusiasm of the Firefox community \u2014 it\u2019s been an amazing journey.\u201d<\/p>\n

\n

Do you have an intriguing extension development story? Do tell! Maybe your story should appear on this blog. Contact us at <\/i>amo-featured [at] mozilla [dot] org<\/i><\/b> and let us know a bit about your extension development journey.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"

A few years ago software developer Yixin Wang (aka Eason) decided he wanted to \u201cde-Google\u201d his digital life. After switching from Chrome to Firefox, Eason created macOS Monterey Safari Dark … Read more<\/a><\/p>\n","protected":false},"author":648,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,278884],"tags":[],"yoast_head":"\nDeveloper Spotlight: Adaptive Tab Bar Color - Mozilla Add-ons Community Blog<\/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:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Scott DeVaney\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/\",\"name\":\"Developer Spotlight: Adaptive Tab Bar Color - Mozilla Add-ons Community Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2024\/12\/blog_ATBC1-580x327.png\",\"datePublished\":\"2024-12-13T19:26:16+00:00\",\"dateModified\":\"2024-12-13T19:26:16+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/4c2e23c8fee2460a91031d2825ff7d35\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/files\/2024\/12\/blog_ATBC1.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/addons\/files\/2024\/12\/blog_ATBC1.png\",\"width\":1612,\"height\":910},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/addons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Developer Spotlight: Adaptive Tab Bar Color\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/addons\/\",\"name\":\"Mozilla Add-ons Community Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/4c2e23c8fee2460a91031d2825ff7d35\",\"name\":\"Scott DeVaney\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dc38a62432c7d12585390805c2bc58e2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dc38a62432c7d12585390805c2bc58e2?s=96&d=mm&r=g\",\"caption\":\"Scott DeVaney\"},\"url\":\"https:\/\/blog.mozilla.org\/addons\/author\/sdevaneymozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Developer Spotlight: Adaptive Tab Bar Color - Mozilla Add-ons Community Blog","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:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/","twitter_misc":{"Written by":"Scott DeVaney","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/","url":"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/","name":"Developer Spotlight: Adaptive Tab Bar Color - Mozilla Add-ons Community Blog","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/addons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2024\/12\/blog_ATBC1-580x327.png","datePublished":"2024-12-13T19:26:16+00:00","dateModified":"2024-12-13T19:26:16+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/4c2e23c8fee2460a91031d2825ff7d35"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/#primaryimage","url":"https:\/\/blog.mozilla.org\/addons\/files\/2024\/12\/blog_ATBC1.png","contentUrl":"https:\/\/blog.mozilla.org\/addons\/files\/2024\/12\/blog_ATBC1.png","width":1612,"height":910},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/addons\/2024\/12\/13\/developer-spotlight-adaptive-tab-bar-color\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/addons\/"},{"@type":"ListItem","position":2,"name":"Developer Spotlight: Adaptive Tab Bar Color"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/addons\/#website","url":"https:\/\/blog.mozilla.org\/addons\/","name":"Mozilla Add-ons Community Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/addons\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/4c2e23c8fee2460a91031d2825ff7d35","name":"Scott DeVaney","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/addons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dc38a62432c7d12585390805c2bc58e2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dc38a62432c7d12585390805c2bc58e2?s=96&d=mm&r=g","caption":"Scott DeVaney"},"url":"https:\/\/blog.mozilla.org\/addons\/author\/sdevaneymozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/9207"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/users\/648"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/comments?post=9207"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/posts\/9207\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/media?parent=9207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/categories?post=9207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/addons\/wp-json\/wp\/v2\/tags?post=9207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}