How can I use @import-theme？

[hnsol]

Thank you creating great tool ! I love to using Marp so much !!!

Please help me:

• I want to use @import-theme
• want to modify some colors in 'gaia.scss' (ex: $color-light: #fff8e1)
• using Marp for VS Code

what I did...

• on VS Code setting, Markdown > Marp: Themes => './marp-themes/gaia_custom_test.css'
• write gaia_custom_test.css file as below, following @import-theme rule - Marpit document
• make test.md file as below

gaia_custom_test.css

/* @theme gaia_custom_test */

$color-light: #ff8800; // vivid orange

@import-theme 'gaia';

test.md

---
marp: true
theme: gaia_custom_test
---
# test slide

It seems $color-light doesn't work.

other trials 1

gaia_custom_test.css

/* @theme gaia_custom_test */

@import-theme 'gaia';

section {
    background-color: #ff8800;
}

It looks work, however I understand this is using 'gaia.css' , same as to describe @theme 'gaia'.

other trials 2

gaia_custom_test.css

/* @theme gaia_custom_test */

@import-theme url("https://raw.githubusercontent.com/marp-team/marp-core/master/themes/gaia.scss");

 or
@import-theme 'https://raw.githubusercontent.com/marp-team/marp-core/master/themes/gaia.scss';

getting worse...

other trials 3

• download gaia.scss
• edit file and name it like 'gaia_custom_test.scss'
• compile to 'gaia_custom_test.css', using $ sass command
• setup Markdown > Marp: Themes at VS Code

It works fine, but I think this is not a sustainable way.

please...

It seems I misunderstand something. Please give me suggestions 🙏

versions

Marp for VS Code 0.17.0
VS Code 1.53.0, commit: 8490d3dde47c57ba65ec40dd192d014fd2113496
macOS BigSur 11.1

[yhatt]

First, @import-theme is almost meaning same as @import and it has no special differences, as you've seen in "other trials 1".

Probably you have to learn about what all Sass variables will be lost in compiled CSS. Marp does never recognize any Sass variables such as $color-light because Marp theme system (e.g. using @import) is working on the pure CSS. Marp built-in themes are using compiled CSS from Sass.

Thus, you have to take a way of "other trials 3" for now if you want to change Sass variable definitions of Marp built-in themes. See also #48.

We already have a plan to make built-in themes migrate from Sass variables to CSS variables, for reducing some confusions and inconvenients like you met. Please track marp-team/marp-core#209.

Appendix

@import-theme is just an alternative of @import for Marp/Marpit theme import in CSS preprocessors like Sass. The reason why there is @import-theme rule is to keep the rule for Marp theme system in both of Sass and CSS.

As mentioned in Marpit documentation, Sass will try to delete not-meaning @import rule because the compiler does not know any Marp themes.

When you are using CSS preprocessors like Sass, @import might resolve path in compiling and be lost its definitions. So you can use @import-theme rule alternatively.

-- https://marpit.marp.app/theme-css?id=import-theme-rule

[hnsol]

@yhatt -san, thank you so much for your quick and gracious support !!!

I misunderstood what document says (where cited above). For me, it is great progress to understand "Sass variables never recognize now".

For now I'm pretty satisfied with the way "other trials 3" (copy scss, edit and compile to css), since in wide area I can say good-bye to PowerPoint an Keynote 🎉

Of course I'm looking forward to your new plan, so keep track issue#209.

Again, thank you so much. I'm very happy to use Marp (especially gaia theme !).

[fams]

I tryied this solution but, an error processing ~highlight.js in sass appeared

[yhatt]

@fams ~highlight.js is a syntax of sass-loader/rollup-plugin-postcss to resolve the path of node_modules. Marp Core is using rollup-plugin-postcss to build and bundle themes. If you are building a custom theme from a Sass source without using a bundler, you have to change the path to highlight.js CSS.
(But we not recommend to build from source because cannot follow upcoming updates to the built-in theme)