respect notification color icon when using github-refined extension

[ilyam8]

First of all thanks for the work, github-dark is awesome :+1:

The Issue: Default notification color is blue. i am using ~github-redefined~ github-refined plugin, it has mark as unread feature. And it adds additional notification color. The color is green, it means that you have only marked as unread issues.

github-dark doesn't respect the color and changes it to blue.

• Browser:

  Version 74.0.3729.169 (Official Build) Arch Linux (64-bit)

• Operating System:

  Linux 4.19.45-1-MANJARO

• Link to page with the issue:

• Screenshot:

w/o github-dark

---

w/ github-dark

[the-j0k3r]

Hello @ilyam8! Thank for reaching out with this report.

Our notification icon uses the custom base-color, its intended.

[ilyam8]

So it is wontfix? It is very nice to have different notification colors, it is clear when you have unread messages (blue) or only marked as unread (green).

[the-j0k3r]

Well, I wouldn't say its a necessarily a wont fix, GitHub Default also uses blue see below CSS, our default base-color is also a blue base-color. but if you change it to green/other this will also chnage along with links etc.

.notification-indicator .mail-status {
    background-clip: padding-box;
    background-image: linear-gradient(#54a3ff,#006eed);
    border: 2px solid #24292e;
    border-radius: 50%;
    color: #fff;
    display: none;
    height: 14px;
    left: 6px;
    position: absolute;
    top: -6px;
    width: 14px;
    z-index: 2;
}

You can however, for GHD and build GHD with this tweak Its located in

  /* notification icon */
  .notification-indicator .mail-status {
    background: /*[[base-color]]*/ !important;
    border-color: #1d1d1d !important;
  }

Im unsure if we supported yet another GitHub extension what would be done about it, lets ask @silverwind @mottie @xt0rted what their thoughts are on this subject.

My vote though is to keep it as is, because supporting your extension and adding different colors that dont match our styling for same areas seems counter intuitive, that said I wont oppose a majority decision on this.

[the-j0k3r]

It occurs to me we could also add a specific custom color choice for this, that way, the color would be the default GHD blue and you could change it to whatever you like, I think that would be the best easiest way to accommodate this rather than adding support for a full extension.

Though if you have real conflicts between the two that means still having to support yet another extension.

Edit: Try this usercss https://gist.github.com/the-j0k3r/17d032858733c95f8743e8cff66d6255 it has the custom notification color, You must use stylus though.

If others agree, we can add that but it will give us a test bed also.

[ilyam8]

https://github.com/sindresorhus/refined-github/pull/683

That is how it works with github-refined:

• case if there is at least one unread message: blue
• case zero unread, only marked as unread: green

---

@the-j0k3r , i installed modified usercss. With it i always have unread mail color.

[the-j0k3r]

We cant actually differentiate afaik between one/more/unread messages with just CSS. That extension is using js.

We have https://github.com/StylishThemes/GitHub-Dark-Script which would probably with some modifications handle that. @silverwind or @Mottie would know what to do there.

We could probably do that in similar way. one for default (that would also change) one for more unread,

  /* notification icon */
  .notification-indicator .mail-status {
    background: /*[[base-color]]*/ !important;
    border-color: #1d1d1d !important;
  }
  .notification-indicator[data-ga-click$=":read"] .unread {
    background: /*[[notification-base-color]]*/ !important;
    border-color: #1d1d1d !important;
  }

Updated https://gist.github.com/the-j0k3r/17d032858733c95f8743e8cff66d6255 Edit 2: I think that however is TOO opinionated for this style, it would be better handled separately in its own style.

EDIT 3: AH, A typo in your main post, youre using REFINED Github, not Github REDEFINED . We already support that extension... lol

[the-j0k3r]

/* ==UserStyle==
@name        Refined GH Notification Colors
@namespace   StylishThemes
@version     1.0.0
@license     CC-BY-SA-4.0
@author      StylishThemes
@advanced color base-color "RGH 1 unread msg color" #4f8cc9
@advanced color notif-unr-base-color "RGH 0 or marked unread color" #4f8cc9
==/UserStyle== */
@-moz-document regexp("^https?://((gist|guides|help|launch-editor|raw|resources|status|developer)\\.)?github\\.com/((?!generated_pages/preview).)*$"), domain("githubusercontent.com"), domain("graphql-explorer.githubapp.com") {
  /* notification icon */
   html.refined-github .notification-indicator .mail-status {
    background: /*[[base-color]]*/ !important;
    border-color: #1d1d1d !important;
  }
   html.refined-github .notification-indicator[data-ga-click$=":read"] .unread {
    background: /*[[notif-unr-base-color]]*/ !important;
    border-color: #1d1d1d !important;
  }
}

@ilyam8 try that style

[ilyam8]

AH, A typo in your main post, youre using REFINED Github, not Github REDEFINED . We already support that extension... lol

Oh, man :see_no_evil:

@ilyam8 try that style

:+1: it works!

[silverwind]

I think this should just be a matter of finding the green gradient in use and add it to the generator after the blue one.

[the-j0k3r]

We can do something better than that cause this is static so no need for generator styles, also our own marker is manually overriding our own generated styles

https://github.com/StylishThemes/GitHub-Dark/blob/060a5096916a52bfb7d9dff16bb96be18c75857a/github-dark.css#L4622-L4626

I wasnt sure if we also wanted to customize the colors for both, if we did then a new style is needed.

@silverwind Edit: More specifically when a refined gh user that also uses github dark and has green base color will want to modify the unread color, generating this or hardcoding will have same impact, so only solution then is to add a color setting that only works for rgh users which other users will not use.

In that case we definitely need own style, but lets see what happens I have a repo for it done, just needs pushing