dark-gitlab icon indicating copy to clipboard operation
dark-gitlab copied to clipboard

Very customizable dark theme for GitLab and self-hosted GitLab instances. Mirror of gitlab.com/vednoc/dark-gitlab

#+STARTUP: nofold #+HTML:

  • Dark-GitLab Opinionated, customizable, dark and light mode implementation for [[https://gitlab.com][GitLab]] and self-hosted GitLab instances.

Check [[https://gitlab.com/vednoc/dark-gitlab/-/milestones/1][dark-gitlab/milestones/1]] to see the roadmap to =v1.0=.

[[https://gitlab.com/vednoc/dark-gitlab/-/starrers][https://img.shields.io/badge/dynamic/json?color=orange&label=Stars&query=%24.star_count&url=https%3A%2F%2Fgitlab.com%2Fapi%2Fv4%2Fprojects%2F7904989]]

[[https://gitlab.com/vednoc/dark-gitlab/-/forks][https://img.shields.io/badge/dynamic/json?color=blue&label=Forks&query=%24.forks_count&url=https%3A%2F%2Fgitlab.com%2Fapi%2Fv4%2Fprojects%2F7904989]]

[[https://gitlab.com/vednoc/dark-gitlab/raw/master/gitlab.user.styl][https://img.shields.io/badge/Install%20directly%20with-Stylus-116b59.svg?longCache=true&style=flat]] [[https://discord.gg/NpT8PzA][https://img.shields.io/discord/272011641694978048.svg?longCache=true&colorB=7289da&logo=discord&style=flat]]

#+HTML:

/Preview image shows v1.0.0 with default colors, Inter as the UI font, and Iosevka as the mono font on 1920x1080 resolution./

#+HTML:

** Features This is why you should consider using Dark-GitLab!

  • Fully customizable color-scheme through Stylus configuration menu
    • Supports dark and light color-schemes, and works great with [[https://gitlab.com/vednoc/dark-switcher/][dark-switcher]].
  • Custom regex and included support for well-known public GitLab instances
    • Easy to add your private GitLab instance.
      • ⚠ Modifying the code will prevent auto-update from working.
      • See [[https://gitlab.com/vednoc/dark-gitlab/issues/99#note_265480670][#99]] for more info.
    • Found a public instance that's not already on the list? Make a MR!
  • Custom image opacity in Markdown areas
  • Custom rounded corners for avatars
  • Custom UI/code/emoji fonts

** Installation There are a few ways to install this userstyle.

*** With Stylus The recommended method; allows for full customization of custom features.

  1. Install [[https://add0n.com/stylus.html][Stylus]]
  2. Click on the install link or install badge. #+begin_quote Installs from =gitlab.user.styl= file using [[https://gitlab.com/vednoc/dark-gitlab/raw/master/gitlab.user.styl][this link]]. #+end_quote [[https://gitlab.com/vednoc/dark-gitlab/raw/master/gitlab.user.styl][https://img.shields.io/badge/Install%20directly%20with-Stylus-116b59.svg?longCache=true&style=flat]]
  3. Confirm the installation
  4. Continue to /Initial configuration/

*** With /xStyle/, /Cascadia/, etc This is for userstyle managers that don't support stylus-lang. It doesn't offer the customizability that the recommended method offers.

  1. Install your userstyle manager of choice
  2. Click on the install link #+begin_quote Installs from =gitlab.user.css= file using [[https://gitlab.com/vednoc/dark-gitlab/raw/master/gitlab.user.css][this link]]. #+end_quote
  3. Confirm the installation
  4. Continue to /Initial configuration/

*** With /Stylish/ through /[[https://userstyles.org/styles/164877][userstyles.org]]/ (USo) I don't recommended using this method because of the following reasons:

  1. Stylish is spyware and USo is abandoned by the same developers
  2. Only supported due to it being the largest repository of userstyles
  3. Updated manually, is very likely outdated, and only has core functionality.

** Initial configuration This step is mandatory if you want to tune settings to your liking, or if you've changed GitLab's default preferences.

Dark-GitLab works best with /default/ settings as it tries to offer seamless experience across all GitLab instances that you might stumble upon on the web.

The following [[https://gitlab.com/profile/preferences][preferences]] need to be set on instances you're logged in:

  1. Set syntax highlighting theme set to =white=
  2. Set navigation theme to =indigo=

To customize colors and/or other features, follow these instructions:

  • Click on Stylus icon on your toolbar then on the configure button (gear icon) and you'll be able to configure everything from within the popup. Same menu can be opened from the /Manage/ page in Stylus.
  • Additionally, install [[https://gitlab.com/vednoc/dark-switcher/][dark-switcher]] if you'd like to quickly switch between various pre-defined color-schemes.

** FAQ This section covers frequently asked questions.

*** Why are there so many warnings and/or errors? The linter that Stylus is using doesn't understand [[https://stylus-lang.com][Stylus-lang]] syntax. Disable the linter and all warnings will be gone. More info can be found here: [[https://github.com/openstyles/stylus/issues/880][GitHub/openstyles/stylus/880]]

*** How to add custom domains? Click on Stylus icon on your toolbar then on the edit button (pen icon) to open it in the editor. When you get there, simply press on the =+= button to add a new domain.

  • ⚠ Modifying the code will prevent auto-update from working.
  • See [[https://gitlab.com/vednoc/dark-gitlab/issues/99#note_265480670][#99]] for more info.

*** How to exclude a domain? Click on Stylus icon on your toolbar then on the action menu button (three dots icon) and choose domain/URL exclusion you want to use.

*** How to customize colors and/or other options? Click on Stylus icon on your toolbar then on the configure button (gear icon) and you'll be able to configure everything from within the popup. Same menu can also be accessed from the /Manage/ page in Stylus.

** Contributing Any contribution is greatly appreciated.

If you really like this project and would like to tip me for my work, then you can:

  • Buy me a coffee over at [[https://ko-fi.com/vednoc][ko-fi]]
  • Support me over at [[https://liberapay.com/vednoc][LiberaPay]]

** License Code released under the [[license][MIT]] license.