跟隨主題切換的圖形

儲存格可以同時產生淺色與深色輸出。請先輸出淺色內容：

#| renderings: [light, dark]

搭配 askr-html 與 theme-toggle 時，深色樣式表會帶有 data-mode="dark"，而切換按鈕會在 body 上加入 quarto-dark。圖形與群組頁面以此方式顯示一組雙色樣本。

寬圖與圖表

將圖形或 Mermaid 區塊包在 .askr-wide-figure 中，可保留標籤的自然大小，並在具名且可用鍵盤聚焦的區域內捲動。捲動範圍由圖形本身的內在寬度決定，不需指定固定的使用者寬度。Mermaid 顏色會依 Askr 的明亮與深色調色盤變化。

::: {.askr-wide-figure aria-label="Circuit signal path"}
```{mermaid}
flowchart LR
  Input --> Resonator --> Output
```
:::

此工具保留 Quarto 原生圖形、標題與交互參照。

若要並排呈現兩個相關提示框或卡片，.askr-grid 會在 768px 以上建立等寬雙欄， 低於此寬度時改為單欄；原始碼順序仍是閱讀順序。一般 Quarto .columns 則保留自身的響應式版面。

若要限制高圖的視窗高度，可將它包在 .askr-figure-fit 中。此選用工具會將圖片高度限制為 70svh（並以 70vh 作為後備）、保留長寬比，且讓原生圖說顯示於圖片下方。未加包裝的圖形不變； 圖片檢視仍由既有的 Askr 圖片檢視器處理。 請見圖形元件範例。