使用相当于 Github Pages 默认主题的暗模式？

Question

我正在使用 GitHub 页面制作一个网站。
我不太喜欢任何提供的 Jekyll 主题，所以我只是决定坚持使用首次创建网站时出现的默认主题。

默认主题呈现 Markdown 文件，就像在 GitHub 中一样。然而，它使用的颜色始终与 Github 的浅色主题相对应。
我可以更改它以匹配深色主题配色方案吗？

Answer 1

默认 Jekyll 模板是

minima

，它带有 4 个

skins

。
如果你看 @templates source，style.scss 使用变量导入皮肤，默认为

classic

，它很轻。

将其更改为深色的一种方法是在 _config.yml 中添加相应的设置

但是现在的浏览器支持媒体查询，让您可以根据用户喜欢的深色或浅色主题进行操作。

以下是如何使用最小模板修改 Jekyll 站点以响应用户主题偏好

Answer 2

我不太喜欢任何提供的 Jekyll 主题，所以我只是决定坚持使用首次创建网站时出现的默认主题。

但是，使用和修改与默认主题不同的主题对于您的情况会很有用。

例如2016年的“

Jekyll Dark Clean主题”。

但即使使用默认主题，您也可以配置主题以使其适应您需要的确切深色阴影：您将在

StylishThemes/GitHub-Dark

中找到大量示例。

Answer 3

我能够使用

github-markdown-css 进入球场。请参阅 https://ggorlen.github.io/resources/ 进行演示。

下面的代码应作为

assets/css/style.scss

 添加到您的存储库中。

---
---

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

@import "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.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;
  }
}

如果你想坚持更新的 GH 风格，那么你应该能够将这里的 5.5.1 版本升级到 github-markdown-css 的当前版本，因为这个答案已经发布了。

注释表示浅色和深色背景颜色，它们是从 github-markdown.css 中的变量手动复制的。

.markdown-body

 和 

.markdown-body

 媒体是从 github-markdown 的自述文件中复制的。所有这些都可能会发生变化，并且可以随着 github-markdown 的发展而更新。

这种方法最大的问题是语法高亮不起作用。我确信有一个解决方法是可能的，但我没有时间对此大惊小怪。如果我弄清楚了，我会更新，如果你这样做了，请随时添加评论或答案。