自然で落ち着いた雰囲気のSpruceテーマ

このテーマの特徴

Spruceテーマの特徴：

• Spruce（トウヒ）の木をイメージした配色：緑と茶色のグラデーションのヘッダーと、木目をイメージした背景画像で、自然で落ち着いた雰囲気を演出しています。

• コントラストの効いた配色：白いフッターとタイトル背景の白いテキストが、暗いヘッダーと背景と鮮明にコントラストしています。

• 微妙な影：ヘッダーとフッターに微妙な影が追加され、奥行きと立体感が生み出されています。

全体として、このテーマは、自然で落ち着いた雰囲気を備えた、明確でナビゲーションしやすいプレゼンテーションを作成するための洗練されたオプションです。

このテーマを利用する

CSS

/* @theme spruce */
@import default;

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

header {
  width: 100%;
  background: linear-gradient(to right, #586a54, #3a3d3d);
  color: #ffffff;
  padding: 10pt;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 8px 32px #00000029;
}

footer {
  width: 100%;
  position: fixed;
  padding: 10pt;
  background: #ffffff;
  color: #000000;
  bottom: 0pt;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10pt;
  box-shadow: 0px -8px 32px #00000029;
}

section.title {
  background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20H32V32H0V20ZM28 24.0003L11.2 19.9996L12.8 9.59961L28 12.0003V24.0003ZM23.2 12.8003L21.6 21.6003L17.6 18.3996L18.4 11.9996L23.2 12.8003ZM25.6 10.4003L28 5.99961V2.39961L25.6 6.80031L23.2 9.20031L25.6 10.4003ZM4 20V12H28V20H4Z' fill='%23586a54'/%3E%3Cpath d='M23.232 21.52L21.592 9.59961L12.832 12.8003L18.352 18.3996L23.232 21.52Z' fill='%233a3d3d'/%3E%3C/svg%3E");
  background-size: cover;
  color: #ffffff;
  padding: 50px;
  text-align: center;
  font-size: 48pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #586a54;
}

Marpのサンプル

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

<!--
_class: title
-->

# スプルース

---
# 見出し
- これはリスト
- これもリスト