Extension for making GitHub great again

  • By Dennis Snijder
  • Last update: Oct 16, 2022
  • Comments: 10

Make GitHub Great Again!

Get your old GitHub back. Remove the new dark topbar, hide those garish blue links and restore all the original colors!

alt screenshot

How to install

Click on the following link and install the extension.

Google Chrome

https://chrome.google.com/webstore/detail/makegithubgreatagain/gpejlkhibgecggplgogpbgbdpnhogmhk

Firefox

https://addons.mozilla.org/firefox/addon/githubgreatagain/

How to manually install

  1. Download this repository.
  2. Open up chrome://extensions/ in your browser and click “Developer mode” in the top right.
  3. Click on the new button Load unpacked extension... and select the downloaded folder.

Congratulations! You just made GitHub Great again!

Github

https://github.com/DennisSnijder/MakeGithubGreatAgain

Comments(10)

  • 1

    Make Github colors great again!

    I have combined @tombola's link styling and toggling code with @svnpenn's restored colors, and then I applied a few fixes on top, for #49.

    It's not as clean as I would like, and no doubt there will be more edge cases to fix in the coming weeks, months and years, but this is getting me by for today at least.

    Some wild thoughts appeared:

    Adding the .great-again class allows us to easily toggle the changes on/off, but it also makes our CSS rules more specific, and as a result they sometimes override more than they should do! So I have had to add many exceptions to the rule that makes links blue. But it is difficult to make an exception with :not() if the link does not have a class directly on it, so in some cases I had to specifically restore the color of the unintentionally styled link. Argh!

    One alternative to this approach would be to instead add a very plain a { ... } rule after the site's CSS has loaded. That would have the advantage of overriding fewer things accidentally. But it would also have disadvantages: We might see the original colors for a moment, before our CSS is applied. And without .great-again toggling would now be harder (we might have to edit our CSS in the DOM).

    A radically alternative approach to re-styling would be to go through the CSSDOM and change all occurrences of #0366d6 (the new link color) into #4078c0 (the old link color). This would magically keep up with any new CSS rules added in the future, but on the other hand it would fail if the color theme is ever changed again.

    If we do stick with the .great-again class, then we can probably remove most of the !importants from svnpenn's save-the-colors.css. I just didn't get around to testing that.

    I have tried to comment each CSS rule with the things that it changes, so we can check in future whether that particular requirement is still met. Please ignore the comments if you find them too verbose.

    Eventually I would love to get these colors into a userscript, so I can enjoy them in all the browsers

    Didn't issues used to have the thumbnails of the participants next to them in the issues list? Has this feature disappeared, or was it only ever in enterprise?

  • 2

    Appoint a new director of mergifications

    Often Github's changes to CSS can break extensions like this one, but sometimes contributors will come out with a fix pretty soon.

    It would be great to have someone who could quickly merge these kinds of fixes, so that users don't suffer a period of lost functionality.

    However I appreciate it might be a little bit complicated, because the extension would also need to be pushed up to the Chrome Web Store.

    I have no idea what is involved in that, or whether it is a task that can be easily shared. But if it could, that would be great!

    PS: This issue's title was a short-lived topical reference.

  • 3

    Add focus class to "This repository" label

    Currently, "This repository" label is blank and white. It is not the default blue bootstrap theme color. When inspected, the label element was missing the focus class.

    Attached screenshot. At the top left, you can the see the white label without focus.

    missing-focus-class

  • 4

    header-dark removing no long works

    Github just updated the header-dark class to be the default header class. We need to overwrite the existing CSS class to get the extension working again.

  • 5

    CSS solution

    Since @mdo has completely lost the plot:

    For now! Not trying to be a jerk, but that extra class will be going away soon. Just how we shipped v1 of it.

    It might be a good idea to implement a CSS solution, as the JavaScript solution is likely to break. Here is one I came up with:

    http://github.com/svnpenn/dotfiles/blob/cf47bf9/stylish/github.css#L2-L32

  • 6

    Add userscript version

    And please add the following to Readme: (I didn't do this because YOU, @DennisSnijder need to go to settings, and enable the Github Pages on your master branch.)

    # If you prefer the userscript method...
    
    0. Set Github Pages at your main branch in case you stress Github's server: Pages is served via the CDN as static file so this is better for Github.
    1. Install a Userscript manager: refer to https://github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-beginners-HOWTO 
    2. In browser, go to  https://{YOUR_REPO_URL}}/MakeGithubGreatAgain/MakeGithubGreatAgain.user.js
    3. Install the script
    
    Now you have it! It will kick in a sec later, but easier to deploy.
    
  • 7

    Fix header css

    Some hours ago Github changed its css classes for the header (specifically .header-nav-link to .header-navlink) so that broke the colors of the header links and people were experiencing issues (see #56).

    This commit fixes the issue by changing the css class to the updated one 👍

  • 8

    Numerous improvements/refactoring for the Chrome extension

    • Change browser action to page action

      They look similar on recent Chrome versions, however, page actions can be toggled on/off and it doesn't make sense to have the button enabled outside github.com

    • Toggling the style will now affect other open GitHub tabs too, no need to reload the page!

    • Fix bugged code logic at content script

      If there are no results for getElementsByClassName(), it will return null... but we immediately try to get the first result from the array, which will throw an Error... therefore the if statement beneath is completely pointless

            // check if element exists yet
            var element = document.getElementsByClassName("header-dark")[0];
            if (element) {
    
  • 9

    Put the list of repos back on the right again?

    Recently, the box on the dashboard containing the list of your repos has moved from the right of the page to the left of the page.

    Things being as they are these days, I am not really against things moving from the right to the left.

    But if enough people are bothered by this, I don't mind adding a float: right to restore things back how they were in 2016.

    :+1: = move those repos back over to the right. Restore balance to the desktop. :-1: = keep the repos where they are now. Keep those Github designers in a job.

    This offer will expire 31st October 2018.

  • 10

    Broadcasting to the content scripts

    Hey

    Just something that might be helpful towards this comment:

    // Chrome doesn't have an easy way to broadcast a message to all // content scripts, so just broadcast the message to every tab // and rely on Chrome's manifest permission to restrict

    You can totally do this with the chrome.runtime API 🎉

    https://developer.chrome.com/extensions/runtime#method-sendMessage