What is the best way to customize the colors of an existing theme?

[hakib]

Is it possible to change the colors of an existing theme? For example, the build-in gaia theme.

I managed to create my own theme and override colors here and there, but that's very tedious to catch all the places a color is being used. For example, the background-color of an invert slide is the same color as the background of a pre block, a th element etc.

Is there a way to customize an existing theme via SCSS or CSS variables?

Thanks.

[yhatt]

Marp built-in themes are made by Sass and some themes are using mixin-based color scheme definition.
https://github.com/marp-team/marp-core/tree/master/themes

You can make custom theme CSS based on the original Sass source if you don't like the our approach for customization using @import "base-theme".

I know it is not the best way to customize. The extra built-in themes that is going to make in future will take CSS variables instead of Sass mixin and Sass variables for easy customization by user. Of course I want to replace current built-in themes to use CSS variables if a new theme was working well.

[hakib]

Thanks @yhatt,

I think CSS variables would have been easiest, at least in my case.

I have a fair knowledge of both CSS and SCSS and I was unable to find a way to easily customize the colors. I eventually created my own CSS file, as the docs suggest, imported the gaia theme, and manually went over all the elements I wanted to customize and changes their colors (for example, .invert backgound-color, th and so on...).

I would like to point out I had a great experience with marp, and I'll use it again in the future for simple presentations. Keep up the good job!

[yhatt]

I've created marp-team/marp-core#209 for migrating from Sass variables to CSS variables. Please track if you have interested 😄

[yhatt]

UPDATED

Since Marp Core v2.0.0, Gaia theme and Uncover theme can customize color through inline style with CSS variables.
marp-team/marp-core#221