主題與樣式

內建渲染器會在每次渲染時解析 Mermaid 主題，並為外層控制項提供 CSS 變數。
主題名稱影響 Mermaid SVG 輸出；--ncm-* 變數則影響本模組的外層容器、工具列、覆蓋層與縮放介面。

設定淺色與深色預設值

設定由自動色彩模式與保留手動策略選用的主題：

export default defineNuxtConfig({
  contentMermaid: {
    theme: {
      light: 'default',
      dark: 'dark',
    },
  },
})

預設為 light: 'default' 與 dark: 'dark'。已棄用的 theme.useColorModeTheme 鍵沒有作用。

手動控制主題

模組啟用後，useMermaidTheme() 可由 Nuxt 自動匯入。 它回傳應用程式範圍的響應式狀態與方法：

<script setup lang="ts">
const {
  currentTheme,
  setMermaidTheme,
  getMermaidTheme,
  resetMermaidTheme,
} = useMermaidTheme()

function toggleDiagramTheme() {
  setMermaidTheme(currentTheme.value === 'dark' ? 'light' : 'dark')
}
</script>

<template>
  <button type="button" @click="toggleDiagramTheme">
    切換圖表主題
  </button>
</template>

• currentTheme 是包含手動覆寫值的響應式 Ref；它表示目前手動模式，不一定等於最後傳給 Mermaid 的實際主題名稱。
• setMermaidTheme(mode) 用來設定它；getMermaidTheme() 回傳它。
• resetMermaidTheme() 等同於 setMermaidTheme(null)。

傳入 null 可回到自動選擇。請不要從套件根目錄匯入這個組合式函式（composable）；Nuxt 會自動匯入它。

區分策略與主題名稱

'light' 與 'dark' 是保留策略，不是一般的直接主題名稱值：

setMermaidTheme('dark') // 設定的深色策略
setMermaidTheme('forest') // 直接 Mermaid 主題
setMermaidTheme(null) // 自動模式

了解主題解析規則

套件的主題解析規則（Theme Resolution Policy），依優先度由高至低如下：

1. 選用圖表設定來源的 config.theme：Markdown 頁面使用 Page Mermaid Config，Vue 元件使用 Direct Mermaid Config。
2. useMermaidTheme() 的手動模式。
3. 已安裝 @nuxtjs/color-mode 時，目前的色彩模式值。
4. contentMermaid.loader.init.theme（依序後備至設定的淺色主題與 'default'）。

上述第 1 項的 config.theme 是頁面 config 或元件 config。
Mermaid 圍欄 (fence) 內的 YAML frontmatter 與 %%{init: ...}%% directive 仍是原始碼層級設定，會在 Mermaid 解析圖表時依 Mermaid 自己的規則處理，不屬於本模組的主題策略清單。

自動色彩模式選擇時，dark 使用 theme.dark；其他偵測到的色彩模式值都使用 theme.light。Mermaid YAML 前置資料與指令仍是 Mermaid 擁有的原始碼語法；其邊界請參閱撰寫圖表。

同時使用色彩模式與手動控制

有 @nuxtjs/color-mode 時，只要手動模式是 null，圖表便會跟隨它。
只有檢視畫面需要覆寫時才設定手動模式，完成後重設以恢復色彩模式選擇：

const { resetMermaidTheme, setMermaidTheme } = useMermaidTheme()

setMermaidTheme('dark')
resetMermaidTheme()

手動狀態的範圍是應用程式，因此刻意鎖定圖表主題的檢視畫面離開時，請規劃重設時機。

覆寫內建樣式鉤點

請在應用程式 CSS 設定變數。以下提供精簡的品牌化淺色／深色調色盤：

:root {
  --ncm-code-bg: #f3f4f6;
  --ncm-code-bg-hover: #e5e7eb;
  --ncm-border-color: #d1d5db;
  --ncm-text: #111827;
  --ncm-text-muted: #4b5563;
  --ncm-text-xmuted: #6b7280;
  --ncm-overlay-bg: #f9fafb;
}

html[data-theme='dark'],
.dark {
  --ncm-code-bg: #111827;
  --ncm-code-bg-hover: #1f2937;
  --ncm-border-color: #374151;
  --ncm-text: #f9fafb;
  --ncm-text-muted: #d1d5db;
  --ncm-text-xmuted: #9ca3af;
  --ncm-overlay-bg: #111827;
}

表面、邊框與文字樣式鉤點

覆蓋層、游標與提示樣式鉤點

工具列與縮放版面樣式鉤點

渲染器會動態設定 --ncm-icon-size、--ncm-toolbar-height 與游標變數。
只有在同時考量相符的控制項尺寸與互動狀態時，才覆寫它們。