marimo-team / marimo

A reactive notebook for Python — run reproducible experiments, execute as a script, deploy as an app, and version with git.
https://marimo.io
Apache License 2.0
7.75k stars 274 forks source link

Theming #989

Open TobiasEnergyMachines opened 7 months ago

TobiasEnergyMachines commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

Sounds great!

I would also add:

maphew commented 3 months ago

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.

image

image

dmadisetti commented 3 months ago

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

image

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 commented 3 months ago

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

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 2 months ago

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: