Use dark mode equivalent of Github Pages default theme?

Question

I am making a site using GitHub pages.
I am not very fond of any of the provided Jekyll themes, so I am just deciding to stick with the default theme that appears when the site is first created.

The default theme renders the Markdown files as it would in GitHub. However, the colors it uses always corresponds with the light theme of Github.
Can I change this to match the dark theme color scheme?

Misvalue

It is 2023, and there is still no way to use the dark mode in the default gitpages theme :/ – Rhododendron

Here's a first attempt. It doesn't syntax highlight yet, so if I get a complete working version I'll post an answer. – Varus

@Varus Thank you for posting that comment. I used your scss file and it works nicely. As far as I've been able to find, it's the only solution to this problem. IMHO it would be worth posting as an answer even without syntax highlighting; after all, not every README file has content that needs syntax highlighting. – Dialyser

@SaqibAli looks like there is by using the latest version of minima (v3). I'll write up an answer below because this was the top hit when I searched "which github pages theme supports dark mode?" – Calamander

Answer 1

Default Jekyll template is minima and it comes with 4 skins.
If you will look @ templates source the style.scss imports a skin using a variable and defaults to classic which is light.

One way to change it to dark would be to add a corresponding setting in _config.yml

But browsers this day support media queries which let you act on users preferred theme dark or light.

Here is how you can modify Jekyll site with minima template to respond to users theme preference

Eberto

isn't default theme primer ? – Folliculin

Answer 2

I was able to get in the ballpark using github-markdown-css. See https://ggorlen.github.io/resources/ for a demo.

The code below should be added to your repo as assets/css/style.scss.

---
---

/* @import "{{ site.theme }}";  this is the default */

@import "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.6.1/github-markdown.min.css";

body {
  margin: 0;
}

@media (prefers-color-scheme: light) {
  body {
    /*
    --color-canvas-default, copied from 
    https://github.com/sindresorhus/github-markdown-css/blob/main/github-markdown.css
    */
    background-color: #ffffff;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    /* --color-canvas-default */
    background-color: #0d1117;
  }
}

.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
}

@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}

You should be able to bump the 5.6.1 version here to whatever github-markdown-css's current version is if you want to adhere to a newer GH style since this answer was posted.

The comments denote light and dark background colors, which were copied by hand from a variable in github-markdown.css. .markdown-body and the .markdown-body media query were were copied from github-markdown's readme. All of these are subject to change and can be updated as github-markdown evolves.

The biggest problem with this approach is that code syntax highlighting doesn't work. I'm sure a workaround is possible, but I didn't have time to fuss with it beyond this. I'll update if I figure it out, and feel free to add a comment or answer if you do.

Varus

Answer 3

Quick disclaimer, I'm brand new to github pages, jekyll, minima, the whole thing. I just didn't want my page to be ALWAYS light-mode, and frankly think everything should be polite enough to switch with the system mode setting of the device you're using - thankfully is IS possible without too much fuss.

TL;DR:

You can set the Minima theme to a dark skin (or one that adapts to the system setting). This is not supported by the version of the minima theme (2.5.1) used on github-pages currently but is available in the (as yet - 2024) unreleased minima 3.

# In _config.yml
# theme: minima
remote_theme: jekyll/minima
plugins:
  - jekyll-remote-theme
minima:
  skin: dark # or auto if you want it to switch with your system settings.

<!-- in 404.html -->
---
permalink: /404.html
layout: base 
---
<!-- Rest of the file here -->

I have to confess I found the github instruction pages a bit like a 'choose-your-own-adventure' book where you could go down a wrong path and then just end up confused. I've tried to explain a little of the steps I ended up following below.

So, starting with a brand new github personal page in a repo:

• Following github's instructions for creating a jekyll site - install jekyll, bundler, ruby, etc.
• Run create an empty site in the local repo dir.

jekyll new --skip-bundle .

• Edit the Gemfile to use the github-pages gem version. (Whatever that means, it's currently 231).

# gem "jekyll", "~> 4.3.3"
gem "github-pages", "~> 231", group: :jekyll_plugins

• Run bundle install... fix some errors of some things not being installed (bundle add webrick and bundle add unf were necessary for me).

bundle add unf
bundle add webrick
bundle install

• Once that's all working without errors you could push this to your github-pages repo or try to run it locally to see changes live with bundle exec jekyll serve.

bundle exec jekyll serve

Okay, now that that's working, let's do the thing you were asking in the question:

• Edit the _config.yml to comment out the local theme

# theme: minima

• Edit the _config.yml to add a remote theme

remote_theme: jekyll/minima

plugins:
  # whatever else was already here...
  - jekyll-remote-theme

• Edit the _config.yml to configure minima's settings

minima:
  skin: auto # if you want it to switch with your system settings.

• Update the default 404.html file because minima 3 changed 'default' to 'base'

<!-- 404.html -->
---
permalink: /404.html
layout: base 
---
<!-- Rest of the file here -->

References:

• Improve documentation for config options #760 - I found this the most helpful while figuring this out.
• How to change minima skin and Skins does not work - made it clear that the old version (2.5.1) of minima used by github-pages was the problem.
• minima 3 changed 'default' to 'base' - I happened to catch the name change, which helped later when I saw the error during a local build.
• Minima skins available in v3 - this explains what you can use now that you're pulling the latest minima.

Calamander

Answer 4

I am not very fond of any of the provided Jekyll themes, so I am just deciding to stick with the default theme that appears when the site is first created.

Yet, using and modifying a different theme than the default one would be useful in your case.

For instance, the 2016 "Jekyll Dark Clean Theme".

But even with the default theme, you can configure a theme in order to adapt it to the exact shade of dark you need: You will find numerous examples in StylishThemes/GitHub-Dark.

Similar

The "GitHub-Dark" theme you provide is exactly what I wanted. How would I go about implementing it into my GitHub Pages? – Misvalue

@EricXue What static site generator are you using? Jekyll itself? Or Hugo? 11ty? ...? – Similar

Static site generator? All I did was create my github pages repository, made a readme markdown file and a few other markdown files for the content. I didn't configure anything other than making some pages. – Misvalue

@EricXue OK. It is easier when you are using a generator, because its engine will manage themes for you. For instance Jekyll: jekyllrb.com. – Similar