Allow manual switch of dark/light mode

[JCQuintas]

First I would like to say this is a great idea! :)

Now to the matter at hand, prefers-color-scheme: dark is all the hot fuss, but I would like to allow my users to override that if they want, so I have a switch to select the themes.

Is there an easy way to switch themes like that? Be it a css variable or a className?

[andrewbranch]

There are ways you can do it, like using replaceColor, but I’m considering adding a one-liner config option to help with this.

[JCQuintas]

This option could be implemented like this:

  colorTheme: {
    defaultTheme: 'Solarized Light',
    darkTheme: 'Monokai Dimmed',
    lightTheme: 'Quiet Light',
    detectionMethod: 'prefers-color-scheme' | 'classname/manual',
    classNames: {
      dark: 'gatsby-remark-vscode-dark',
      light: 'gatsby-remark-vscode-light',
    }
  }

So one could manually add .gatsby-remark-vscode-dark to the page/container and it would get picked by the css?

[andrewbranch]

More or less, except

1. you should be able to use both prefer-scolor-scheme and a class name
2. I’d rather use a general CSS selector than a class name specifically.

[codepunkt]

I'm also looking into this - i'm not sure if we would have to generate styles for both the media query and an additional selector. Most manual toggles that i've seen read their initial value from the media query, but then store it somewhere else, so i'd prefer to have an option to generate something like this:

.dark-mode .pd--ayu-mirage {
  background-color: #1f2430;
  color: #cbccc6;
}
.dark-mode .pd--ayu-mirage .mtk1 {
  color: #CBCCC6;
}

instead of this:

@media (prefers-color-scheme: dark) {
  .pd--ayu-mirage {
    background-color: #1f2430;
    color: #cbccc6;
  }
  .pd--ayu-mirage .mtk1 {
    color: #CBCCC6;
  }
}