diff --git a/README.md b/README.md
index 4e9332c..70b797c 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,8 @@ To start, simply trigger it using `/Draw mermaid diagram`. Then add your mermaid
## Changing background colour
+### Option 1
+
Same steps as above, but before clicking `Render`, include the colour inside the renderer, e.g.
```
@@ -26,6 +28,17 @@ or
{{renderer :mermaid_abc123, #000000}}
```
+### Option 2
+
+Define in your plugin settings file. This will apply to **all** mermaid diagrams that you render.
+
+```
+{
+ "theme": '',
+ "colour": ''
+}
+```
+
# Credits
[mermaid.ink](https://github.com/jihchi/mermaid.ink)
diff --git a/package.json b/package.json
index 061dddc..a1fbb4a 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"icon": "./icon.svg"
},
"name": "logseq-mermaid-plugin",
- "version": "1.0.8",
+ "version": "1.0.9",
"description": "",
"main": "dist/index.html",
"targets": {
diff --git a/src/convert.ts b/src/convert.ts
index 70f5358..27ce045 100644
--- a/src/convert.ts
+++ b/src/convert.ts
@@ -6,7 +6,14 @@ export const renderMermaid = async (type, payload, colour, mermaidUUID) => {
const matchData = mermaidBlock.content.match(/```mermaid(.|\n)*?```/gm);
let toDecode = matchData[0];
- toDecode = toDecode.replace('```mermaid', '').replace('```', '');
+ if (logseq.settings) {
+ toDecode = toDecode.replace(
+ '```mermaid',
+ `%%{init: { 'theme': ${logseq.settings.theme} } }%%`
+ );
+ } else {
+ toDecode = toDecode.replace('```mermaid', '').replace('```', '');
+ }
toDecode = toDecode.replace('\n', ' ');
const jsonString = btoa(toDecode);
@@ -20,7 +27,19 @@ export const renderMermaid = async (type, payload, colour, mermaidUUID) => {
};
const handleEvent = async () => {
- if (colour === undefined) {
+ if (logseq.settings) {
+ if (logseq.settings.colour.startsWith('#')) {
+ renderBlock(
+ `
`
+ );
+ } else if (!colour.startsWith('#')) {
+ renderBlock(
+ `
`
+ );
+ }
+ } else if (colour === undefined) {
renderBlock(`
`);
} else if (colour.startsWith('#')) {
renderBlock(