feat(mermaid): support dark mode

exampleSite/content/samples/diagrams-flowcharts/index.it.md

@@ -15,7 +15,6 @@ The examples below are a small selection taken from the [official Mermaid docs](
 
 ## Flowchart
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 graph TD
 A[Christmas] -->|Get money| B(Go shopping)
@@ -32,11 +31,9 @@ F
 G
 end
 {{< /mermaid >}}
-</div>
 
 ## Sequence diagram
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 sequenceDiagram
 autonumber
@@ -54,11 +51,9 @@ loop Every minute
 John-->Alice: Great!
 end
 {{< /mermaid >}}
-</div>
 
 ## Class diagram
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 classDiagram
 Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
 +run()
 }
 {{< /mermaid >}}
-</div>
 
 ## Entity relationship diagram
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 erDiagram
 CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
 PRODUCT-CATEGORY ||--|{ PRODUCT : contains
 PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 {{< /mermaid >}}
-</div>
-

exampleSite/content/samples/diagrams-flowcharts/index.ja.md

@@ -15,7 +15,6 @@ Mermaid 図は `mermaid` ショートコードを使うことで Blowfish でサ
 
 ## フローチャート
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 graph TD
 A[クリスマス] -->|収入| B(買い物にいく)
@@ -32,11 +31,9 @@ F
 G
 end
 {{< /mermaid >}}
-</div>
 
 ## 順序図
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 sequenceDiagram
 autonumber
@@ -54,11 +51,9 @@ loop 毎分
 ジョン-->アリス: すばらしい!
 end
 {{< /mermaid >}}
-</div>
 
 ## クラス図
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 classDiagram
 Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
 +run()
 }
 {{< /mermaid >}}
-</div>
 
 ## 主従関係図
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 erDiagram
 CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
 PRODUCT-CATEGORY ||--|{ PRODUCT : contains
 PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 {{< /mermaid >}}
-</div>
-

exampleSite/content/samples/diagrams-flowcharts/index.md

@@ -15,7 +15,6 @@ The examples below are a small selection taken from the [official Mermaid docs](
 
 ## Flowchart
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 graph TD
 A[Christmas] -->|Get money| B(Go shopping)
@@ -32,11 +31,9 @@ F
 G
 end
 {{< /mermaid >}}
-</div>
 
 ## Sequence diagram
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 sequenceDiagram
 autonumber
@@ -54,11 +51,9 @@ loop Every minute
 John-->Alice: Great!
 end
 {{< /mermaid >}}
-</div>
 
 ## Class diagram
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 classDiagram
 Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
 +run()
 }
 {{< /mermaid >}}
-</div>
 
 ## Entity relationship diagram
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 erDiagram
 CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
 PRODUCT-CATEGORY ||--|{ PRODUCT : contains
 PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 {{< /mermaid >}}
-</div>
-

exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md

@@ -15,7 +15,6 @@ Blowfish 使用 `mermaid` 简码可以调用。Blowfish 会根据配置的 `colo
 
 ## 流程图
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 graph TD
 A[Christmas] -->|Get money| B(Go shopping)
@@ -32,11 +31,9 @@ F
 G
 end
 {{< /mermaid >}}
-</div>
 
 ## 时序图
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 sequenceDiagram
 autonumber
@@ -54,11 +51,9 @@ loop Every minute
 John-->Alice: Great!
 end
 {{< /mermaid >}}
-</div>
 
 ## 类图
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 classDiagram
 Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
 +run()
 }
 {{< /mermaid >}}
-</div>
 
 ## 实体关系图
 
-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 erDiagram
 CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
 PRODUCT-CATEGORY ||--|{ PRODUCT : contains
 PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 {{< /mermaid >}}
-</div>
-