Customize Jekyll remote theme for GitHub Pages

Question

I'm new to using Jekyll theme for GitHub page. I was able to successfully customize a local theme following Customizing your Jekyll theme's CSS but I couldn't find any documentation about what to do if the theme is remote.

Here is what I tried. First, I started with a clean GitHub page and followed step 4 in Adding a Jekyll theme in your site's _config.yml file to opt-in my theme that's forked from GitHub's default theme

_config.yml:

     github: [metadata]
     encoding: UTF-8
     kramdown:
         input: GFM
         hard_wrap: false
     future: true
     jailed: false
-     theme: jekyll-theme-primer
+     remote_theme: chuanqisun/primer
     gfm_quirks: paragraph_end

At this point, everything just works out-of-the-box. But when I add

---
---

@import "{{ site.theme }}";

in /assets/css/style.scss, GitHub Page complaints that site.theme doesn't exist. So I also tried

---
---

@import "{{ site.remote_theme }}";

but the import still failed.

Does anyone know if it is possible to customize a remote theme? I know that I can just make customization in my forked repository but some customization are specific to one site and I want to store that in my site's repo. This way I can share the theme with multiple sites without enforcing one site's customization to the rest of the sites. Thanks!

Nydia

what is the name of the file you're trying to import here..? – Ecumenicism

I'm not entirely sure I understood the build process. I believe I'm trying to import the style.scss in the remote repo – Nydia

Aha! thanks for the pointer, I think I might have understood the problem. {{site.theme}} is just "jekyll-theme-primer". It might work if I explicitly say @import "jekyll-theme-primer"! I'll give that a try. – Nydia

Answer 1

For anyone in a similar situation, here is what worked for me, using the Minimal mistakes theme as a remote theme.

It has no assets/css/style.scss, but an assets/css/main.scss that then imports all the partial files under _sass. Trying to import main or empty brackets as the official docs suggest, doesn't work. The way to go is to copy the main theme's file and then customize it.

So in this case I created a local copy of assets/css/main.scss and appended the desired css changes. That was enough. If a theme doesn't have one central file tying everything together, you might need to copy more files, but that's it.

Cathe