Yellow links instead of blue

[erkinalp]

Describe the change you'd like Yellow links alongside white text will enhance contrast.

[the-j0k3r]

Link color is defined by base-color which is already user selectable.

[erkinalp]

Yellow links made a few things unreadable when I applied the yellow base colour, though. I am in progress of fixing those locally, and going to provide a PR for you to look for.

[the-j0k3r]

Perhaps you would like to describe the issue and show a screenshot and link to page for the problem links?

[erkinalp]

Namely, back to notifications button, selected texts and issue pagination buttons becomes unreadable if I select yellow or green as the base colour. For more detail I will have to revert to the original version by "updating", but I have not solved all the contrast issues yet.

[the-j0k3r]

Screenshot would help, maybe theres suggestions based on it.

I suspect its the white text, in such case refer to existing issue https://github.com/StylishThemes/GitHub-Dark/issues/748

From that, you can create a script like outlined in https://github.com/StylishThemes/GitHub-Dark/issues/748#issuecomment-427345272

Failing that, theres no good solution at this time, some colors are not ideal like very bright variations, your best best is select a darker shade of the base color.

[erkinalp]

If only the contrast issue was solved with that one directive in https://github.com/StylishThemes/GitHub-Dark/issues/748#issuecomment-427345272 ... Many parts of the style needs editing and still not yet ready for a PR.

[erkinalp]

Close and reopening was accidental.

[the-j0k3r]

If only the contrast issue was solved with that one directive in #748 (comment) ... Many parts of the style needs editing and still not yet ready for a PR.

You need to add the classes on that script to address your issue, without you cant solve.

[silverwind]

We can't react to bright base colors (such a contrast calculation can only be done in JS) as we can only assume that base color provides enough contrast. Of course it's possible to override certain parts manually in a separate style of your own.

[erkinalp]

We can't react to bright base colors (such a contrast calculation can only be done in JS)

Userscript version of this addon just downloads this CSS too. EDIT:formatting fixes

[xt0rted]

We can't react to bright base colors (such a contrast calculation can only be done in JS)...

@silverwind there actually is a way to do this in pure css using css variables, calc(), and rgb(). Check this out for the details and this for the example.

Fixed the example link.

[silverwind]

Interesting, but the fact that it requires splitting the RGB channels would not really work for us. Generally, I'd rather like to remove the option for custom base color as it's just not consistent with other (darker) blue parts on the site.

[the-j0k3r]

I have solved this issue 95% also solved #748 and #1094 also solved the issue #305

My solution is again using @preprocessor stylus, and some specific conditionals for edge cases.

You can now select a main color and it applies to everything, tags text, but thers a long way to go yet.

It will work ontop of GHD as it exists, I plan to extend this to make all colors customizable including buttons, its not going to be a lot more work.

As such here is the POC, make sure youre using the latest changes in the POC below.

create a new style, copy and paste the below

POC

/* ==UserStyle==
@name         GitHub Dark Hacks
@namespace    the-j0k3r
@version      0.0.7-alpha
@description  A collection of hacks for the new GitHub Dark UI
@author       the-j0k3r
@homepageURL  https://github.com/StylishThemes/Feature-Override-Styles/
@supportURL   https://github.com/StylishThemes/Feature-Override-Styles/issues
@updateURL    https://raw.githubusercontent.com/StylishThemes/Feature-Override-Styles/master/github-dark-hacks.user.styl
@license      MIT
@preprocessor stylus

@var color bodyColor    "Body color" #202020
@var color mainColor    "Main color" #5e8acc
@var color searchColor  "Text color" #282828
@var color btxtColor    "Text color" #fff
@var color vtxtColor    "Dark txt on light bg color" #000
@var checkbox visTxtColor "Dark txt on light bg" 0
@var checkbox addreadBoxHeaderBgw  "Add readme box header background" 1
@var text  legendSize "Legend size" 10px

==/UserStyle== */
@-moz-document regexp("^https?://((gist|guides|docs|lab|launch-editor|raw|resources|status|developer|support)\\.)?github\\.com/((?!generated_pages/preview).)*$"),
domain("graphql-explorer.githubapp.com"),
domain("githubusercontent.com"),
domain("www.githubstatus.com") {
  // Inject userstyle even when all options are disabled.
  stylus-fix { content: 'true' }
  :root {
    --custom-thumb-color: mainColor;
    --webkit-scrollbar-thumb-hover: rgba(mainColor, .8);
    --base-color: mainColor;
  }
  ::selection {
    background-color: mainColor !important;
    color: btxtColor !important;
  }
  html body .btn-outline:hover,
  html body [open] > .btn-outline {
    background-color: darken(mainColor, 20%);
    box-shadow: 0 1px 0 vtxtColor, inset 0 1px 0 rgba(btxtColor, .03);
  }
  html body .network .current-repository {
    background-color: lighten(searchColor, 20%);
    padding: 2px 6px 2px 6px;
    margin-left: -6px;
  }
  .compare-pr-placeholder, .compare-cutoff, .diff-cutoff, .markdown-body li.added.moved,
  .repo-private-label, .gist-secret-label, .label-private, .stale-files-tab,
  .signed-out-comment, .commits-list-item em, .unsupported-browser,
  .prereceive-feedback, .code-list em, .issue-list em, .user-list em,
  .wiki-list em, .blob-code .bg-yellow-light,
  .codesearch-results #code_search_results .bg-yellow-light,
  .hx_hit-repo em {
    background-color: lighten(searchColor, 20%) !important;
    border: 1px solid lighten(searchColor, 50%) !important;
  }
  if visTxtColor {
    html body .filter-item.selected,
    html body .filter-list .filter-item.selected,
    html body .btn-outline.selected,
    html body .btn-outline:active,
    html body .btn-outline:hover,
    html body .btn-outline[aria-selected="true"],
    html body [open] > .btn-outline,
    html body .dropdown-item:focus,
    html body .dropdown-item:hover,
    html body .select-menu-item:hover,
    html body .select-menu-item:hover .description,
    html body .select-menu-item:hover.select-menu-action,
    html body .subnav-item.selected,
    html body .subnav-item[aria-current]:not([aria-current="false"]),
    html body .subnav-item[aria-selected="true"],
    html body .select-menu-item[aria-checked="true"]:hover,
    html body .select-menu-item[aria-checked="true"]:hover > .octicon {
      color: vtxtColor;
    }
    html ::selection {
      color: vtxtColor !important;
    }
    html body .header-search-current .jump-to-suggestions-results-container .navigation-focus .jump-to-suggestions-path,
    html body .header-search-current .jump-to-suggestions-results-container [aria-selected="true"] .jump-to-suggestions-path,
    .jump-to-suggestions-results-container .navigation-focus .jump-to-octicon, .jump-to-suggestions-results-container [aria-selected="true"] .jump-to-octicon {
      color: vtxtColor !important;
    }
    .card-filter-autocomplete-dropdown .navigation-focus,
    .card-filter-autocomplete-dropdown [aria-selected="true"],
    .card-filter-autocomplete-dropdown .navigation-focus .autocomplete-text-qualifier,
    .card-filter-autocomplete-dropdown [aria-selected="true"] .autocomplete-text-qualifier{
      color: vtxtColor !important;
    }
    html body .btn-outline.disabled,
    html body .btn-outline:disabled,
    html body .btn-outline[aria-disabled="true"],
    html body .btn.disabled, .btn:disabled,
    html body .btn[aria-disabled="true"],
    html body .menu-item-danger.navigation-focus,
    html body .menu-item-danger.selected.navigation-focus {
      color: darken(btxtColor, 40%);
    }
    html body .menu-item-danger.selected:hover,
    html body .menu-item-danger.selected[aria-selected="true"],
    html body .menu-item-danger:hover,
    html body .menu-item-danger[aria-selected="true"] {
      color: darken(btxtColor, 10%) !important;
    }
  }
  if readme-box-header-bgw {
    #readme .Box-header.bg-white {
      background-color: bodyColor !important;
      border-bottom: 1px solid lighten(bodyColor, 10%) !important;
      padding: 10px 16px !important;
    }
  }
  html body,
  html body.bg-gray{
    background-color: bodyColor !important;
  }
  html body .issues-reset-query:hover .issues-reset-query-icon {
    background-color: darken(mainColor, 20%) !important
  }
  html body .full-commit {
    background-color: darken(mainColor, 80%);
  }
  .notification-indicator .mail-status {
    color: btxtColor;
    background-image: linear-gradient(mainColor, mainColor);
  }
  .notifications-list-item.notification-unread .notification-list-item-unread-indicator {
    background-color: mainColor;
  }
  .github-jobs-promotion p, .octotip, .bootcamp h1,
  .bootcamp-body, .owners-notice, .blob-history,
  .branch-name, .new-user-avatar-cta, .jstree-wholerow-clicked,
  .commit-ref, .file-history-tease, .feature-banner, .hook-delivery-guid,
  .topic-tag, .topic-tag-action, .delete-topic-button, 
  .topic-tag-action .add-topic-button, .topic-tag-action .remove-topic-button,
  .RecentBranches, .signup-prompt-bg, ul.search-results li .label,
  div[style*="background-color: #044d6e"], .topic-tag-contrast .delete-topic-link,
  body[class="page-responsive"] .bg-blue-light, .repository-content > .Box--condensed > .Box-body.bg-blue-light,
  html body .bg-blue-light {
    background: darken(mainColor, 80%) !important;
  }
  html body .notifications-list-item:hover {
    background-color: darken(rgba(mainColor, .5), 60%) !important;
  }
  html body .flash {
    background-color: darken(mainColor, 80%);
    border-color: darken(mainColor, 50%);
  }
  html body .header-search-current .jump-to-suggestions-results-container .navigation-focus .jump-to-suggestions-path,
  html body .header-search-current .jump-to-suggestions-results-container [aria-selected="true"] .jump-to-suggestions-path,
  .select-menu-item.navigation-focus, .select-menu-item.navigation-focus .description-inline,
  .select-menu-item.navigation-focus.select-menu-action, .select-menu-item.navigation-focus.selected,
  .select-menu-item.navigation-focus[aria-checked="true"], .select-menu-item:focus,
  .select-menu-item:focus .description-inline, .select-menu-item:focus.select-menu-action,
  .select-menu-item:focus.selected, .select-menu-item:hover, .select-menu-item:hover .description-inline,
  .select-menu-item:hover.select-menu-action, .select-menu-item:hover.selected,
  .select-menu-item[aria-checked="true"]:focus, .select-menu-item[aria-checked="true"]:hover,
  .select-menu-item[aria-selected="true"] .description-inline, .select-menu-item[aria-selected="true"].select-menu-action,
  .select-menu-item[aria-selected="true"]:focus, .select-menu-item[aria-selected="true"]:hover,
  .suggester li.navigation-focus, .suggester li:hover, .suggester li[aria-selected="true"],
  .pagination .current, .pagination .current:hover, .pagination [aria-current]:not([aria-current="false"]) {
    color: btxtColor;
    background: darken(mainColor, 20%);
  }
  .card-filter-autocomplete-dropdown .navigation-focus, .card-filter-autocomplete-dropdown [aria-selected="true"] {
    color: btxtColor;
    background: darken(mainColor, 20%);
  }
  .reaction-sort-item:focus, .reaction-sort-item:hover {
    background: darken(mainColor, 20%);
  }
  .repo-file-upload-progress, .project-updated-message, 
  .topic-tag-action .add-topic-button, .topic-tag-action 
  .remove-topic-button, .commit-desc + .commit-branches,
  .pricing-matrix-table .pricing-matrix-table-dark,
  .topic-tag-contrast .delete-topic-link, .repository-content > .Box--condensed:not(#readme):not(.file-holder),
  .border-blue, body[class="page-responsive"] .border-blue, .timeline-comment.current-user .tabnav-tab.selected,
  .full-commit, .full-commit .commit-meta, .border-blue-light,
  .github-jobs-promotion p, .octotip, .bootcamp .bootcamp-body, 
  .bootcamp h1, .owners-notice, .new-user-avatar-cta, .commit-ref,
  .branch-name, .file-history-tease, .feature-banner, .recently-touched-branches,
  .timeline-progressive-disclosure-items button, .RecentBranches, .js-tag-input-tag,
  ul.search-results li .label, .topic-tag-action {
    border-color: darken(mainColor, 50%) !important;
  }
  .timeline-comment.current-user, :target .timeline-comment,
  .timeline-comment.current-user .timeline-comment-label {
    border-color: darken(mainColor, 50%);
  }
  :target .timeline-comment--caret::before {
    filter: drop-shadow(-0.28em 0 0 rgba(mainColor, .3));
    border-right-color: darken(mainColor, 50%);
  }
  .review-comment:target, :target .timeline-comment {
    box-shadow: 0 0 0 0.2em rgba(mainColor, .3);
  }
  :target .timeline-comment-group .timeline-comment {
    box-shadow: 0 0 0 0.2em rgba(mainColor, .3);
    border-color: darken(mainColor, 50%);
  }
  .upload-enabled.focused {
    box-shadow: 0 0 0 2px rgba(mainColor, .3);
  }
  .comment-reactions button.btn-link.user-has-reacted {
    background-color: rgba(mainColor, .2) !important;
  }
  html body .timeline-comment--caret.current-user::before {
    border-right-color: darken(mainColor, 50%);
  }
  html body .timeline-comment--caret.current-user::after {
    border-right-color: darken(mainColor, 80%);
  }
  html body .Box-header--blue,
  html body .timeline-comment.current-user .timeline-comment-header {
    background-color: darken(mainColor, 80%);
    border-color: darken(mainColor, 50%)
  }
  .timeline-comment.current-user .previewable-comment-form .comment-form-head.tabnav {
    background-color: darken(mainColor, 80%);
    border-color: darken(mainColor, 50%)
  }
  html body .form-control.focus,
  html body .form-control:focus,
  html body .form-select.focus,
  html body .form-select:focus {
    border-color: darken(mainColor, 50%);
    box-shadow: 0 0 0 3px rgba(mainColor, .3);
  }
  html body input.focus[type="text"], html body #adv_code_search .focus.search-page-label,
  html body .focused .drag-and-drop, html body #adv_code_search .search-page-label:focus,
  html body #q:focus ~ button, html body input.color-editor-input:focus,
  html body #ghd-settings select:focus,
  html body #ghd-settings input:focus,
  html body .intgrs-lstng-item:hover,
  html body .ajax-pagination-btn:focus,
  html body input[type="checkbox"]:focus,
  html body div.search-form input:focus,
  html body #search > input[name="q"]:focus {
    border-color: darken(mainColor, 50%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 2px mainColor !important;
    outline-color: mainColor !important;
  }
  html body .topic-tag {
    box-shadow: inset 0 0 0 1px darken(mainColor, 50%) !important;
  }
  html body .dragover textarea,
  html body .dragover .drag-and-drop {
    box-shadow: 0 0 1px 1px mainColor !important;
  }
  .repo-file-upload-progress .repo-file-upload-meter, .topic-tag-link:hover,
  .delete-topic-button:hover, .topic-tag-contrast .delete-topic-link:hover {
    background: darken(mainColor, 70%) !important;
  }
  html body .btn-outline,
  html body .btn-blue .Counter, 
  html body .btn-link, html body a,
  html body .ajax-pagination-form .ajax-pagination-btn,
  html body .toggle-user-status-edit:focus .user-status-message-wrapper,
  html body .toggle-user-status-edit:hover .user-status-message-wrapper,
  html body .social-count:hover,
  html body .tree-browser-result[aria-selected="true"] .octicon-chevron-right,
  html body .tree-browser-result mark,
  html body .timeline-comment.current-user:not(.is-internal) .timeline-comment-header,
  html body .timeline-comment.current-user:not(.is-internal) .timeline-comment-action,
  html body .toolbar-item .menu-target:focus,
  html body .toolbar-item .menu-target:hover,
  html body .toolbar-item:focus,
  html body .toolbar-item:hover,
  html body .pagination .next_page,
  html body .pagination .previous_page,
  html body .ajax-pagination-form .ajax-pagination-btn:focus,
  html body .ajax-pagination-form .ajax-pagination-btn:hover,
  html body .issues-reset-query:hover,
  html body .drag-and-drop-error-info a {
    color: mainColor;
  }
  html body .btn-octicon, html body .btn-octicon .octicon-x,
  html body .tabnav-tab,
  html body .timeline-comment-action,
  html body #suggestions a,html body .table-list-header-toggle .btn-link,
  html body .discussion-sidebar-item,
  html body .pagination a, html body  .pagination em, html body .pagination span,
  html body .pagination .disabled, html body .pagination .disabled:hover,
  html body .pagination .gap, .pagination .gap:hover,
  html body .pagination [aria-disabled="true"],
  html body .pagination [aria-disabled="true"]:hover, html body .flash .octicon {
    color: darken(btxtColor, 30%);
  }
  html body .link-gray-dark {
    color: darken(btxtColor, 20%) !important;
  }
  .timeline-comment {
    color: darken(btxtColor, 20%);
  }
  html body .link-gray {
    color: darken(btxtColor, 30%) !important;
  }
  html body .text-gray-light {
    color: darken(btxtColor, 40%) !important;
  }
  .timeline-comment-action, #suggestions a, .table-list-header-toggle .btn-link, .discussion-sidebar-item {
    color: darken(btxtColor, 40%);
  }
  html body .btn-octicon .octicon-x:hover, html body .btn-octicon:hover,
  html body .btn-link .octicon-kebab-horizontal:hover,
  html body .flash octicon:not([class*="octicon-"]):hover {
    color: lighten(mainColor, 5%);
  }
  html body .muted-link:hover,
  html body .link-gray:hover,
  html body .link-gray-dark:hover,
  html body .link-hover-blue:hover,
  html body .color-blue-3,
  html body .text-blue-mktg,
  html body .Header-link:focus,
  html body .Header-link:hover,
  html body table.files .octicon-file-directory,
  html body table.files .octicon-file-symlink-directory,
  html body table.files .octicon-file-submodule,
  html body .header-logo-invertocat:hover,
  html body .notification-indicator:hover,
  html body .markdown-body a strong,
  html body .markdown-format a strong,
  html body .notifications.list-group a:hover,
  html body a.octolinker-link[href],
  html body .discussion-sidebar-toggle:hover,
  html body .commit-id:hover, body[class="page-responsive"] .files-list .octicon,
  html body .timeline-comment-action:hover,
  html body .RecentBranches-item, .commit-ref .user,
  html body .notification-navigation .notification-configure-filters:hover .octicon {
    color: mainColor !important;
  }
  a:focus, button:focus, [tabindex] {
    outline-color: mainColor !important;
  }
  html body .link-gray-dark:hover [class*="text"],
  html body .link-gray:hover [class*="text"],
  html body .muted-link:hover [class*="text"] {
    color: inherit !important;
  }
  .filter-item.selected, .filter-item[aria-current]:not([aria-current="false"]),
  .filter-item[aria-selected="true"], .dropdown-item:focus, .dropdown-item:hover {
    background-color: darken(mainColor, 20%);
  }
  .subnav-item.selected, .subnav-item[aria-current]:not([aria-current="false"]),
  .subnav-item[aria-selected="true"] {
    background-color: darken(mainColor, 20%);
    border-color: darken(mainColor, 50%) !important;
  }
  .new-user-avatar-cta, .blob-history, .feature-banner, .recently-touched-branches,
  .recently-touched-branches li, .commit-ref, .project-updated-message,
  .timeline-comment-label.collaborator-comment, .hook-delivery-guid .octicon,
  .hook-delivery-guid a, a.topic-tag, .RecentBranches, .RecentBranches-item-link,
  ul.search-results li .label, .markdown-format table th,
  div[style*="background-color: #044d6e"], .subset-files-tab .stale-files-tab-link,
  .timeline-comment.current-user:not(.is-internal) .link-gray,
  .delete-topic-button, .topic-tag, .topic-tag-action, .topic-tag-action .add-topic-button,
  .topic-tag-action .remove-topic-button, a.branch-name {
    color: darken(mainColor, 20%) !important;
  }
  .full-commit .btn-outline:not(:disabled):hover {
    color: mainColor;
    border-color: mainColor;
  }
  .full-commit .btn-outline, .full-commit .btn-outline:disabled {
    background-color: initial;
    border-color: darken(mainColor, 50%);
  }
  .contrib-legend .legend li[style] {
    width: legendSize;
    height: legendSize;
  }
  .calendar-graph rect[fill="#ebedf0"],
  .contrib-legend .legend li[style*="#ebedf0"],
  .js-activity-overview-graph-container [fill="white"] {
    background-color: darken(bodyColor, 5%) !important;
    fill: darken(bodyColor, 5%) !important;
  }
  .pricing-testimonial-logo-active::after {
    opacity: .05;
  }
  .pricing-testimonial-logo-active {
    background-color: lighten(bodyColor, 5%)
  }
  html body .flash-warn {
    background-color: darken(#dbab09, 85%);
    border-color: rgba(176,136,0,.2);
  }
}

I doubt this would ever happen in GHD and because @silverwind want to amputate GHD to remove what I think makes it extra nice and because my theming philosophy is the opposite (it seems) this can be addon style too.

Its a rough WIP but it closes all the issues mentioned.

Of course if you try to find colors combos in order to break this POC you likely will, depends how much you really want to shoot this POC down, but even at those extremes my response in advance is, you can never please everyone.

[the-j0k3r]

With some additions we could solve #238 in this new way also using similar logic

If we implemented #1096 this would likely need no CSS at all, just overriding the CSS vars, it would possibly even gives us the ability to do complete themes for GHD including all the gray dark backgrounds. Basically it would be a theme switcher of sorts. Its been done before for other styles for e.g. Stylus DeepDark which I also develop.

Basically the sky is the limit for theming that suits more users wants from any well developed style.

POC for

  :root {
    --custom-thumb-color: mainColor;
    --webkit-scrollbar-thumb-hover: rgba(mainColor, .8);
    --base-color: mainColor;
  }

IN main POC, if you have Overlay scrollbars and Selected tab color styles, this switches the theme colors to match.

[erkinalp]

@the-j0k3r Stylus will not accept the snippet as it is. I tried to import it and failed:

28:3 Unexpected token '/'
28:4 Unexpected token '/'
28:58 Expected IDENT
32:10 Expected :
62:3 Unexpected token '}'
64:5 Expected }
69:3 Unexpected token '}'
336:1 Unexpected token '}'

[the-j0k3r]

@erkinalp try again with latest userCSS POC in https://github.com/StylishThemes/GitHub-Dark/issues/1113#issuecomment-658075241

rough preview

[the-j0k3r]

all ensure POC is at @version 0.0.6-alpha

[erkinalp]

Now getting

27:3 Unexpected token '/'
27:4 Unexpected token '/'
27:58 Expected IDENT
39:10 Expected :
69:3 Unexpected token '}'
71:5 Expected }
76:3 Unexpected token '}'
340:1 Unexpected token '}'

[the-j0k3r]

How are you exactly doing this?

You should be creating a new style in stylus, then copy the whole css, dont forget the { } and paste and save.

[erkinalp]

OK, solved the problem. Turns out I have forgot to enable the usercss toggle.

[the-j0k3r]

All ensure POC is at @version 0.0.7-alpha

[the-j0k3r]

@silverwind

Towards solving #748 and #1094 also solved the issue #305

much to do yet before its ready for release.

Obviously for better results the colors should be chosen via slider not picked randomly and seems to give consistent results but with this format you can add preset themes in future, so imagine you can apply a twilight themes throughout or whatever tickles you.

[the-j0k3r]

This will never go anywhere with how this style is, no one will work on this in this style any longer so you need to find a better alternative to GHD if this is of high importance to you.

I have my own style, but its private for my own use and these issues dont exist in this design.

When I care to make my style public I will share.