洗練されたプロフェッショナルなプレゼンテーションを作成するモダンなmarpテーマ: Midnight Aura

スライド

image0 image1

このテーマの特徴

テーマの特徴:

ダークかつ落ち着いた配色:

  • 背景色: #1f1f1f (ダークグレー)
  • テキスト色: #e0e0e0 (オフホワイト)
  • アクセントカラー: #a83299 (バイオレット)

モダンなグラデーションのヘッダーとフッター:

  • ヘッダーとフッターは、ダークグレーからアクセントカラーへの水平グラデーションで構成されています。
  • これにより、洗練されたプロフェッショナルな印象を与えます。

セクションの見出し用のビビッドなタイトルセクション:

  • セクションの見出しは、アクセントカラーの背景に対して白で表示されます。
  • これにより、見出しが際立って強調されます。

背景の流れるような波の模様:

  • タイトルセクションは、流れるような波の模様の背景画像を使用しています。
  • この模様は、動きと深みを加え、スライドプレゼンテーションに視覚的な興味を引き出します。

フォントサイズとパディングの調整:

  • テキストのフォントサイズは 24pt で、読みやすさと視認性を確保しています。
  • パディングは、十分な余白を提供し、スライドをすっきりと整理しています。

まとめ:

このテーマは、ダークな配色、ビビッドなタイトルセクション、流れるような背景パターンを組み合わせることで、モダンで洗練された、視覚的に印象的なスライドを作成できます。プロフェッショナルなプレゼンテーション、アカデミックな講演、または創造的なコンセプトの共有に最適です。

このテーマを利用する

CSS

/* @theme midnight_aura */
@import default;

section{
  --bg-color: #1f1f1f;
  --text-color: #e0e0e0;
  --accent-color: #a83299;

  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 24pt;
  padding: 30px;

  display: flex;
  flex-direction: column;
  gap: 30px;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15pt;
  background: linear-gradient(to right, #424242, var(--accent-color));
  color: white;
  font-size: 24pt;
  box-shadow: 0px 10px 20px #00000014;
  border-radius: 10px;
}

footer{
  position: fixed;
  bottom: 0pt;
  width: 100%;
  padding: 15pt;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15pt;
  background: linear-gradient(to left, #424242, var(--accent-color));
  color: white;
  box-shadow: 0px -10px 20px #00000014;
  border-radius: 10px;
}

section.title{
  background-color: var(--accent-color);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50pt;
  gap: 30pt;
  font-size: 36pt;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 1600 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='wave' patternUnits='userSpaceOnUse' width='1600' height='800'%3E%3Cpath d='M0 0 L0 800 Q572 602 1200 537 Q1600 500 1600 500 L1600 0 L0 0 Z' fill='%23424242' %3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23wave)' %3E%3C/rect%3E%3C/svg%3E");
  background-size: 100% 100%;
}

Marpのサンプル

---
marp: true
theme: midnight_aura
header: " "
footer: " "
---
<!--
_class: title
-->

# タイトル

---
<!--
_class: section
-->

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