Theming

[TobiasEnergyMachines]

Description

It would be great if it was possible to customize theming for marimo apps. This would include background colour, global font settings, etc.

Suggested solution

A similar approach can be seen here: https://docs.streamlit.io/library/advanced-features/theming

An alternative approach could be to enable direct modification of the css properties.

Alternative

No response

Additional context

No response

[mscolnick]

For anyone that comes to this issue, please list of the things you would like themed. Let me know if i am missing anything:

primaryBackgroundColor: (light, dark)
primaryForegroundColor: (light, dark)

accentBackgroundColor: (light, dark)
accentForegroundColor: (light, dark)

backgroundColor: (light, dark)
foregroundColor: (light, dark)

font
fontSize
headingFont
headingFontSize

favicon

[TobiasEnergyMachines]

Sounds great!

I would also add:

• Coloring for headings and text in general
• Accordion heading and text styling with color, font-family and font-size
• Tabs styling with color, font-family and font-size
• More color options than (light, dark) for backgrounds

[maphew]

Yeah, the heading formatting is so subdued they're not headings at all. I'm getting pushback from my teammate, an experienced Jupyter user, because the out of box experience visually is meh.

[dmadisetti]

Direct HTML should be stylable in output, but markdown output looks very different from what you posted:

That being said, I wouldn't mind a san-serif styling. I wonder if there are any themes that marimo could directly hook into, to take the burden of trying to support theming directly. Maybe something like this? https://github.com/mkdocs/catalog

[maphew]

Ah yes, markdown defaults are better. Weird that html with no inline style is so different. Unfortunately md can't use f-strings.

Sooo, back to the main thread: how to get at the styles without forcing inline css styling?

(love your "Cariboos" btw! we should use that.)

[akshayka]

Ah yes, markdown defaults are better. Weird that html with no inline style is so different. Unfortunately md can't use f-strings

@maphew , markdown can indeed use f-strings -- use mo.md directly for that. There are many examples of using f-strings with marimo in our documentation and built-in tutorials (marimo tutorial markdown): https://docs.marimo.io/guides/outputs.html#markdown

You can toggle a "markdown" cell to the underlying Python by clicking on the Python button in the top-right of the cell area. After that, you can manually insert an f. We started with the markdown editor using mo.md(f"..."), but there were too many edge cases to get that right.

I am open to having a dropdown on the markdown editor that lets you choose whether a markdown cell is a regular Python string or an f-string.

EDIT: Link to additional documentation showing how to toggle the markdown editor on/off:

https://docs.marimo.io/guides/outputs.html#markdown-editor

[maphew]

Ah yes, markdown defaults are better. Weird that html with no inline style is so different. Unfortunately md can't use f-strings

@maphew , markdown can indeed use f-strings -- use mo.md directly for that. ...

Ah, thanks! I'm happy to be corrected and sorry for the noise for what is evident if I'd read more widely.

A drop down or toggle to switch between mo.md(r'''...''') and mo.md(f'''...''') sounds like a good idea. For now using ctrl-shift-m twice in a row is convenient enough -- with the caveat that this is a oneway gate.

[maphew]

I've hidden my parts of the sub-thread on how to use f-strings in markdown as off-topic, to keep focus on the main idea: how to get at and modify the stylesheets.

[mscolnick]

You can now provide a custom.css file to be injected into your notebook. This does style the notebook as well as the marimo editor.

https://docs.marimo.io/guides/theming.html

We will be providing more "theme-able tokens" over time. But today you can:

• import fonts from, for example from https://fonts.google.com/
• override different font families
• override html tags (h1, h2, paragraph, etc)

[Haleshot]

For anyone revisiting this, a repo created by a contributor - https://github.com/metaboulie/marimo-themes helps in various customizations. Also included in the docs - https://docs.marimo.io/guides/configuration/theming/?h=them#custom-html-head.

Just seeing if the issue can be closed if the above references are relevant.