Styling your docs your way

This project is very simply the mintlify starter kit but with a custom style.css added to it. The idea behind this demonstration is that you can tweak the colors, borders, radii and more in theme/tokens.css.

:root {
    --ot-bg: #faf3e0;
    --ot-fg: #36251e;

Adjust these colors above to change background and foreground colors simply, to invert them simply change the following in theme/tokens.css

html.dark {
   --ot-bg: #36251e;
   --ot-fg: #faf3e0;

To adjust radius borders for consistent styling, just change the following three variables:

    --ot-radius-xs: 15px;
    --ot-radius-sm: 15px;
    --ot-radius-md: 15px;

All done! Here are some examples below that only require changing the color schemes and radii. You are also able to fully customise indiviudal selectors on a case-by-case basis without manually looking for each div yourself.

For a quick writeup please reference this blog here: https://www.opentools.page/blog/open-mintlify

Images

Mobile · Light Desktop · Dark (Blue) Desktop · Dark (Brown)