How to create a theme?

[kecrily]

I want to create a theme, but after I read the documentation, it's still not clear how to create a theme and use it. Can you give me an example of a quick start? I am using marp via vscode plugin.

The documents I read were https://marpit.marp.app/theme-css

[yhatt]

https://marpit.marp.app/theme-css is only describing about the thinking of theme CSS syntax. To use your own theme actually, you have to register the custom CSS theme in your VS Code workspace: https://github.com/marp-team/marp-vscode#use-custom-theme-css-shield

Tutorial

1. Create a folder for working and open the folder in VS Code.

2. Put theme.css into the created folder. It makes a theme named "your-theme".

   /* @theme your-theme */
   
   @import 'default';
   
   h1 {
     color: red;
   }

3. Put markdown.md into the created folder.

   ---
   marp: true
   theme: your-theme
   ---
   
   # Hello, world!

4. Hit F1 and run "Preferences: Open Workspace Settings".

5. Search "Themes" and find out Markdown > Marp: Themes.

6. Add a path theme.css. Now ready to use "your-theme".

7. Open markdown.md, and confirm the root of current workspace is the working folder you've made.

8. Open Markdown preview from the this icon:

   

9. Check whether showing "Hello, world!" with red text.

   

10. Congratulations, you've created your first CSS theme!

Excerice

Try changing color: red; to color: blue; in theme.css and save it.

---

The most part of Marp theme is plain CSS so you have to dive into CSS from here. If you are a beginner, strongly recommend to learn CSS first. https://web.dev/learn/css/

[calidion]

use this way:

{
  "markdown.marp.themes": [
    "./theme.css"
  ]
}

[yhatt]

@MingChen2020 Your theme is located in 我的研究/PPT/themes/theme.css and the current workspace of VS Code is 我的研究. So you have to set the custom theme path as relative from 我的研究: ./PPT/themes/theme.css

{
  "markdown.marp.themes": [
    "./PPT/themes/theme.css"
  ]
}

[Doyoulikemilk]

Thank you so much for your patience!!! It works!!!

I do appreciate this project help write slides more easily!

[zrxdaly]

Thanks @yhatt for your answer.
If i understand correctly, the path should not be set in the user json file right?
also i am a bit confused about how to set the path if md file is outside of theme workspace.
Could you give a small example of this situation?
For example: i have a folder that contains several theme.css files: /home/name/Awesome-Marp/themes/*.css
but i normally write md file in other folder: /home/name/Myworkdir/exmaple.md
how do i set the path in this case? Thanks a lot.

[yhatt]

If i understand correctly, the path should not be set in the user json file right?

It's also working if set the local file path(s) to user json. However, Marp team recommends to use the workspace setting, to avoid unnecessary file request across unrelated workspaces.

also i am a bit confused about how to set the path if md file is outside of theme workspace.
Could you give a small example of this situation?

Whenever using themes of inside the workspace, Markdown documents should belong to the same workspace too. VS Code has been designed as prevented loading external CSS from the out of the workspace.

• Can't custum markdown style microsoft/vscode#45260 (comment)
• Could not load 'markdown.styles': *.css microsoft/vscode#77290 (comment)
• Could not load markdown.styles microsoft/vscode#96201
• The markdown.styles stylesheet must be contained inside the current workspace. microsoft/vscode#99280
• Could not load 'markdown.styles' outside workspace microsoft/vscode#101991

If allowed fetching from the outside, it means opening the door of nightmare, such as fetching /etc/passwd 🎃

[calidion]

the path in 6 should be a full path: /home/eric/marp/theme.css

[yhatt]

It's wrong. The path should be a relative path from an opening workspace because Marp for VS Code only can open CSS resources located in the current workspace due to the security reason.

This behavior matches as VS Code setting for the styles of default Markdown preview: microsoft/vscode#45260

[calidion]

But direcory path is invalid in my vscode env, while the full path one works. Why?

[calidion]

the working vscode settings generated by vscode:

{
  "markdown.marp.themes": [
    "/home/eric/marp/theme.css"
  ]
}

[yhatt]

Which version of Marp for VS Code extension are you using? If you were using old version of the extension, recommend to update to the latest stable v1.5.2.

[calidion]

using this one now.

{
  "markdown.marp.themes": [
    "./theme.css"
  ]
}

[vmgustavo]

how can I configure marp to use a custom theme without using vscode?

[yhatt]

Marp CLI: https://github.com/marp-team/marp-cli#theme

[dirsigler]

what about hosting the theme on a git repository and reference the raw file via its HTTP path?

[zrxdaly]

this one works better, thanks