mermaidの配色をダーク基調+水色アクセントに刷新

[riiimparm]

変更内容

mermaidのデフォルト配色をダーク基調+水色アクセントに変更
フォントを本文と同じInter/Noto Sans JPに統一

図コンテナのスタイルをTailwindクラス文字列からインラインstyleに変更(.mjsはTailwindのcontentスキャン対象外)

デスクトップ: max-width:80vw
スマホ: width/height:auto+max-width:100%+max-height:90vh

テスト用md

---
title: mermaidダークテーマ検証用デモ
pubDate: '2026-08-13'
description: mermaidダイアグラムのダーク背景+水色アクセント配色を確認するための検証用記事
author: RiiiM
tags: [Tech]
---

このページはmermaidダイアグラムのダーク基調配色(ダークネイビー背景+水色アクセント)を、主要なダイアグラム種別ひととおりで確認するための検証用記事。

## flowchartの例

```mermaid
flowchart LR
  A[リクエスト受信] --> B{認証OK?}
  B -- Yes --> C[処理実行]
  B -- No --> D[401 Unauthorized]
  C --> E[(DB)]
  C --> F[レスポンス返却]
```

## sequence diagramの例

```mermaid
sequenceDiagram
  participant User
  participant API
  participant DB

  User->>API: リクエスト送信
  activate API
  API->>DB: クエリ実行
  DB-->>API: 結果返却
  API-->>User: レスポンス返却
  deactivate API

  Note over API,DB: 水色ハイライトの確認用ノート
```

## state diagramの例

```mermaid
stateDiagram-v2
  [*] --> Idle
  Idle --> Running: start
  Running --> Paused: pause
  Paused --> Running: resume
  Running --> [*]: complete
```

## class diagramの例

```mermaid
classDiagram
  class Animal {
    +String name
    +makeSound()
  }
  class Dog {
    +fetch()
  }
  class Cat {
    +scratch()
  }
  Animal <|-- Dog
  Animal <|-- Cat
```

## ER diagramの例

```mermaid
erDiagram
  USER ||--o{ ORDER : places
  ORDER ||--|{ ORDER_ITEM : contains
  PRODUCT ||--o{ ORDER_ITEM : "ordered in"
```

## pie chartの例(pie1〜12の色分け確認)

```mermaid
pie title アクセス元デバイス
  "Desktop" : 45
  "Mobile" : 40
  "Tablet" : 10
  "Other" : 5
```

## gantt chartの例

```mermaid
gantt
  title リリーススケジュール
  dateFormat YYYY-MM-DD
  section 設計
  要件定義 :done, des1, 2026-08-01, 3d
  設計レビュー :active, des2, after des1, 2d
  section 実装
  開発 :dev1, after des2, 5d
  テスト :dev2, after dev1, 3d
```

## gitGraphの例(ブランチラベルの配色確認)

```mermaid
gitGraph
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit
```

## user journeyの例

```mermaid
journey
  title 記事を読むまでの体験
  section 発見
    検索する: 5: User
    記事を開く: 4: User
  section 閲覧
    目次を見る: 3: User
    本文を読む: 5: User
```

## timelineの例

```mermaid
timeline
  title プロダクトの歴史
  2024 : ベータ版公開
  2025 : v1.0リリース : ダークテーマ対応
  2026 : v2.0リリース
```

## mindmapの例

```mermaid
mindmap
  root((記事構成))
    見出し
      h2
      h3
      h4
    コードブロック
      mermaid
      d2
    コールアウト
```

## quadrant chartの例

```mermaid
quadrantChart
  title 施策の優先度
  x-axis 低コスト --> 高コスト
  y-axis 低効果 --> 高効果
  quadrant-1 最優先
  quadrant-2 検討
  quadrant-3 保留
  quadrant-4 様子見
  OGPフォールバック: [0.2, 0.8]
  パンくずバー: [0.3, 0.6]
  D2対応: [0.6, 0.7]
```

[naoki-00-ito]

@riiimparm
style src/layouts/BlogLayout.astro の <style> で指定できないかなあ
変数定期済みのマージンなど使い回せるからこっちに記載しても良いかなと思いました！

[riiimparm]

レイアウトやレンダリング統合のため #185 にて変更するためクローズ