0

I am making my own start/bookmarkpage as a hobby project.

I want to organise my bookmarks in a clean way. I like the way Apple has done this by requesting the meta app icon, so i made a JavaScript / Ajax / PHP function that does the job.

enter image description here

However, when a site has no app icon in it's head, I want to know which main color the site uses, like you can see here

apple bookmarks on safari (the background has the websites main color)

chrome bookmarks (the border bar on the bottom has the website's main color)

I searched for JavaScript functions. Didn't find any, which means I must make one myself. I think it can be done by indexing multiple html tags (like headings, a-tags, buttons etc.) of the website.

The color that these elements have in common, should be the websites main color.

Have you guys any other ideas or suggestions on how to achieve this?

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Bram
  • 273
  • 1
  • 10
  • i did something like this a while back using appliedStyle+offsetHeight and looping through elements to calculate the % real estate each tag took and what bg color it had. – dandavis Oct 20 '15 at 17:09
  • One place to look for a suggested colour to use would be in the page's `meta` tags. See http://stackoverflow.com/questions/26960703/ – Shaggy Oct 20 '15 at 17:18

2 Answers2

2

I don't know how Apple does it but it would make sense if they used preset colors for the commonly known websites like Facebook and Gmail, etc.

I'm not sure if doing what i'm about to suggest will help determine the websites' main colors but what you could(roughly) do is:

  • Fetch the websites HTML.
  • Crawl for css link & style tags. Either by creating the DOM structure from your response or finding it with a parser/regex.
  • Parse the css and look for the elements you're interested(the ones you think will contain their main color)
  • Count the amount of matches of the differente colors in the elements you selected

Alternatively you could also inline the css in <style> tags on the page you've fetched and put it in your DOM to determine the colors by accessing someEl.style.background or whatever.

Either solution seems hacky, and i'm not sure that javascript's the job. Maybe your server should take care of this or maybe it would suffice to use sane defaults(such as blue for Facebook, red for YouTube, etc.)

Oscar Linde
  • 518
  • 4
  • 17
0

Maybe this is done via the "theme-color" header meta value.

<meta name="theme-color" content="#0000FF" />

You should be able to pick it up using the following:

document.head.querySelector("[name~=theme-color][content]").content;
// '#0000FF'
JulienRioux
  • 2,853
  • 2
  • 24
  • 37