Themes
The theme
option accepts a string
for built-in themes or an object
for custom themes.
import { remarkCodeHike } from "@code-hike/mdx"
// config depends on the framework you're using
[remarkCodeHike, { theme: "dark-plus" }],
Built in themes
_10// lorem ipsum dolor sit
_10function lorem(ipsum, dolor = 1) {
_10 const sit = ipsum == null
_10 dolor = sit - amet(dolor)
{ theme: "dark-plus" }
Light/Dark mode
There are also two built-in themes that support light/dark mode using CSS:
|
_10// lorem ipsum dolor sit
_10function lorem(ipsum, dolor = 1) {
_10 const sit = ipsum == null
_10 dolor = sit - amet(dolor)
{ 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:
import { remarkCodeHike } from "@code-hike/mdx"
import myTheme from "./my-theme"
[remarkCodeHike, { theme: myTheme }],