ダークエレガントなMarpテーマ

このテーマの特徴

テーマの特徴：

このテーマは、ダークでエレガントな雰囲気があります。

セクション： * 列で表示され、ページを垂直に整理します。 * フォントサイズが24ptで読みやすいです。 * パディングが20pxあり、コンテンツに十分な余白があります。

ヘッダー： * 水平に配置され、ページの上部に表示されます。 * 背景は左から右にグラデーションで変化する濃いグレー(#2f2727)と(#573c3c)です。 * フォントは白で、サイズは20ptです。 * ドロップシャドウが適用され、奥行き感があります。

フッター： * ページの最下部に固定表示されます。 * 背景はヘッダーと同じグラデーションを使用しています。 * フォントは白で、テキストは中央揃えです。

タイトルセクション： * 背景は濃いグレー(#2f2727)で、タイトルを強調しています。 * パディングが40px 20pxあり、十分な余白があります。 * フォントサイズは36ptで、タイトルが際立ちます。

このテーマを利用する

CSS

/* @theme custom_theme */
@import default;

section{
  display: flex;
  flex-direction: column;
  font-size: 24pt;
  padding: 20px;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(to right, #2f2727, #573c3c);
  color: white;
  font-size: 20pt;
  box-shadow: 0px 1px 5px 1px #00000040;
}

footer{
  width: 100%;
  position: fixed;
  padding: 10px;
  background: linear-gradient(to right, #573c3c, #2f2727);
  color: white;
  bottom: 0px;
  text-align: center;
}

section.title{
  background-color: #2f2727;
  color: white;
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  font-size: 36pt;
  background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='pattern' patternUnits='userSpaceOnUse' width='100' height='100'%3E%3Crect fill='%232f2727' x='0' y='0' width='100%' height='100%'/%3E%3Cpath d='M0 0 L 100 100' stroke='%23b09a9a' stroke-width='1px'/%3E%3Cpath d='M100 0 L 0 100' stroke='%23b09a9a' stroke-width='1px'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23pattern)'%3E%3C/rect%3E%3C/svg%3E");
}

Marpのサンプル

---
marp: true
theme: custom_theme
header: " "
footer: " "
---

<!--
_class: title
-->

# タイトルスライド: タイトル

---

# コンテンツスライド: 見出し
- これはリスト
- これもリスト