Code Monkey home page Code Monkey logo

github-moonlight's Introduction

Github Moonlight

A dark userstyle for GitHub inspired by moonlight-vscode-theme made with ❤️

Install Directly with Stylus Discord Server Commit Activity Stars Latest Release

screenshots/repo.png

Installation

You have to install Stylus and then click on the install link below.

Install Directly with Stylus

Features

Customization

All color and font variables are easily customizable check out build.ts and github.user.css for reference.

Completeness

This theme changes 100% of the github ui. If you want to teak the colors to match the rest of your system go ahead! Forks and pull requests are welcome!

Speed

Github-Moonlight uses cached mixins from the stylus css preprocessor on top of compression to consolidate and minify selectors.

Transitions

This theme adds easings from easings.net so that color changes appear smoother.

Clean Code

The theme being written in stylus-lang utilizing several mixins in order to minimize boilerplate.

Organization

Unlike virtually every other usercss. This project is organized into relevant files making it easy to manage and extend the code.

Recommendations

Fonts

These are the fonts used in the screenshots

Extensions

ExtensionDescription
GitakoGitHub File tree
Hide FilesHides nonsensical files
Refined GithubAdds a number of small enhancements to github
Lovely ForksDisplays notable forks on repo page
github-vscode-iconsAdds vscode like icons to github
OctoLinkerLinks dependencies on github

Additional Screenshots

RepoRepo
ProfileProfile
CodeCode
Commit TreeCommit Tree
SearchSearch
Dashboard (with Refined GitHub)Dashboard (with Refined GitHub)
DashboardDashboard
Pull RequestsPull Requests
Pull Request ReviewPull Request Review
File FinderFile Finder
Contribution TreeContribution Tree
MarkdownMarkdown
IssuesIssues
DiffDiff
Gist UserGist User
Gist FileGist File
Gist File EditGist File Edit
ExploreExplore
Api DocsApi Docs
ActionsActions
File EditorFile Editor
ProjectsProjects
CommunityCommunity
GraphQL ExplorerGraphQL Explorer

Issues

If you find any places where this theme is incomplete please do not hesitate to create an issue. Most likely I have never visited the area of the site that is incomplete

Discord Server

Feel free to join our discord server for support/inquiries or just to chat.

Contributions

Contributions are welcome! Please refer to the contribution guide.

github-moonlight's People

Contributors

babariviere avatar brettm12345 avatar gregk-git avatar itsjunetime avatar jamiebrynes7 avatar ryokohbato avatar vednoc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

github-moonlight's Issues

Nitpicky issue: White artifacts in Issues List

image

Very nitpicky, but on the left side of the "Issues List" there seem to be some white artifacts, which are not present on the right.

It seems to have something to do with the border radius.

Pull requests off

Describe the bug:
The pull request bar appears to be off its intended position:

image

Expected behavior:
It's intended to appear in its normal position in the panel that also contains "clone".

Where did this happen:
Private company repo

Steps to reproduce:
Upstream a branch

Screenshots:
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS, Windows 7] Manjaro Linux
  • Browser: [e.g. Chrome, Safari] Firefox
  • Version: [e.g. 22] 75

Additional add-ons installed:
A list of extensions you are using besides Stylus.
The ones recommended in the README.md

Change busy status bg color to a light-purplish one?

Describe the bug
Currently, the user's busy status bg color is #473e38, a brownish-grey color.

Expected behavior
A light-purplish color which goes better with the rest of the colors.

Screenshots
scrot-2020-04-01_100831_1680x1050

Desktop (please complete the following information):

  • OS: Linux (4.19.97-gentoo)
  • Browser: Firefox
  • Version: 74.0 (64-bit)

Thanks for your hard work... This theme is so beautiful.

Incomplete dark theme on page to apply for GitHub Edu pack

Describe the bug
When you go to the page to apply for a GitHub Education pack, there are some elements dark and some still unmodified. Also the text is hard to read in the pink bubble.

Expected behavior
Text is clearly readable, and the theme applies to the entire page.

Screenshots
(emails are censored) https://i.imgur.com/3twtK4L.png

Desktop (please complete the following information):

  • OS: Ubuntu 18.04
  • Browser: Chrome
  • Version: 81.0.4044.83 (Official Build) beta (64-bit)

Steps to reproduce
Go to https://education.github.com/discount_requests/new

Doesn't work on files you get and view directly through https://raw.githubusercontent.com/

Describe the bug
Domain does not have the theme applied to it.

Expected behavior
Domain is themed.

Screenshots
URL to reproduce: https://raw.githubusercontent.com/openstyles/stylus/master/manage.html

Desktop (please complete the following information):

  • OS: Ubuntu 18.04
  • Browser: Chrome
  • Version: 81.0.4044.83 (Official Build) beta (64-bit)

Note: I have created a PR to fix this and will link it

Profile contribution section doest work anymore

Describe the bug:
The contribution section doesnt show in the themes colors anymore.

Where did this happen:
Github profile page

Steps to reproduce:
Go to your github profile and look at your contributions section

Screenshots:
Screenshot 2020-11-02 125344

Desktop (please complete the following information):

  • OS: Windows 10 20H2
  • Browser: MS Edge 86.0.622.58

Additional add-ons installed:
None

Github reaction emoji, Comment makrdown editor in small screens have a white background

Describe the bug:
Github reaction emoji, Comment makrdown editor in small screens have a white background

Where did this happen:
Any issue thread eg. #37

Steps to reproduce:
React with an emoji on a comment to see the white background.
Resize window to see the comment markdown toolbox use the white background.

Screenshots:

image

and

Peek 2020-04-11 11-02

Desktop (please complete the following information):

  • OS: [Manjaro 19.02 (Linux, Arch based)]
  • Browser: [Firefox ]
  • Version: [75.0-1]

Additional add-ons installed:
Gitako
UBlock Origin

Fix for the emoji
.reaction-summary-item.user-has-reacted {
--background: var(--base-5) !important;
}

Fix for the Toolbar
.page-responsive .previewable-comment-form .comment-form-head.tabnav .toolbar-commenting {
background: var(--base-3);
}

.border-md-top {
border-top: 1px solid var(--base-1) !important;
}

image

Can we get a more distinguishing selection color?

Describe the bug:
Hard to see selected (formatted inside of "```")text on page.

Screenshots:
First image: 2nd line is selected. First line's code is not.
image

2nd image: First line's code is selected but it's unnoticeable.
image

I don't know if it is a bug or not, or it is intended.

Stylus symbol counter shows up on non-github domains

Describe the bug
Stylus claims this theme is applying to non-github domains, such as google.com but not on all, for example it doesn't show up on discordapp.com.

Expected behavior
Stylus only claims this is applying the domains it's supposed to.

Screenshots
https://i.imgur.com/KvuhmTz.png

Desktop (please complete the following information):

  • OS: Ubuntu 18.04
  • Browser: Chrome
  • Version: 81.0.4044.83 (Official Build) beta (64-bit)

Note: This may be an issue with stylus, but I was able to reproduce it on Chrome Stable as well, and do not have this issue with other styles.

Home page sidebar is white

Describe the bug:
When the user is not logged in the github home page sidebar is white

Expected behavior:
The sidebar should look like the rest of the theme

Where did this happen:
The sidebar doesn't look like the rest of the theme

Steps to reproduce:

Screenshots:
bug

Desktop (please complete the following information):

  • OS: Nixos
  • Browser: Chrome
  • Version: probably latest

Additional add-ons installed:
The other extensions recommended in the readme

Doesn't work on github.community domain.

Describe the bug:
Theme doesn't work on github.community domain.

Expected behavior:
The theme works on the github.community domain.

Where did this happen:
https://github.community/

Steps to reproduce:
Go to https://github.community/

Screenshots:
https://i.imgur.com/6GxQbpq.png

Desktop (please complete the following information):
Desktop OS, browser, and browser version, don't matter, because it's a different domain the theme doesn't even apply to.

Additional add-ons installed:
Doesn't matter, as the theme does not even apply to this domain.

(nitpick) White box at github.com when signed into a new account

Describe the bug:
When you make a new account, and sign in, and go to github.com, there's a large white box that is clearly visible. I suspect most users of your theme will never ever see it, due to them most likely making a github account long before downloading the style, so this is really nitpicking.

Expected behavior:
The box would be themed.

Where did this happen:
https://github.com/

Steps to reproduce:

  1. Create a new account
  2. Sign in
  3. Go to https://github.com/

Screenshots:
Chrome:image
Firefox:
image

Desktop (please complete the following information):

  • OS: Windows 10 OS Version 1909 (Build 18363.720)
    Browser and Versions tested:
Browser Version
Google Chrome 81.0.4044.92 (Official Build) beta (64-bit) (cohort: Beta)
Firefox 76.0b3 (64-bit) beta

Additional add-ons installed:
Note: Dark Reader is not being used on GitHub
Chrome:image
Firefox:
image

Caret for merge bloc doesn't follow the bloc border color

Describe the bug:
The caret of merge bloc has the wrong color.

Expected behavior:
The caret should follow the bloc border color.

Where did this happen:
Any page containing merge bloc ex: #65

Screenshots:
Sans titre

Desktop (please complete the following information):

  • OS: MacOS 11.0.1
  • Browser: Firefox Nightly
  • Version: 85

Additional add-ons installed:
JetBrains toolbox extension

Weird black 1px lines

I have noticed there are several instances where the black 1px border seems to be out of place.
for example at the nav bar:
image
(look bottom left and bottom right)

Then, in the header navbar text, while being in the dashboard:
image

In code formatted text:
image

And in the footer when in dashboard:
image

White colors in the side bar (gitako)

Describe the bug:
It's clear in the screenshot below, it only happened today, it was fine yesterday. Reinstalling doesn't help.

Screenshots:

image

Desktop (please complete the following information):

  • OS: [e.g. iOS, Windows 7] win10 v1909
  • Browser: [e.g. Chrome, Safari] Vivaldi 2.11 (chromium based)

Additional add-ons installed:
A list of extensions you are using besides Stylus.
Dark Reader - (disabled for github)
Tampermonkey (no scripts for github)
github-vscode-icons
gitako

Gists page has a bar at the top still in light theme

Describe the bug
When you go to the gists page, there's a large white bar at the top.

Expected behavior
The bar is themed.

Screenshots
If applicable, add screenshots to help explain your problem.

  1. When not logged in, it takes you to the page to discover gists: https://gist.github.com/discover
  2. when logged in: https://gist.github.com/

Desktop (please complete the following information):

  • OS: Ubuntu 18.04
  • Browser: Chrome
  • Version: 81.0.4044.83 (Official Build) beta (64-bit)

Numbered lists are displayed with bullets

Describe the bug:
image

Expected behavior:
image

Where did this happen:
I created a private gist with this markdown in it:

**Quick start**

1. Install Emacs 26.1+ (27 is recommended. 28 is not)
2. Install ripgrep through your OS package manager
3. `git clone https://github.com/hlissner/doom-emacs ~/.emacs.d`
4. `~/.emacs.d/bin/doom install`

Desktop (please complete the following information):

  • OS: NixOS 19.09
  • Browser: Firefox
  • Version: 74

Additional add-ons installed:
Disabled all my other plugins to test this.

White "invite someone" bg in organization page

Sorry for opening another issue today instead of submitting a PR, but I'm not familiar with front-end technologies.

Describe the bug
The bg color of "invite someone" button in organization page is white.

Expected behavior
The color should be dark.

Screenshots
scrot-2020-04-01_135735_1680x1050

Desktop (please complete the following information):

  • OS: Linux (4.19.97-gentoo)
  • Browser: Firefox
  • Version: 74.0 (64-bit)

bug_report.md could ask for some more useful information for reproducing issues, and styling could be more consistent

Describe the bug
Bug report could ask some stuff like "Where did this issue happen (on which repo or address?)", "give a description how to reproduce this bug", "what add-ons do you have installed (besides Stylus)?".

Styling could be more consistent, using a : for every section instead of just Desktop.

And why not add Windows 7 as an example OS?

I'll create a PR with those fixes.

Whitespace issue on PR page

Describe the bug
code blocks on pull requests are not wrapping properly

Expected behavior
all text fits inside text box

Screenshots
image

Desktop (please complete the following information):

  • OS: [e.g. iOS] Arch linux
  • Browser [e.g. chrome, safari] chrome
  • Version [e.g. 22] 80.0.3987.149

the text color at the clone options is weird.

Describe the bug:

the text color at the clone options is weird.

image

Expected behavior:

image

Desktop:

  • OS: Windows 10
  • Browser: Vivaldi 3.4 (With no extension except Stylus), Firefox 81.0.1
  • Version: github-moonlight v3.4.2

Change code font

Great work!
Is there any way to change the code font to the original mono font used by Github? Thanks.

p/s: sorry this is just a dumb question, I didn't mean to add the bug label

Typo in repo description

It may be small, but I noticed the repo's description text reads A beatiful dark blue userstyle for GItHub. Made with ❤️ with "GitHub" spelled incorrectly.

Thank you for the beautiful style! <3

Font colors unreadable when authorizing applications

Describe the bug
The authorize application page on GitHub has unreadable text (in particular, Repositories and organization names)

Expected behavior
You can read it better (it should be in blue text with that dark blue background)

Screenshots
image

Desktop (please complete the following information):

  • OS: NixOS
  • Browser: Brave
  • Version: 77.0.69.128

Unknown property 'scrollbar-color' and 'scrollbar-width'

Describe the bug:
The scrollbar is not themed anymore. I navigated to the theme editing page in stylus and found these two issues:
scrot-2020-04-04_095418_277x101

Expected behavior:
Maybe the scrollbar is supposed to be themed like in previous versions?

Where did this happen:
Theme editing page (in stylus)

Steps to reproduce:

  1. Install github-moonlight 2.10.10
  2. Scrollbar is not themed
  3. Navigate to theme editing page (in stylus) and these issues will be displayed.

Screenshots:
.

Desktop (please complete the following information):

  • OS: Linux (5.4.28-gentoo)
  • Browser: Firefox
  • Version: 74.0 (64-bit)

Additional add-ons installed:

  • Dark Reader (disabled on github)
  • HTTPS Everywhere
  • NoScript
  • Privacy Badger
  • uBlock Origin
  • Video DownloadHelper
  • Youtube Audio

Open PR icons are not green

Describe the bug:
The color for open PRs icons is not always green

Expected behavior:
Open PRs icons should be green

Screenshots:

  • Recent activity at homepage
    image
  • The pull request tab in a repo (draft PRs should be gray or something)
    image
  • The new notifications page
    image

Desktop (please complete the following information):

  • OS: Ubuntu 19.10
  • Browser: Chrome
  • Version: 80.0.3987.149 (Official Build) (64-bit)

Add support for the new Github UI Overhaul

Describe the bug:
The theme is currently broken on the new Github UI overhaul.

Expected behavior:
The theme should work fine.

Where did this happen:
The repo/link at which the issue occurred.

Steps to reproduce:
Go to feature preview and enable the new UI preview.

Screenshots:
Buttons like these are not properly themed
image

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
  • Version: Newest

Additional add-ons installed:
A list of extensions you are using besides Stylus.
LoverlyForks
Octolinker
Gitako
HideFiles

Add theme variants

I think it would be cool to add support for different color schemes. Add your suggestions here

Viewing a repo when not signed in, there's a bar at the top in light mode

Describe the bug
When you are not signed in and you view a repo, there's a large white bar at the top telling you to sign in.

Expected behavior
Bar is themed.

Screenshots

  1. Stylus repo: https://github.com/openstyles/stylus
  2. Dark Reader repo: https://github.com/darkreader/darkreader

Desktop (please complete the following information):

  • OS: Ubuntu 18.04
  • Browser: Chrome
  • Version: 81.0.4044.83 (Official Build) beta (64-bit)

README Generation

What is the command you are using to generate the readme.org file? I found pandoc -t org-smart -f org-smart doc/readme.org -o readme.org in the package.json file, but when I run that command I get very different output than what is in the readme.org file.

I'm using pandoc version 2.9.2.

Can't easily see if I clicked an emoji without hovering to see names of who clicked it

Describe the bug:
I can't easily see if a reaction is reacted to by me.

Expected behavior:
In the original GitHub style, because it's white, a reaction normally has a white background, and when you click on it, that becomes like a highlighted blue background. I don't know what colors would work best for your theme, perhaps the number should be white, and I don't know if that should be before or after your react.
Here's screenshots of what I mean with the original style:
Before you react:
image
After you react:
image

Where did this happen:
Any repo, but I used #29 to take screenshots to display this.

Steps to reproduce:
React by clicking an emoji on a comment on an issue post.

Screenshots:
Before reacting:
image

After reacting:
image

Desktop (please complete the following information):

  • OS: Both Windows 10 and ChromeOS
  • Browser: Both Firefox and Chrome
  • Version: Stable, Beta, and Canary Chrome, and on Version 68.7.0esr (64-bit) of Firefox-ESR

Additional add-ons installed:
Just stylus add-on and your style

Keywords in code get dark color that merge with dark background

Describe the bug:
In code snippets, some keywords are getting a dark color that merge with the dark background-color, this can be observed in many places.

Where did this happen:
Below screenshot can be found at axios/axios#934

Screenshots:
image

Desktop (please complete the following information):

  • Browser: Firefox
  • Version: 74

Additional add-ons installed:
Dark Reader, though it's turned off.

Transparent images have a (mismatching) background color

Describe the bug:
Transparent images (in rendered READMEs) are assigned a background color that doesn't match the background. Here are two examples:

Expected behavior:
They should be transparent, as they are on vanilla github:

image

image

Desktop (please complete the following information):

  • OS: NixOS 19.09
  • Browser: Firefox
  • Version: 74

Additional add-ons installed:
Disabled all my other plugins to test this.

Web Extension

It would be cool to build this as a web extension with the ability to easily switch colors, add custom themes and change settings

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.