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.10.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; }
.theme--dark .fx .entry .title { color: rgba(0, 0, 0, 0.88)!important; }
.theme--dark .fx .entry.read .title { color: rgba(0, 0, 0, .54)!important; }
.theme--dark .fx .entry.u0 { background: #f3f1f1; }
`);
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.

@sarnobat

This comment has been minimized.

Copy link

sarnobat commented May 11, 2020

Just got a new Mac. This was one of the first things I installed :D

@seanbperiod

This comment has been minimized.

Copy link

seanbperiod commented May 15, 2020

I just noticed the update from December. Thanks!

I've also added these entries to make it look better with dark themes:

.theme--dark .fx .entry .title { color: rgba(0, 0, 0, 0.88)!important;} .theme--dark .fx .entry.read .title { color: rgba(0, 0, 0, .54)!important; } .theme--dark .fx .entry.u0 {background: #f3f1f1;}

@yamalight

This comment has been minimized.

Copy link
Owner Author

yamalight commented May 15, 2020

@seanbperiod this is great, thank you! I've added it to the script 👍

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.