macOS Mojave's Dark Mode for Jekyll default theme minima

We now supports macOS Mojave’s Dark Mode.

If you are using latest macOS. Set your system appearance in Dark. You should see our site looks like this in Safari:

How it works

@media (prefers-color-scheme: light) {
  // css code for light mode
}
@media (prefers-color-scheme: dark) {
  // css code for dark mode
}

Try it with yourself

Open this example site of Jekyll with macOS Safari.

Press option+command+I to open Web Inspector. Navigate to Resources -> All Resources -> minima -> style.css. Copy and paste the following code below body {} section:

(or copy the whole style.css of our site if you want a better look)

@media (prefers-color-scheme: dark) {
  body {
    font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #c8e1ff;
    background-color: #1b1f23;
    -webkit-text-size-adjust: 100%;
    -webkit-font-feature-settings: "kern" 1;
    -moz-font-feature-settings: "kern" 1;
    -o-font-feature-settings: "kern" 1;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
}

You should see website changes when you change macOS Apperance.

You might gonna like this app: Gray.

Add macOS Dark Mode support to your own Jekyll site

My modified minima is available on GitHub. (link here)

Use specific_install to install gem straight from git.

gem install specific_install
gem specific_install https://github.com/HackingGate/minima.git mojave

Modify _config.yml in your site root directory:

minima:
  mojave-dark-mode: enable

Preview with bundle exec jekyll serve command.

Enjoy it!