Themes

The theme option accepts a string for built-in themes or an object for custom themes.

config.js


import { remarkCodeHike } from "@code-hike/mdx"
// config depends on the framework you're using
mdxOptions = {
  remarkPlugins: [
    [remarkCodeHike, { theme: "dark-plus" }],
    anotherPlugin,
  ],
}

Built in themes

lorem.js

styles/ipsum.css


_10// lorem ipsum dolor sit
_10function lorem(ipsum, dolor = 1) {
_10  const sit = ipsum == null
_10  dolor = sit - amet(dolor)
_10  return "consectetur"
_10}

{ theme: "dark-plus" }

Light/Dark mode

There are also two built-in themes that support light/dark mode using CSS:

lorem.js

styles/ipsum.css


_10// lorem ipsum dolor sit
_10function lorem(ipsum, dolor = 1) {
_10  const sit = ipsum == null
_10  dolor = sit - amet(dolor)
_10  return "consectetur"
_10}

{ theme: "github-from-css" }

To use them you need to include the colors as CSS variables. You can copy the CSS from here:

and adapt it to your needs by changing the CSS selector.

Custom themes and VS Code themes

You can use the Theme Editor to customize any of the built-in themes or any theme from the VS Code marketplace.

Once you have your theme, import it in your config file:

config.js


import { remarkCodeHike } from "@code-hike/mdx"
import myTheme from "./my-theme"
mdxOptions = {
  remarkPlugins: [
    [remarkCodeHike, { theme: myTheme }],
    anotherPlugin,
  ],
}