This post describes how to enable dark mode and modify the dark theme colors for a basic Jekyll build site.

To switch to dark mode by turning on dark mode in the OS, you can create and adjust the custom.scss in ./_sass directory.

For example, to set dark background color and white text in dark mode and adjust the syntax highlighting your code:

@media (prefers-color-scheme: dark) {
    body {
      background-color: #1c1b1f;
    }

    p, h1, h2, h3 {
        color: white;
    }
    
    // for syntax highlighting your code in dark mode:
    pre,
    code {
        color: #e3fae3;
        border: none;
        background-color: rgb(0, 0, 0);
    }

    .highlight {
        .highlighter-rouge & {
            color: #00FF00;
            border: none;
            background-color: black;
        }
    } 
}

Then, import the styles in main.scss in the ./assets/ directory:

---
---

@import "minima";
@import "custom";