charlieetienne / material-github Goto Github PK
View Code? Open in Web Editor NEWA Material Dark Theme for GitHub
Home Page: https://userstyles.org/styles/174317/material-dark-github
License: MIT License
A Material Dark Theme for GitHub
Home Page: https://userstyles.org/styles/174317/material-dark-github
License: MIT License
Highlighting of diff
syntax is not covered:
diff foo bar
baz
--- foo
+++ bar
*** baz
***************
*** foo ****
--- bar ----
@@ -foo +bar @@ baz
foo
-foo
+bar
!baz
bar
---
1.0
For reference, https://github.com/primer/github-syntax-light/blob/master/lib/github-light.css seems to have all "normal" highlighting rules.
When authenticating my organization's login with github, the SSO auth text is white.
If you don't have an organization I imagine you might be able to replicate this if you attempt to authenticate an application with your github account.
I tried to request the stylesheet sso.scss
located at https://github.githubassets.com/app/app/assets/stylesheets/custom/github/sso.scss
but it gave me a 404. I also tried to access it in the sources and had the same issue. I presume it is a source map leaking from compiled css. Regardless, these should be pretty easy to override.
<div class="org-sso-panel">
<div class="position-relative mt-2 mb-3">
<img class="avatar mb-3" src="redacted" width="60" height="60" alt="">
<h1 class="sso-title m-0">
Single sign-on to
<strong>My Org</strong>
</h1>
</div>
<p class="text-gray-light mt-2 mb-4">
Authenticate your account by logging into
My Orgβs
single sign-on provider.
</p>
<!-- '"` --><!-- </textarea></xmp> --><form action="" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="">
<button type="submit" class="btn btn-primary btn-block">Continue</button>
</form> </div>
Hello! π
Issue-ing another small style suggestion.
I noticed that the toolbar found under 'Pull requests > Files changed' in a repo page does not have the theme colors. I did not notice it before, maybe it could be due to a recent Github css change.
Example: https://github.com/CharlieEtienne/material-github/pull/1/files
Thanks!
Hello Charlie,
First I want to thank you -- this stylesheet is an eyeball-saver with large monitors! I really appreciate the effort you've put into it. (I personally hate CSS, so that makes me appreciate it even more! π )
It seems there's an issue with editing PR diff-review comments. Notice the white border when editing, and the preview tab is completely whited out. This just started happening so I guess they changed something. As far as I can tell, this seems isolated to editing a previously posted comment, and only in the PR diff-review discussion area.
The edit tab:
The preview tab:
Confirmed that this is still an issue with version 3.2.12.
.notifications-list-item.navigation-focus {
background-color: #f1f8ff!important;
}
Reproduction:
j
to select the first item in the listLooks like this fails to override since the background-color setting on line 1043 isn't marked with !important
Currently the headline looks like this with the text having no padding to the side:
In normal github this is okay because it's all white:
Issue in line 165 "div.border.rounded-1" overwrites the bg color to bg-2 instead of white which is bg-3
My possible solutions:
Change everything to "white" replacement by setting js-notification-search-autocomplete-dropdown to bg-3
Will have to adjust text color of texts & it is not easy to set apart from page background
Change background to bg-2 too
Might have to adjust "Available filters" text color?
Adjust padding
Maybe would have to add rounded borders? Overall doesn't seem nice still
I would personally prefer the 2nd Option. Do you think the text color should also be adjusted? if yes to what?
Hi!
I installed this style from style.css in this repo and the background of most of the site was still white, making it effectively unusable since you can't read any of the light text on white.
It appears that the CSS declarations setting --bg1
, --bg2
, etc to whatever colour they are supposed to be are missing?
userstyles.org is falling over as seems to often be the case so I have not been able to tell if this issue reproduces on the version on there.
IT IS
https://github.com/notifications/beta?query=is%3Aunread
SHOULD BE (I selected random darker color from picker for good apperance)
CHROME CONSOLE with selectors. I made change in .filter-item.selected, ul.filter-list .filter-item.selected,
for color !important
direcly in chrome.
please add this enhancement if you like.
It looks like GitHub changed something since this is a very recent issue.
I've updated to the latest Material Dark GitHub theme but unfortunately the problem persists.
With the Stylus theme disabled, the title-bars or headers (I don't know what to call them) for each file is properly aligned at the top:
But with the theme enabled, the title-bar has dropped and is obscuring the first 2 lines of code changes.
You can see the blank space above where it was supposed to be placed:
I only just noticed this today, so it broke in the past day or 2.
Selector
.task-progress .progress-bar .progress
Theme
Darker
Description
The contrast between the foreground and background colors of the issue progress bars is very low. It's slightly visible at higher-than-default brightnesses by disappears at lower-than-default.
The progress bars for milestones and projects seems to use a bright green that might be more appropriate.
Examples
for example:
https://developer.github.com/webhooks/
or
https://developer.github.com/changes/
Font and Background color is almost the same:
I hope this isn't just my color blindness kicking in lol
Once again thank you for this awesome theme! :)
This problem only started happening for me today, so GitHub has changed something I guess.
A number of pages in GitHub are starting to have white backgrounds shine through.
Even this issues page has a big block of white at the bottom, and you can see white around where I enter the title for this issue.
Sample problem code: https://github.com/input-output-hk/nix-tools/blob/master/default.nix#L12
It appears that the css classes pl-pse
and pl-mi
are not overridden, which define these incorrect colours.
Sticky bar has white background - can be seen on pull request details, for example here: https://github.com/django/django/pull/12572/files
Can be fixed with:
.pr-toolbar.is-stuck {
background-color: var(--bg3);
}
Thanks for maintaining this theme, it's really nice. I believe I found a bug:
When the cursor is placed in the search box, the foreground text is black and thus unreadable. It appears that GitHub has a separate style for when it is selected, shown below, that is causing the problem.
Just wanted to say that this is the best GitHub theme. You can close this post when you read it, thanks
Launch sample: https://github.com/l1ving/youtube-dl/commit/c438ea87e4db650f5c44526b155ea335ea49d006
(coded against reference)
@CharlieEtienne see
Hello! I really like this style, thanks for maintaining it!
I experience an annoying problem on my machine, I don't even know if there is anything you can do for it.
Sometimes, when opening a github window in an other tab for example, the upper bar on top appears white as in the screenshot below:
This problem disappears upon refreshing or clicking anywhere.
Do you have any idea where it can come from? Do not hesitate to ask me for more info about this issue, I can provide other screenshots or try some scenarios.
Hello! Reporting an inconsistency in the theme. On certain pages, the color of the selected menu item does not seem to get styled on mouse hover out.
I found this type of menu in:
Hi
If you enable the new Notifications (BETA), you notice that the main part of the page is still white (un-themed).
https://github.com/notifications/beta?query=is%3Aunread
Especially, take a look at these lines:
.notifications-list-item.notification-unread {
background-color: #fff;
}
Hi! First of all, thanks for bringing Material Design to Github!
Folder icons
I noticed that the folder icons doesn't seem to follow the selected accent color. Is it a bug, or is it simply not included in the theme? It would be really nice if you could theme these icons!
Tags' font size
In my case, the text in the tag is not aligned to center, and has a 12 px font size. The same problem also occurs on repository tags. I am using Chrome 83 with Stylus 1.5.11.
See image below for https://github.com/settings/admin
Appears to be the first selector in the following css setting the background to white
.menu-item.selected, .menu-item[aria-current]:not([aria-current=false]), .menu-item[aria-selected=true] {
font-weight: 600;
color: #24292e;
cursor: default;
background-color: #fff;
}
Project headers are currently white:
Not sure where to add it, but the offending selector is .project-header
Example:
https://github.com/grafana/grafana/projects/25#card-39005242
Show separators between issues/files
Right now, Markdown/etc. body text is white with alpha 0.7. I find this color to be a bit darker than I prefer for comfortable reading. Is it possible to add an option to increase the brightness?
I suspect this won't be the easiest to override, since 0.7 appears in several rules which are !important
. Writing my own userstyle to make text white will require tha I toggle Material Github and my own style simultaneously. And editing the style will break updates.
This part of GitHub needs to be themed too:
PRs are welcome if you want to work on that.
Hi.
I think that some colors of the Notifications page are a bit too bright.
Inbox / Saved / Done <li>
:
Maybe you could replace this color by #324149 ?
Also, could you make the color of Unread issues darker too ?
Maybe with color #1f292e or #141a1e ?
Thank you in advance.
Hi,
Awesome theme!
I found a few small problems however, I fixed them. They are probably due to GitHub changing their html.
Would you mind implementing this changes back and updating the theme for everyone? :D
Keep up the good work.
/* changes */
/* comments */
.comment-body, .markdown-body, .js-comment-body {
color: rgba(255, 255, 255, 0.7) !important;
}
/* timeline background lines, badges, etc */
.TimelineItem-break {
background-color: var(--bg3) !important;
border-top: 4px solid var(--bg5) !important;
}
.TimelineItem:before {
background-color: var(--bg5) !important;
}
.TimelineItem-badge {
border: 2px solid var(--bg5) !important;
}
/* tabs on the comment box and such, Write, Preview, etc */
.tabnav-tab.selected, .tabnav-tab[aria-selected=true] {
background-color: var(--bg5) !important;
border-color: var(--bg4) !important;
}
/* badges, like bug, feature, etc, */
.protip code {
background-color: var(--bg5) !important;
padding: 3px;
}
/* end changes */
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.