Allow user to configure theme
This commit is contained in:
parent
04fc5e51fc
commit
a6f992ce5b
|
@ -99,7 +99,7 @@ Class08 <--> C2: Cool label
|
||||||
</div>
|
</div>
|
||||||
<script src="./mermaid.js"></script>
|
<script src="./mermaid.js"></script>
|
||||||
<script>
|
<script>
|
||||||
mermaid.initialize({startOnLoad: true});
|
mermaid.initialize({startOnLoad: true, theme: 'default'});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "mermaid",
|
"name": "mermaid",
|
||||||
"version": "7.0.15",
|
"version": "7.0.16",
|
||||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||||
"main": "dist/mermaid.core.js",
|
"main": "dist/mermaid.core.js",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
|
|
@ -35,7 +35,18 @@ import gitGraphAst from './diagrams/gitGraph/gitGraphAst'
|
||||||
import d3 from './d3'
|
import d3 from './d3'
|
||||||
import pkg from '../package.json'
|
import pkg from '../package.json'
|
||||||
|
|
||||||
|
import darkStyle from './less/dark/mermaid.less'
|
||||||
|
import defaultStyle from './less/default/mermaid.less'
|
||||||
import forestStyle from './less/forest/mermaid.less'
|
import forestStyle from './less/forest/mermaid.less'
|
||||||
|
import neutralStyle from './less/neutral/mermaid.less'
|
||||||
|
|
||||||
|
const themes = {
|
||||||
|
dark: darkStyle,
|
||||||
|
default: defaultStyle,
|
||||||
|
forest: forestStyle,
|
||||||
|
neutral: neutralStyle
|
||||||
|
}
|
||||||
|
const defaultTheme = forestStyle
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ## Configuration
|
* ## Configuration
|
||||||
|
@ -49,6 +60,8 @@ import forestStyle from './less/forest/mermaid.less'
|
||||||
* ```
|
* ```
|
||||||
*/
|
*/
|
||||||
var config = {
|
var config = {
|
||||||
|
theme: defaultTheme,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* logLevel , decides the amount of logging to be used.
|
* logLevel , decides the amount of logging to be used.
|
||||||
* * debug: 1
|
* * debug: 1
|
||||||
|
@ -425,7 +438,7 @@ var render = function (id, txt, cb, container) {
|
||||||
// insert inline style into svg
|
// insert inline style into svg
|
||||||
const svg = element.firstChild
|
const svg = element.firstChild
|
||||||
const s = document.createElement('style')
|
const s = document.createElement('style')
|
||||||
s.innerHTML = forestStyle
|
s.innerHTML = themes[config.theme] || defaultTheme
|
||||||
svg.insertBefore(s, svg.firstChild)
|
svg.insertBefore(s, svg.firstChild)
|
||||||
|
|
||||||
d3.select('#d' + id).selectAll('foreignobject div').attr('xmlns', 'http://www.w3.org/1999/xhtml')
|
d3.select('#d' + id).selectAll('foreignobject div').attr('xmlns', 'http://www.w3.org/1999/xhtml')
|
||||||
|
|
Loading…
Reference in New Issue