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.11.2
// ==/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 .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 .entry__source { color: rgba(0, 0, 0, 0.75)!important; }
.theme--dark .fx .entry.read .title { color: rgba(0, 0, 0, .54)!important; }
.theme--dark .fx .entry.u0 { background: #f3f1f1; }
.theme--dark .fx .entry .entry__title { color: #000; }
.theme--dark .fx .entry.entry--read .entry__title { color: rgb(0 0 0 / 44%); }
`);
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.entry__source"))
.map(el => {
const title = el.querySelector("a.entry__source").textContent;
el.setAttribute("colored", title);
return title;
})
.forEach((title) => {
if (!colors[title]) {
const color = computeColor(title);
addStyle(`
article[colored='${title}'] {
background: hsl(${color.h},${color.s}%,80%) !important; }
article[colored='${title}']:hover {
background: hsl(${color.h},${color.s}%,85%) !important; }
article[colored='${title}']//a[contains(@class, 'read')] {
background: hsl(${color.h},${color.s}%,90%) !important; }
article[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 seanbperiod commented Nov 2, 2015

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

@sarnobat

This comment has been minimized.

Copy link

@sarnobat 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 gokaycagri commented Aug 7, 2016

Thank you.

@seanbperiod

This comment has been minimized.

Copy link

@seanbperiod seanbperiod commented Dec 16, 2016

Thanks again for keeping this updated!

@sarnobat

This comment has been minimized.

Copy link

@sarnobat 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 sarnobat commented Jan 30, 2017

Mine doesn't work now :(

@amiremami

This comment has been minimized.

Copy link

@amiremami 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 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 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 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 yamalight commented May 15, 2020

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

@seanbperiod

This comment has been minimized.

Copy link

@seanbperiod seanbperiod commented Jan 12, 2021

Just noticed that all article title text was white today, so I added:

.theme--dark .fx .entry .entry__title { color: #000; }

and for items marked as read:

.theme--dark .fx .entry.entry--read .entry__title { color: rgb(0 0 0 / 44%); }

@yamalight

This comment has been minimized.

Copy link
Owner Author

@yamalight yamalight commented Jan 12, 2021

@seanbperiod updated! thanks for the help :)

@seanbperiod

This comment has been minimized.

Copy link

@seanbperiod seanbperiod commented Jan 21, 2021

Arg. @yamalight Looks like they just changed something and all the styles are messed up - no different coloring 😬

@amiremami

This comment has been minimized.

Copy link

@amiremami amiremami commented Jan 22, 2021

It's not working anymore, any chance to update?

@yamalight

This comment has been minimized.

Copy link
Owner Author

@yamalight yamalight commented Jan 22, 2021

@seanbperiod @amiremami should be fixed now!

@amiremami

This comment has been minimized.

Copy link

@amiremami amiremami commented Jan 22, 2021

@yamalight Perfect, thank you : )

@seanbperiod

This comment has been minimized.

Copy link

@seanbperiod seanbperiod commented Jan 22, 2021

Thank you! I forgot how eye-straining it is to use without this - really surprised this hasn't been implemented natively. Much appreciated 👍🏻

@mvdgb

This comment has been minimized.

Copy link

@mvdgb mvdgb commented Jan 26, 2021

I also appreciate the fix, but just now it seems to be broken yet again.

@amiremami

This comment has been minimized.

Copy link

@amiremami amiremami commented Jan 26, 2021

Yes, seems broken again : (

@sicifus

This comment has been minimized.

Copy link

@sicifus sicifus commented Jan 26, 2021

My heart is broken too。。。(╯︵╰)

@yamalight

This comment has been minimized.

Copy link
Owner Author

@yamalight yamalight commented Jan 26, 2021

Should be fixed with 0.11.2

@mvdgb

This comment has been minimized.

Copy link

@mvdgb mvdgb commented Jan 26, 2021

Thanks again; it works once more.

@amiremami

This comment has been minimized.

Copy link

@amiremami amiremami commented Jan 26, 2021

Fixed, thanks a lot :)

@sicifus

This comment has been minimized.

Copy link

@sicifus sicifus commented Jan 26, 2021

Should be fixed with 0.11.2

Bravo! Many many thanks to you!

@seanbperiod

This comment has been minimized.

Copy link

@seanbperiod seanbperiod commented Jan 26, 2021

Thanks again 👍🏻

Is it possible to implement auto-update?

@yamalight

This comment has been minimized.

Copy link
Owner Author

@yamalight yamalight commented Jan 26, 2021

@seanbperiod yeah. it'd require some additional work, but I've been wanting to do that at some point, just gotta find time

@kingtosh

This comment has been minimized.

Copy link

@kingtosh kingtosh commented Jan 26, 2021

ありがとう

@amiremami

This comment has been minimized.

Copy link

@amiremami amiremami commented Apr 15, 2021

@yamalight Seems not work again : (

@yamalight

This comment has been minimized.

Copy link
Owner Author

@yamalight yamalight commented Apr 15, 2021

@amiremami still works OK here 🤔

@amiremami

This comment has been minimized.

Copy link

@amiremami amiremami commented Apr 15, 2021

@amiremami still works OK here 🤔

I'm testing on Chrome Version 90.0.4430.72 (Official Build) (64-bit), since today it's not working, you tested on the chrome?

@yamalight

This comment has been minimized.

Copy link
Owner Author

@yamalight yamalight commented Apr 15, 2021

@amiremami still works OK here 🤔

I'm testing on Chrome Version 90.0.4430.72 (Official Build) (64-bit), since today it's not working, you tested on the chrome?

Chromium Edge, but yeah, browser shouldn't matter. Have a few guesses:

  1. you might be part of their layout A/B testing - hence why it's broken only for you (so far?).
  2. you might've gotten new layout earlier than everyone else, and eventually it'll break for me as well

If it's 1 - can't really do much. If it's 2 - I'll get the same issue eventually (they seem to generally roll out changes over the ~day or so) and will fix it.

@amiremami

This comment has been minimized.

Copy link

@amiremami amiremami commented Apr 15, 2021

@amiremami still works OK here 🤔

I'm testing on Chrome Version 90.0.4430.72 (Official Build) (64-bit), since today it's not working, you tested on the chrome?

Chromium Edge, but yeah, browser shouldn't matter. Have a few guesses:

  1. you might be part of their layout A/B testing - hence why it's broken only for you (so far?).
  2. you might've gotten new layout earlier than everyone else, and eventually it'll break for me as well

If it's 1 - can't really do much. If it's 2 - I'll get the same issue eventually (they seem to generally roll out changes over the ~day or so) and will fix it.

I agree, thank you so much man! <3

@amiremami

This comment has been minimized.

Copy link

@amiremami amiremami commented Apr 23, 2021

Guys, still no one has problem with Chrome Version 90.0.4430.85 (Official Build) (64-bit) ?

@yamalight

This comment has been minimized.

Copy link
Owner Author

@yamalight yamalight commented Apr 23, 2021

@amiremami still all good here. using Edge 90 (based on chromium 90)

@amiremami

This comment has been minimized.

Copy link

@amiremami amiremami commented Apr 23, 2021

@amiremami still all good here. using Edge 90 (based on chromium 90)

Is it possible for you to try on the Chrome itself? Because the script is fine on firefox, not on Chrome.

@yamalight

This comment has been minimized.

Copy link
Owner Author

@yamalight yamalight commented Apr 23, 2021

@amiremami just tried it - does work fine for me 🤔

@amiremami

This comment has been minimized.

Copy link

@amiremami amiremami commented Apr 24, 2021

I tried from another laptop and it was working fine as you said, I investigated further on my own system and noticed it seems the script is not working in tampermoney (the other system was using tampermonkey though) , I used Violentmonkey and script is working now again, thanks a lot : )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment