feat: custom css

[mscolnick]

Closes #2063
Partly addresses #989

This adds an app config option to point to a custom.css file.

The filepath can be configured in the marimo editor. The file itself can be edited in marimo or your own editor.

---

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

:class: warning

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);
}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
marimo-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 27, 2024 3:28pm
marimo-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 27, 2024 3:28pm

[akshayka]

Awesome! Just one small comment then LGTM

[github-actions]

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.8.4-dev13