Theming

Simple theming, just update globals.css file

We have a globals.css file in the src/styles/globals.css folder. You can update the color of the code block by updating the globals.css file for light and/or dark modes. In :root section you could update colors for light mode, and in .dark section - for dark mode.

Configure codeblock color theme

1. Open contentlayer.config.js in root folder. 2. Find rehypePrettyCode settings and update themes for light and dark modes.

{
  [
    rehypePrettyCode,
    {
      theme: {
        light: "github-light",
        dark: "github-dark-dimmed",
      },
      keepBackground: false,
    },
  ];
}

2. Update theme section

enum LogLevel {
  ERROR,
  WARN,
  INFO,
  DEBUG,
}

Modify codeblock colors

Code theme background color

In DoFastDocs we use custom codeblock background color. And we disabled keepBackground: false value in contentlayer.config.js file for rehypePrettyCode. If you want to use native theme background color, just revert it to true.

Custom code background color

In globals.css file you could update colors for codeblock background for light and dark modes. Update line --codeblock: #fcfcfd; with your custom color.

Custom code line highlight color

To modify code line highlight color, update the next code block with your colors for light and dark modes.

[data-highlighted-line] {
  background: rgba(39, 152, 205, 0.06);
}

Custom code line number color

Update color in line color: hsl(var(--ring)); for css group code[data-line-numbers] > [data-line]::before.

code[data-line-numbers] > [data-line]::before {
  counter-increment: line;
  content: counter(line);
 
  /* Other styling */
  display: inline-block;
  width: 1rem;
  margin-right: 2rem;
  text-align: right;
  color: hsl(var(--ring));
}