stylishthemes / github-dark Goto Github PK

GitHub has just rolled out a new repository look called Repository Next: https://github.com/blog/1529-repository-next

This seems to need some new styling.

Click on any categories in an issue list to reproduce.

Hey guys, i've been thinking that hey.. maybe our dark background may be getting a little bland.. Maybe we could put an optional background in. check this one out!

What do you guys think? Again, it would be completely optional.

See https://github.com/alice0775/userChrome.js

These are really ugly right now:

I ponder if we should add them to our existing class for inverting images, or if you plan to redo these gifs.

I'd love seeing them converted to APNG, but that would screw Chrome users without the APNG addon :P

Hey, for some obscure reason, I fail to style this select's background in Firefox, any ideas?

See e.g.: https://github.com/lycus/flect/wiki

I happened to notice it when editing a gist. Screenie

My proposed fix is:

.file-data .line-numbers { font-size: 13px; }

Confirmed to fix it in Firebug: Screenie 2

Fixed by:

.vcard-fullname, .vcard-username {
    overflow: hidden;
}

Tested in Firebug. It seems this was caused by a change in GitHub's main CSS instead of GH Dark. If you'd rather tackle just the vertical scrollbar, use overflow-y: hidden.

This userstyle is the best one I've found for GitHub!

See attached image.

It's a bit weird; sometimes if you hover the mouse around the comment area, it'll look OK...

The text in the language statistics div is hard to read. Go to https://github.com/laurentpetit/ccw (for example) and click on the colored bar with the "Show language statistics" tooltip; the result looks like this:

The words Java, Clojure, Emacs Lisp, and Shell are quite hard to read because their foreground color (inherited from Github's normal style) is too close to the newly-dark background.

A quick peek with Firefox's Web inspector shows that the CSS style that's "winning" for the span.lang element(s) is the following style:

.kill-the-chrome .repository-lang-stats ol.repository-lang-stats-numbers li .lang {
    color: rgb(51, 51, 51);
}

Here's the Outer HTML of the language-statistics div, to make debugging easier:

<div class="repository-lang-stats">
        <ol class="repository-lang-stats-numbers">
          <li>
              <a href="/laurentpetit/ccw/search?l=java">
                <span class="color-block language-color" style="background-color:#b07219;"></span>
                <span class="lang">Java</span>
                <span class="percent">57.8%</span>
              </a>
          </li>
          <li>
              <a href="/laurentpetit/ccw/search?l=clojure">
                <span class="color-block language-color" style="background-color:#db5855;"></span>
                <span class="lang">Clojure</span>
                <span class="percent">31.9%</span>
              </a>
          </li>
          <li>
              <a href="/laurentpetit/ccw/search?l=emacs%20lisp">
                <span class="color-block language-color" style="background-color:#c065db;"></span>
                <span class="lang">Emacs Lisp</span>
                <span class="percent">9.6%</span>
              </a>
          </li>
          <li>
              <a href="/laurentpetit/ccw/search?l=shell">
                <span class="color-block language-color" style="background-color:#5861ce;"></span>
                <span class="lang">Shell</span>
                <span class="percent">0.6%</span>
              </a>
          </li>
        </ol>
      </div>

Hey!

The caret in Gist is currently black while the text editor's background is dark grey. This makes it rather hard to see. Could the caret get a different color, say, white?

Thanks!

This looks like a new feature on the blame page (the newer... older color gradient)

Should we make this match the contribution calendar colors, or not even bother?... it had 10 colors versus the 5 in the contribution calendar. My main issue it is a bit difficult to distinguish difference in colors - I think 10 is too many colors.

There's a Github news box that hasn't been recolored yet: the "You've been added to the (name) organization" box. Screenshot below.

As you can see, the class of the bright div is "dashboard-notice org-newbie js-notice". The Firefox inspector tells me it's getting the background color (#fffde3) from the dashboard-notice class. The dashboard-notice class also appears to have "background-image: linear-gradient(#fffff6, fffde3)" and "background-repeat:repeat-x".

This is showing up for me in both Firefox and Chrome.

Github added a new feature in diffs. We should adopt to it eventually, though It seems pretty hard to me finding the correct selectors here on first glance.

I noticed two problems in the https://help.github.com/articles/github-flavored-markdown page. First, the Tip: box is unreadable:

Second, there's a bright outline around the line numbers in the Code example at the bottom of the page, and an out-of-place white bar visible at the top and bottom of the div:

This issue lists possible syntax highlighting themes to include with this repo. These are themes I could use help with converting to a standard pygments theme.

If you find any that you'd like to have included, please list them in this thread.

Vim Themes (need conversion to pygments)

• Mustang
• Vitamins
• Neverland
• Birds of Paradise
• Digerati
• Pastels on Dark
• Up
• Darcula

Other Themes (need conversion)

• Twilight.tmTheme
• Idle Fingers

@aalvarado Could you help out with some of these? Thanks! :P

You should update the images on http://userstyles.org/styles/37035/github-dark with the images from commit 8591398

Higher resolution photos, also i have both blue and red, to show the theme customization

These circled arrows here could use some more contrast, especially in the non-hover state:

The Hover on searchbox results is a bright background which makes it quite hard to read the text on it.

I suggest using a black background for the hover effect:

.commandbar .choice:hover,
.commandbar .loading:hover {
  background-color: #000000;
}

Makes the text perfectly readable and still distinct from the normal background.

This looks like another GitHub bug, I just reported it through their contact form, as it isn't fixable with CSS alone as we're missing markup in this case.

It seems that GitHub has changed the design of its repositories today (albeit it seems voluntary at the moment) and some elements are no longer dark.

See: lycus/exmake#24

The status is green for me, while it probably should be red.

See here: https://github.com/lycus/exmake/releases

See the bottom of this help page.

I don't know when Github changed their markup or whatever (wasn't on a PC using the style lately), but the Repository boxes on the right of the dashboard are in a bright color now...

The classes should be box-header and li.public, don't know which were the old ones though...

Under "Issues", the tab in the foreground has less contrast than the tab in the background, making it appear inactive. Maybe invert the element background color?

Hey, I'm not exactly sure how I could handle these images here. The get them darker, on WebKit one could use

.js-gshot > a {
 -webkit-filter: invert(100%)
}

but unfortunatly, Firefox doesn't support CSS filter shorthands yet, and you'd need to import a filter (as described here) from an svg file like:

filter: url(invert.svg#invert)

with the svg containing something like this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><filter id="invert"><feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/></filter></svg>

So far, I haven't got my Firefox to import this filter correctly yet, I've tried through both a real URL and a Data URI.

Just thought to let you know. If you have any other idea about fixing those images, just shoot!

I'm not sure how this happened but the graphs are white again in Chrome: https://github.com/StylishThemes/Github-Dark/graphs/contributors

I think they renamed the block.. even the border is white.

well shoot... http://userstyles.org/

(not an github-dark issue.. just a general issue that i'll delete soon)

The orange in the following picture is out of place.

Not sure if it can be done, but I'll look into styling this canvas here later:

https://github.com/Mottie/Github-Dark/network

See e.g. my profile: https://github.com/alexrp

The empty repository message is unchanged.

example: https://github.com/exocet/RpgCharacterGenerator

Issue #37 needs to be reopened (there's one more thing that needs fixing before it can truly be called finished), but even though I created it, I don't have the ability to reopen it; only people with commit access to a Github repo can reopen issues on that repo.

Today GitHub changed some class on the dashboard and the Navigation buttons are bright, gonna see which class it was

See e.g.: https://github.com/D-Programming-Language/druntime/blob/master/src/core/sys/posix/config.d

The identifier highlighting rule seems to have broken recently.

When viewing source code of files on GitHub, the line numbers on the side quickly become misaligned, making it very difficult to get an anchor to the line we actually want to link.

Here's how it is by default:

And here's with the theme on:

As you can see, we have a 15 line misalignment just 600 lines in (so about a line of skew every 40 lines).

I just made an update which I'm sure broke a few styles. So I would appreciate any help in tracking them down :)

Note: I see there are requests for allowing LESS and/or SCSS to be used with stylish, so we can look forward to that for offset colors. But for now, I didn't bother with them (e.g. calendar contribution colors).

Note 2: My new favorite base color is teal #008080 🍰

We might have to come up with a different color based on what's selected, like a::-moz-selection. A shame you can't combine these selectors with anything.

When looking at source code in Github's new repository view, there's still a bright white line, several pixels tall, visible at the top and bottom of the code viewer. See screenshot below.

As you can see from the inspector that I left in the screenshot, the part of the HTML that's responsible for this is either the div.highlight or its parent element, the td.blob-line-code.

if you browse the branch that has a pending PR, the icon will be old blue style. This needs to be updated to fit the green button theme.

I'd like to recolor the language-colors to more flashy colors so they stand out more on dark backgrounds. Unfortunately, GitHub applies them through inline styles, so we need to create a list of colors in use first. Here's what I have so far from my projects:

background-color:#f15501; /* javascript */
background-color:#1f085e; /* css - hard to read */
background-color:#fa1fa1; /* lua */
background-color:#5a25a2; /* c# */