Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Feedly Colorful Listview
// ==UserScript==
// @name Feedly Colorful Listview
// @namespace http://feedly.colorful.list.view
// @description Colorizes items headers based on their source
// @include http*://feedly.com/*
// @include http*://*.feedly.com/*
// @version 0.9.0
// ==/UserScript==
const colors = {};
// since GM_addStyle was deprecated - use custom function
// that simply appends styles to head of the document
const addStyle = styleText => {
const style = document.createElement('style');
style.appendChild(document.createTextNode(styleText));
document.head.appendChild(style);
};
const computeColor = (title) => {
let h = 0;
for (let i = 0; i < title.length; i++) {
let s = i !== 0 ? title.length % i : 1;
let r = s !== 0 ? title.charCodeAt(i) % s : title.charCodeAt(i);
h += r;
}
let hs = {
h: (h % 36 + 1) * 10,
s: 30 + (h % 5 + 1) * 10,
};
colors[title] = hs;
return hs;
};
addStyle(`
.entry { border-color: transparent !important; }
.entry .ago { color: #444 !important; }
.entry .source { color: #444 !important; font-weight: bold !important; }
#timeline div.selected { border: 1px solid #444 !important; }
`);
const timeline = document.getElementById("box");
timeline.addEventListener("DOMNodeInserted", function () {
const elements = document.getElementsByClassName('entry');
Array
.from(elements)
.filter(el => !el.getAttribute('colored'))
.filter(el => el.querySelector("a.source"))
.map(el => {
const title = el.querySelector("a.source").textContent;
el.setAttribute("colored", title);
return title;
})
.forEach((title) => {
if (!colors[title]) {
const color = computeColor(title);
addStyle(`
div[colored='${title}'] {
background: hsl(${color.h},${color.s}%,80%) !important; }
div[colored='${title}']:hover {
background: hsl(${color.h},${color.s}%,85%) !important; }
div[colored='${title}']//a[contains(@class, 'read')] {
background: hsl(${color.h},${color.s}%,90%) !important; }
div[colored='${title}']//a[contains(@class, 'read')]:hover {
background: hsl(${color.h},${color.s}%,95%) !important; }
`);
}
});
}, false);
@seanbperiod

This comment has been minimized.

Copy link

seanbperiod commented Nov 2, 2015

sweet! thanks for updating. i was going nuts without it!

@sarnobat

This comment has been minimized.

Copy link

sarnobat commented Jul 20, 2016

Me too. Why Feedly never created such a thing I don't know. Actually I do - branding above productivity. Thank goodness for this. I'd been a fan of it since my Firefox days using Greasemonkey.

@gokaycagri

This comment has been minimized.

Copy link

gokaycagri commented Aug 7, 2016

Thank you.

@seanbperiod

This comment has been minimized.

Copy link

seanbperiod commented Dec 16, 2016

Thanks again for keeping this updated!

@sarnobat

This comment has been minimized.

Copy link

sarnobat commented Jan 9, 2017

Indeed, thanks for updating. It's just a shame I went so many months not realizing I needed to update it. I'm so used to the inconvenience of not having this that it never occurs to me that the script needs updating.

@sarnobat

This comment has been minimized.

Copy link

sarnobat commented Jan 30, 2017

Mine doesn't work now :(

@amiremami

This comment has been minimized.

Copy link

amiremami commented Nov 19, 2017

For me on firefox quantum worked. Thanks a lot @yamalight :) Maybe you can make it compatible with chrome also.

@seanbperiod

This comment has been minimized.

Copy link

seanbperiod commented Feb 19, 2018

@amiremami it is compatible with chrome. Use Tampermonkey. I've been using it on chrome since 2015.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.