Is there a way to default to dark mode?

[lukasnxyz]

Is there a way to default to dark mode? Preferably a setting to place into hugo.toml?

[lukasnxyz]

As a temporary solution I've commented out @media (prefers-color-scheme: dark) { in `layouts/partials/style.html' on line 129.

[janraasch]

Hi @systemb4, thank you for getting in touch. It's nice to meet you 🧤.

There's no such configuration option. Your solution is definitely an OK way to go. Here's another way you could go if you so choose:

If you'd rather not edit the theme's files, but keep your changes local to your own hugo base directory, you could

• copy & paste the contents of the @media (prefers-color-scheme: dark) { ... }-directive
• into a custom_head.html-file located at layouts/partials/custom_head.html in your site's base directory.

The file should look something like this:

<style>
    body {
      background-color: #333;
      color: #ddd;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong,
    b {
      color: #eee;
    }

    a {
      color: #8cc2dd;
    }

    code {
      background-color: #777;
    }

    pre code {
      color: #ddd;
    }

    blockquote {
      color: #ccc;
    }

    textarea,
    input {
      background-color: #252525;
      color: #ddd;
    }

    .helptext {
      color: #aaa;
    }
</style>

This file will be picked up by the theme. Here's the respective section on the README.

I hope that helps 🤓.

Kind regards to Austria 🇦🇹👋,
Jan

PS:

💡 Just from the top of my head: I think in the future we might move to css variables and have separate partials for root- and dark mode-variables. With that people could simply overwrite those partials in their local layouts-folder and set their own color variables.

[lukasnxyz]

Hey @janraasch!

Thanks for the quick response! I've used your solution as it makes a bit more sense from a deployment perspective.

Kind regards,
Lukas