Feedly Colorful Listview

feedly-colorful-list-view.user.js

// ==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);

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

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.

Thank you.

Thanks again for keeping this updated!

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.

Mine doesn't work now :(

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

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

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

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;}

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

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%); }

@seanbperiod updated! thanks for the help :)

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

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

@seanbperiod @amiremami should be fixed now!

@yamalight Perfect, thank you : )

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

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

Yes, seems broken again : (

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

Should be fixed with 0.11.2

Thanks again; it works once more.

Fixed, thanks a lot :)

Should be fixed with 0.11.2

Bravo! Many many thanks to you!

Thanks again 👍🏻

Is it possible to implement auto-update?

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

ありがとう

@yamalight Seems not work again : (

@amiremami still works OK here 🤔

@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?

@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 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

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

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

@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.

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

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 : )