Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metaboulie/marimo-themes
A library of themes for marimo notebook.
https://github.com/metaboulie/marimo-themes
Last synced: about 1 month ago
JSON representation
A library of themes for marimo notebook.
- Host: GitHub
- URL: https://github.com/metaboulie/marimo-themes
- Owner: metaboulie
- License: apache-2.0
- Created: 2024-10-28T13:39:12.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-06T14:12:52.000Z (about 1 month ago)
- Last Synced: 2024-11-06T15:25:34.832Z (about 1 month ago)
- Language: CSS
- Size: 2.91 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-marimo - motheme - Install custom themes for the marimo editor. (Libraries / Deployment Templates)
README
# Marimo Custom Themes
> personalize your experience with
> [marimo](https://github.com/marimo-team/marimo)
## Theme Gallery
### coldme
### nord
### mininini
### wigwam
## Get Started
```bash
pip install motheme
# Initialize themes
motheme update
# List available themes
motheme themes
# Apply a theme to specific files
motheme apply coldme notebook1.py notebook2.py
# Apply theme recursively
motheme apply -r coldme ./
```
## Notice
Please note that some parts of the Marimo notebook are not fully exposed for
customization at this time. This includes background colors of side panels,
cell editors, and the menu. These features may be exposed in a later version of
Marimo, allowing for more extensive theme customization.
## Usage
- **Requirements**: Ensure you are using Marimo version **0.9.14** or higher.
It is recommended to keep your Marimo version up-to-date for the best
experience.
- **Navigating Themes**: Go to the `themes` folder to preview the themes
using the provided screenshots. You can directly download the CSS files and
place them in a suitable path in your project. To include a custom CSS file
inside a notebook, go to the configuration dropdown and 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.
- **Light and Dark Mode Support**: All themes support both light and dark
modes and will switch automatically based on your notebook's current theme
settings.
## Contributing
To contribute your own themes, please follow these guidelines:
- **Refer to Default Arguments**: All available arguments are listed in
[`default.css`](themes/default/default.css), which serves as a reference
for writing your themes. You can experiment with other arguments, but
please note that stability cannot be guaranteed with untested changes.
- **Light and Dark Themes**: Implement both light and dark themes using the
light-dark syntax as demonstrated in `default.css`. If you choose not to
implement a theme for a specific mode, name your theme as `xxx_light` or
`xxx_dark` and use the default values for the respective mode from
`default.css`.
- **Folder Structure**: After finishing your CSS file, create a new folder
inside `themes` with the name of your theme. Within this folder, upload the
following:
- The CSS file
- Preview images
- An optional `README.md` file to illustrate your design
- **Design Using Sample**: You can design your theme using the
[`sample.py`](sample.py) file provided in the repository. This file helps
visualize how your theme will look in the Marimo notebook.
## Roadmap
- [ ] implement this repo as a CLI tool
- [ ] improve the sample notebook
- [ ] write a program to automatically take a screenshot of the sample
notebook with the given css file
- [ ] write a notebook to control different parameters and visualize the
effects directly in it