# Created 2020-04-12 Sun 15:49
#+OPTIONS: title:nil date:nil '
#+AUTHOR: Brett Mandler
#+startup: nofold
#+macro: badge #+HTML: <a href="$2"><img src="https://img.shields.io/$3&style=flat-square" alt="$1"/></a>
#+macro: install {{{badge(Install Directly with Stylus,https://raw.githubusercontent.com/brettm12345/github-moonlight/master/github.user.css,badge/Install%20directly%20with-Stylus-116b59.svg?longCache=true)}}}
#+export_file_name: ../readme
#+html: <div align="center">

* Github Moonlight

A dark userstyle for GitHub inspired by [[https://github.com/atomiks/moonlight-vscode-theme][moonlight-vscode-theme]]
made with ❤️

#+html: <a href="https://raw.githubusercontent.com/brettm12345/github-moonlight/master/github.user.css"><img src="https://img.shields.io/badge/Install%20directly%20with-Stylus-116b59.svg?longCache=true&style=flat-square" alt="Install Directly with Stylus"/></a>
#+html: <a href="https://discord.gg/n5meNsX"><img src="https://img.shields.io/discord/693723424190627881?label=discord&logo=discord&style=flat-square" alt="Discord Server"/></a>
#+html: <a href="/commits/master"><img src="https://img.shields.io/github/commit-activity/m/brettm12345/github-moonlight?logo=github&style=flat-square" alt="Commit Activity"/></a>
#+html: <a href="/stargazers"><img src="https://img.shields.io/github/stars/brettm12345/github-moonlight?logo=github&style=flat-square" alt="Stars"/></a>
#+html: <a href="/releases"><img src="https://img.shields.io/github/v/tag/brettm12345/github-moonlight?logo=git&style=flat-square" alt="Latest Release"/></a>
[[file:screenshots/repo.png]]
#+html: </div>

** Installation

You have to install [[https://add0n.com/stylus.html][Stylus]] and then click on the install link below.
#+html: <a href="https://raw.githubusercontent.com/brettm12345/github-moonlight/master/github.user.css"><img src="https://img.shields.io/badge/Install%20directly%20with-Stylus-116b59.svg?longCache=true&style=flat-square" alt="Install Directly with Stylus"/></a>

** Features
**** Customization

All color and font variables are easily customizable
check out [[file:build.ts][build.ts]] and [[file:github.user.css][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 [[https://stylus-lang.com/docs/bifs.html#cachekeys][cached mixins]] from the stylus css preprocessor on top of
compression to consolidate and minify selectors.

**** Transitions

This theme adds easings from [[https://easings.net][easings.net]] so that color
changes appear smoother.

**** Clean Code

The theme being written in [[https://stylus-lang.com/][stylus-lang]] utilizing several [[https://github.com/Brettm12345/github-moonlight/blob/master/src/mixins.styl][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
- UI Font: [[https://rsms.me/inter/][Inter]]
- Code Font: [[https://www.jetbrains.com/lp/mono/][JetBrains Mono]]

*** Extensions

| Extension                                                                   | Description                                   |
|-----------------------------------------------------------------------------+-----------------------------------------------|
| [[https://github.com/EnixCoda/Gitako][Gitako]]                              | GitHub File tree                              |
| [[https://github.com/sindresorhus/hide-files-on-github][Hide Files]]        | Hides nonsensical files                       |
| [[https://github.com/sindresorhus/refined-github][Refined Github]]          | Adds a number of small enhancements to github |
| [[https://github.com/musically-ut/lovely-forks][Lovely Forks]]              | Displays notable forks on repo page           |
| [[https://github.com/dderevjanik/github-vscode-icons][github-vscode-icons]] | Adds vscode like icons to github              |
| [[https://github.com/OctoLinker/OctoLinker][OctoLinker]]                    | Links dependencies on github                  |

** Additional Screenshots
#+macro: screenshot #+HTML: <details><summary>$1</summary><img src="screenshots/$2.png" alt="$1" width="100%" /></details>

#+html: <details><summary>Repo</summary><img src="screenshots/repo.png" alt="Repo" width="100%" /></details>
#+html: <details><summary>Profile</summary><img src="screenshots/profile.png" alt="Profile" width="100%" /></details>
#+html: <details><summary>Code</summary><img src="screenshots/code.png" alt="Code" width="100%" /></details>
#+html: <details><summary>Commit Tree</summary><img src="screenshots/commits.png" alt="Commit Tree" width="100%" /></details>
#+html: <details><summary>Search</summary><img src="screenshots/search.png" alt="Search" width="100%" /></details>
#+html: <details><summary>Dashboard (with Refined GitHub)</summary><img src="screenshots/dashboard.png" alt="Dashboard (with Refined GitHub)" width="100%" /></details>
#+html: <details><summary>Dashboard</summary><img src="screenshots/dashboard-vanilla.png" alt="Dashboard" width="100%" /></details>
#+html: <details><summary>Pull Requests</summary><img src="screenshots/pull-requests.png" alt="Pull Requests" width="100%" /></details>
#+html: <details><summary>Pull Request Review</summary><img src="screenshots/pull-requests-review.png" alt="Pull Request Review" width="100%" /></details>
#+html: <details><summary>File Finder</summary><img src="screenshots/file-finder.png" alt="File Finder" width="100%" /></details>
#+html: <details><summary>Contribution Tree</summary><img src="screenshots/contributions.png" alt="Contribution Tree" width="100%" /></details>
#+html: <details><summary>Markdown</summary><img src="screenshots/markdown.png" alt="Markdown" width="100%" /></details>
#+html: <details><summary>Issues</summary><img src="screenshots/issues.png" alt="Issues" width="100%" /></details>
#+html: <details><summary>Diff</summary><img src="screenshots/diff.png" alt="Diff" width="100%" /></details>
#+html: <details><summary>Gist User</summary><img src="screenshots/gist-user.png" alt="Gist User" width="100%" /></details>
#+html: <details><summary>Gist File</summary><img src="screenshots/gist-file.png" alt="Gist File" width="100%" /></details>
#+html: <details><summary>Gist File Edit</summary><img src="screenshots/gist-file-edit.png" alt="Gist File Edit" width="100%" /></details>
#+html: <details><summary>Explore</summary><img src="screenshots/explore.png" alt="Explore" width="100%" /></details>
#+html: <details><summary>Api Docs</summary><img src="screenshots/api.png" alt="Api Docs" width="100%" /></details>
#+html: <details><summary>Actions</summary><img src="screenshots/actions.png" alt="Actions" width="100%" /></details>
#+html: <details><summary>File Editor</summary><img src="screenshots/file-editor.png" alt="File Editor" width="100%" /></details>
#+html: <details><summary>Projects</summary><img src="screenshots/projects.png" alt="Projects" width="100%" /></details>
#+html: <details><summary>Community</summary><img src="screenshots/community.png" alt="Community" width="100%" /></details>
#+html: <details><summary>GraphQL Explorer</summary><img src="screenshots/graphql.png" alt="GraphQL Explorer" width="100%" /></details>
** 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 [[https://discord.gg/n5meNsX][discord server]] for support/inquiries or just to chat.

** Contributions

Contributions are welcome! Please refer to the [[https://github.com/Brettm12345/github-moonlight/blob/master/.github/CONTRIBUTING.org][contribution guide]].