yhatt / marp

The site of classic Markdown presentation writer app
https://yhatt.github.io/marp/
MIT License
7.89k stars 398 forks source link

How change the background of gaia? #137

Closed ISosnovik closed 6 years ago

ISosnovik commented 7 years ago

Gaia is awesome but

How to change them? How could I make my own theme?

matsubara0507 commented 7 years ago

I think, quick way is that make css and write link tag to top of md file. When writing CSS, It is better to refer to sass/themes/gaia.sass. Write the link tag as follows:

<link rel="stylesheet" href="/gaia.css">
<!-- $theme: gaia -->

# Introducing ==Gaia== theme

#### Marp's new slide theme

###### Created by [Yuki Hattori (@yhatt)](https://github.com/yhatt)

---

but, this way is very hard.

so, I recommend that you actually build at local. In that case, create a sass file, put it in sass/themes/ and rewrite the coffee file a bit. rewrite the 32nd line of mds_md_setting.coffee, if make sass/themes/hoge.sass

  return if basename in ['default', 'gaia', 'hoge'] then "css/themes/#{basename}.css" else null
yhatt commented 6 years ago

I think updating source code of the current Marp to customize theme is too hard.

In Marp Next, we prepared a controlled way to customize gaia theme, that came from Marpit framework.

/* theme.css */
@import 'gaia';

section {
  background: white;
}

You can use custom theme in CLI interface.

npx @marp-team/marp-cli slide.md --theme theme.css

If you want not to create a new theme, you can use an inline <style> tag.

---
theme: gaia
---

<style>
section {
  background: white;
}
</style>

Please track #5 about the support of custom CSS theme in GUI interface of Marp Next.