Theming

marimo provides basic support for theming. You can include a custom CSS file in your notebook that will be applied to the entire notebook. This allows you to customize the appearance of your notebook to your liking.

To include a custom CSS file, in the configuration dropdown, add the relative file path to your CSS file in the Custom CSS field. Once saved, you should see the changes applied to your notebook:

app = marimo.App(css_file="custom.css")

CSS Variables

We support only a few CSS variables as part of the “public API” for theming. These are:

--marimo-monospace-font
--marimo-text-font
--marimo-heading-font

Other CSS Variables

We cannot guarantee that other CSS variables or classnames will be stable across versions.

Example

Here is an example of a custom CSS file that changes the font of the notebook:

/* Load Inter from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --marimo-heading-font: 'Inter', sans-serif;
}

/* Increase paragraph font size and change color */
.paragraph {
  font-size: 1.2rem;
  color: light-dark(navy, pink);
}

More customizations

We want to hear from you! If you have any suggestions for more theming options, please let us know on GitHub