perf: 【文件】流程图新组件添加切换皮肤主题功能
This commit is contained in:
韦荣超
parent
251f4ca4ac
commit
ae527a78ef
@ -2,20 +2,13 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Flowchart Maker & Online Diagram Software</title>
|
<title>Grapheditor</title>
|
||||||
<meta charset="utf-8">
|
<!--[if IE]>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=5,IE=9">
|
||||||
<meta name="Description" content="diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
|
<![endif]-->
|
||||||
<meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
<meta itemprop="name" content="diagrams.net - free flowchart maker and diagrams online">
|
|
||||||
<meta itemprop="description" content="diagrams.net is a free online diagramming application and flowchart maker . You can use it to create UML, entity relationship,
|
|
||||||
org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic
|
|
||||||
circuit and social network diagrams.">
|
|
||||||
<meta itemprop="image" content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<meta name="msapplication-config" content="images/browserconfig.xml">
|
<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
|
||||||
<meta name="theme-color" content="#d89000">
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/**
|
/**
|
||||||
* URL Parameters and protocol description are here:
|
* URL Parameters and protocol description are here:
|
||||||
@ -342,16 +335,6 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm">
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
|
|
||||||
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#d89000">
|
|
||||||
<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
|
|
||||||
<link rel="preconnect" href="https://storage.googleapis.com">
|
|
||||||
<link rel="canonical" href="https://app.diagrams.net">
|
|
||||||
<link rel="manifest" href="images/manifest.json">
|
|
||||||
<link rel="shortcut icon" href="favicon.ico">
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body { overflow:hidden; }
|
body { overflow:hidden; }
|
||||||
div.picker { z-index: 10007; }
|
div.picker { z-index: 10007; }
|
||||||
@ -423,7 +406,7 @@
|
|||||||
<div id="geInfo">
|
<div id="geInfo">
|
||||||
<div class="geBlock"></div>
|
<div class="geBlock"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<script type="text/javascript" src="./js/grapheditor/Dark.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/**
|
/**
|
||||||
* Main
|
* Main
|
||||||
|
|||||||
1
public/js/drawio/js/diagramly/Init.js
vendored
1
public/js/drawio/js/diagramly/Init.js
vendored
@ -11,6 +11,7 @@ window.isLocalStorage = window.isLocalStorage || false;
|
|||||||
|
|
||||||
// Disables loading settings in configured mode
|
// Disables loading settings in configured mode
|
||||||
window.mxLoadSettings = window.mxLoadSettings || urlParams['configure'] != '1';
|
window.mxLoadSettings = window.mxLoadSettings || urlParams['configure'] != '1';
|
||||||
|
window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
|
||||||
|
|
||||||
// Checks for SVG support
|
// Checks for SVG support
|
||||||
window.isSvgBrowser = true;
|
window.isSvgBrowser = true;
|
||||||
|
|||||||
165
public/js/drawio/js/grapheditor/Dark.js
vendored
Normal file
165
public/js/drawio/js/grapheditor/Dark.js
vendored
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
var Dark = {
|
||||||
|
utils: {
|
||||||
|
filter: '-webkit-filter: url(#dark-mode-filter) !important; filter: url(#dark-mode-filter) !important;',
|
||||||
|
reverseFilter: '-webkit-filter: url(#dark-mode-reverse-filter) !important; filter: url(#dark-mode-reverse-filter) !important;',
|
||||||
|
noneFilter: '-webkit-filter: none !important; filter: none !important;',
|
||||||
|
|
||||||
|
addExtraStyle() {
|
||||||
|
try {
|
||||||
|
return '';
|
||||||
|
} catch (e) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
addStyle(id, tag, css) {
|
||||||
|
tag = tag || 'style';
|
||||||
|
let doc = document, styleDom = doc.getElementById(id);
|
||||||
|
if (styleDom) return;
|
||||||
|
let style = doc.createElement(tag);
|
||||||
|
style.rel = 'stylesheet';
|
||||||
|
style.id = id;
|
||||||
|
tag === 'style' ? style.innerHTML = css : style.href = css;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
},
|
||||||
|
|
||||||
|
getClassList(node) {
|
||||||
|
return node.classList || [];
|
||||||
|
},
|
||||||
|
|
||||||
|
addClass(node, name) {
|
||||||
|
this.getClassList(node).add(name);
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
removeClass(node, name) {
|
||||||
|
this.getClassList(node).remove(name);
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
hasClass(node, name) {
|
||||||
|
return this.getClassList(node).contains(name);
|
||||||
|
},
|
||||||
|
|
||||||
|
hasElementById(eleId) {
|
||||||
|
return document.getElementById(eleId);
|
||||||
|
},
|
||||||
|
|
||||||
|
removeElementById(eleId) {
|
||||||
|
let ele = document.getElementById(eleId);
|
||||||
|
ele && ele.parentNode.removeChild(ele);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
createDarkFilter() {
|
||||||
|
if (this.utils.hasElementById('dark-mode-svg')) return;
|
||||||
|
let svgDom = '<svg id="dark-mode-svg" style="height: 0; width: 0;"><filter id="dark-mode-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.283 -0.567 -0.567 0.000 0.925 -0.567 0.283 -0.567 0.000 0.925 -0.567 -0.567 0.283 0.000 0.925 0.000 0.000 0.000 1.000 0.000"></feColorMatrix></filter><filter id="dark-mode-reverse-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.333 -0.667 -0.667 0.000 1.000 -0.667 0.333 -0.667 0.000 1.000 -0.667 -0.667 0.333 0.000 1.000 0.000 0.000 0.000 1.000 0.000"></feColorMatrix></filter></svg>';
|
||||||
|
let div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
|
||||||
|
div.innerHTML = svgDom;
|
||||||
|
let frag = document.createDocumentFragment();
|
||||||
|
while (div.firstChild)
|
||||||
|
frag.appendChild(div.firstChild);
|
||||||
|
document.head.appendChild(frag);
|
||||||
|
},
|
||||||
|
|
||||||
|
createDarkStyle() {
|
||||||
|
this.utils.addStyle('dark-mode-style', 'style', `
|
||||||
|
@media screen {
|
||||||
|
html {
|
||||||
|
${this.utils.filter}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default Reverse rule */
|
||||||
|
img,
|
||||||
|
video,
|
||||||
|
iframe,
|
||||||
|
canvas,
|
||||||
|
:not(object):not(body) > embed,
|
||||||
|
object,
|
||||||
|
svg image {
|
||||||
|
${this.utils.reverseFilter}
|
||||||
|
}
|
||||||
|
|
||||||
|
[style*="background:url"] *,
|
||||||
|
[style*="background-image:url"] *,
|
||||||
|
[style*="background: url"] *,
|
||||||
|
[style*="background-image: url"] *,
|
||||||
|
input,
|
||||||
|
[background] *,
|
||||||
|
twitterwidget .NaturalImage-image {
|
||||||
|
${this.utils.noneFilter}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text contrast */
|
||||||
|
html {
|
||||||
|
text-shadow: 0 0 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Full screen */
|
||||||
|
.no-filter,
|
||||||
|
:-webkit-full-screen,
|
||||||
|
:-webkit-full-screen *,
|
||||||
|
:-moz-full-screen,
|
||||||
|
:-moz-full-screen *,
|
||||||
|
:fullscreen,
|
||||||
|
:fullscreen * {
|
||||||
|
${this.utils.noneFilter}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Page background */
|
||||||
|
html {
|
||||||
|
background: #fff !important;
|
||||||
|
}
|
||||||
|
${this.utils.addExtraStyle()}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.no-print {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
enableDarkMode() {
|
||||||
|
if (this.isDarkEnabled()) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.createDarkFilter();
|
||||||
|
this.createDarkStyle();
|
||||||
|
this.utils.addClass(document.body, "dark-mode-reverse")
|
||||||
|
},
|
||||||
|
|
||||||
|
disableDarkMode() {
|
||||||
|
if (!this.isDarkEnabled()) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.utils.removeElementById('dark-mode-svg');
|
||||||
|
this.utils.removeElementById('dark-mode-style');
|
||||||
|
this.utils.removeClass(document.body, "dark-mode-reverse")
|
||||||
|
},
|
||||||
|
|
||||||
|
autoDarkMode() {
|
||||||
|
let darkScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||||
|
if (darkScheme) {
|
||||||
|
this.enableDarkMode()
|
||||||
|
} else {
|
||||||
|
this.disableDarkMode()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
isDarkEnabled() {
|
||||||
|
return this.utils.hasClass(document.body, "dark-mode-reverse")
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
switch (window.mxTheme) {
|
||||||
|
case 'dark':
|
||||||
|
Dark.enableDarkMode();
|
||||||
|
break;
|
||||||
|
case 'light':
|
||||||
|
Dark.disableDarkMode();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
Dark.autoDarkMode();
|
||||||
|
break;
|
||||||
|
}
|
||||||
1
public/js/drawio/js/grapheditor/Init.js
vendored
1
public/js/drawio/js/grapheditor/Init.js
vendored
@ -33,3 +33,4 @@ window.mxBasePath = window.mxBasePath || 'mxgraph';
|
|||||||
window.mxImageBasePath = window.mxImageBasePath || 'mxgraph/images';
|
window.mxImageBasePath = window.mxImageBasePath || 'mxgraph/images';
|
||||||
window.mxLanguage = window.mxLanguage || urlParams['lang'];
|
window.mxLanguage = window.mxLanguage || urlParams['lang'];
|
||||||
window.mxLanguages = window.mxLanguages || ['de', 'se'];
|
window.mxLanguages = window.mxLanguages || ['de', 'se'];
|
||||||
|
window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 9.0 KiB |
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "diagrams.net",
|
"name": "",
|
||||||
"short_name": "Diagrams",
|
"short_name": "Diagrams",
|
||||||
"description": "diagrams.net is a completely free diagram editor",
|
"description": "diagrams.net is a completely free diagram editor",
|
||||||
"icons": [
|
"icons": [
|
||||||
|
|||||||
@ -2,20 +2,13 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Flowchart Maker & Online Diagram Software</title>
|
<title>Grapheditor</title>
|
||||||
<meta charset="utf-8">
|
<!--[if IE]>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=5,IE=9">
|
||||||
<meta name="Description" content="diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
|
<![endif]-->
|
||||||
<meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
<meta itemprop="name" content="diagrams.net - free flowchart maker and diagrams online">
|
|
||||||
<meta itemprop="description" content="diagrams.net is a free online diagramming application and flowchart maker . You can use it to create UML, entity relationship,
|
|
||||||
org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic
|
|
||||||
circuit and social network diagrams.">
|
|
||||||
<meta itemprop="image" content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<meta name="msapplication-config" content="images/browserconfig.xml">
|
<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
|
||||||
<meta name="theme-color" content="#d89000">
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/**
|
/**
|
||||||
* URL Parameters and protocol description are here:
|
* URL Parameters and protocol description are here:
|
||||||
@ -342,16 +335,6 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm">
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
|
|
||||||
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#d89000">
|
|
||||||
<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
|
|
||||||
<link rel="preconnect" href="https://storage.googleapis.com">
|
|
||||||
<link rel="canonical" href="https://app.diagrams.net">
|
|
||||||
<link rel="manifest" href="images/manifest.json">
|
|
||||||
<link rel="shortcut icon" href="favicon.ico">
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body { overflow:hidden; }
|
body { overflow:hidden; }
|
||||||
div.picker { z-index: 10007; }
|
div.picker { z-index: 10007; }
|
||||||
@ -423,7 +406,7 @@
|
|||||||
<div id="geInfo">
|
<div id="geInfo">
|
||||||
<div class="geBlock"></div>
|
<div class="geBlock"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<script type="text/javascript" src="./js/grapheditor/Dark.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/**
|
/**
|
||||||
* Main
|
* Main
|
||||||
|
|||||||
@ -11,6 +11,7 @@ window.isLocalStorage = window.isLocalStorage || false;
|
|||||||
|
|
||||||
// Disables loading settings in configured mode
|
// Disables loading settings in configured mode
|
||||||
window.mxLoadSettings = window.mxLoadSettings || urlParams['configure'] != '1';
|
window.mxLoadSettings = window.mxLoadSettings || urlParams['configure'] != '1';
|
||||||
|
window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
|
||||||
|
|
||||||
// Checks for SVG support
|
// Checks for SVG support
|
||||||
window.isSvgBrowser = true;
|
window.isSvgBrowser = true;
|
||||||
|
|||||||
165
resources/assets/statics/public/js/drawio/js/grapheditor/Dark.js
vendored
Normal file
165
resources/assets/statics/public/js/drawio/js/grapheditor/Dark.js
vendored
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
var Dark = {
|
||||||
|
utils: {
|
||||||
|
filter: '-webkit-filter: url(#dark-mode-filter) !important; filter: url(#dark-mode-filter) !important;',
|
||||||
|
reverseFilter: '-webkit-filter: url(#dark-mode-reverse-filter) !important; filter: url(#dark-mode-reverse-filter) !important;',
|
||||||
|
noneFilter: '-webkit-filter: none !important; filter: none !important;',
|
||||||
|
|
||||||
|
addExtraStyle() {
|
||||||
|
try {
|
||||||
|
return '';
|
||||||
|
} catch (e) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
addStyle(id, tag, css) {
|
||||||
|
tag = tag || 'style';
|
||||||
|
let doc = document, styleDom = doc.getElementById(id);
|
||||||
|
if (styleDom) return;
|
||||||
|
let style = doc.createElement(tag);
|
||||||
|
style.rel = 'stylesheet';
|
||||||
|
style.id = id;
|
||||||
|
tag === 'style' ? style.innerHTML = css : style.href = css;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
},
|
||||||
|
|
||||||
|
getClassList(node) {
|
||||||
|
return node.classList || [];
|
||||||
|
},
|
||||||
|
|
||||||
|
addClass(node, name) {
|
||||||
|
this.getClassList(node).add(name);
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
removeClass(node, name) {
|
||||||
|
this.getClassList(node).remove(name);
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
hasClass(node, name) {
|
||||||
|
return this.getClassList(node).contains(name);
|
||||||
|
},
|
||||||
|
|
||||||
|
hasElementById(eleId) {
|
||||||
|
return document.getElementById(eleId);
|
||||||
|
},
|
||||||
|
|
||||||
|
removeElementById(eleId) {
|
||||||
|
let ele = document.getElementById(eleId);
|
||||||
|
ele && ele.parentNode.removeChild(ele);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
createDarkFilter() {
|
||||||
|
if (this.utils.hasElementById('dark-mode-svg')) return;
|
||||||
|
let svgDom = '<svg id="dark-mode-svg" style="height: 0; width: 0;"><filter id="dark-mode-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.283 -0.567 -0.567 0.000 0.925 -0.567 0.283 -0.567 0.000 0.925 -0.567 -0.567 0.283 0.000 0.925 0.000 0.000 0.000 1.000 0.000"></feColorMatrix></filter><filter id="dark-mode-reverse-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.333 -0.667 -0.667 0.000 1.000 -0.667 0.333 -0.667 0.000 1.000 -0.667 -0.667 0.333 0.000 1.000 0.000 0.000 0.000 1.000 0.000"></feColorMatrix></filter></svg>';
|
||||||
|
let div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
|
||||||
|
div.innerHTML = svgDom;
|
||||||
|
let frag = document.createDocumentFragment();
|
||||||
|
while (div.firstChild)
|
||||||
|
frag.appendChild(div.firstChild);
|
||||||
|
document.head.appendChild(frag);
|
||||||
|
},
|
||||||
|
|
||||||
|
createDarkStyle() {
|
||||||
|
this.utils.addStyle('dark-mode-style', 'style', `
|
||||||
|
@media screen {
|
||||||
|
html {
|
||||||
|
${this.utils.filter}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default Reverse rule */
|
||||||
|
img,
|
||||||
|
video,
|
||||||
|
iframe,
|
||||||
|
canvas,
|
||||||
|
:not(object):not(body) > embed,
|
||||||
|
object,
|
||||||
|
svg image {
|
||||||
|
${this.utils.reverseFilter}
|
||||||
|
}
|
||||||
|
|
||||||
|
[style*="background:url"] *,
|
||||||
|
[style*="background-image:url"] *,
|
||||||
|
[style*="background: url"] *,
|
||||||
|
[style*="background-image: url"] *,
|
||||||
|
input,
|
||||||
|
[background] *,
|
||||||
|
twitterwidget .NaturalImage-image {
|
||||||
|
${this.utils.noneFilter}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text contrast */
|
||||||
|
html {
|
||||||
|
text-shadow: 0 0 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Full screen */
|
||||||
|
.no-filter,
|
||||||
|
:-webkit-full-screen,
|
||||||
|
:-webkit-full-screen *,
|
||||||
|
:-moz-full-screen,
|
||||||
|
:-moz-full-screen *,
|
||||||
|
:fullscreen,
|
||||||
|
:fullscreen * {
|
||||||
|
${this.utils.noneFilter}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Page background */
|
||||||
|
html {
|
||||||
|
background: #fff !important;
|
||||||
|
}
|
||||||
|
${this.utils.addExtraStyle()}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.no-print {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
enableDarkMode() {
|
||||||
|
if (this.isDarkEnabled()) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.createDarkFilter();
|
||||||
|
this.createDarkStyle();
|
||||||
|
this.utils.addClass(document.body, "dark-mode-reverse")
|
||||||
|
},
|
||||||
|
|
||||||
|
disableDarkMode() {
|
||||||
|
if (!this.isDarkEnabled()) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.utils.removeElementById('dark-mode-svg');
|
||||||
|
this.utils.removeElementById('dark-mode-style');
|
||||||
|
this.utils.removeClass(document.body, "dark-mode-reverse")
|
||||||
|
},
|
||||||
|
|
||||||
|
autoDarkMode() {
|
||||||
|
let darkScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||||
|
if (darkScheme) {
|
||||||
|
this.enableDarkMode()
|
||||||
|
} else {
|
||||||
|
this.disableDarkMode()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
isDarkEnabled() {
|
||||||
|
return this.utils.hasClass(document.body, "dark-mode-reverse")
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
switch (window.mxTheme) {
|
||||||
|
case 'dark':
|
||||||
|
Dark.enableDarkMode();
|
||||||
|
break;
|
||||||
|
case 'light':
|
||||||
|
Dark.disableDarkMode();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
Dark.autoDarkMode();
|
||||||
|
break;
|
||||||
|
}
|
||||||
@ -33,3 +33,4 @@ window.mxBasePath = window.mxBasePath || 'mxgraph';
|
|||||||
window.mxImageBasePath = window.mxImageBasePath || 'mxgraph/images';
|
window.mxImageBasePath = window.mxImageBasePath || 'mxgraph/images';
|
||||||
window.mxLanguage = window.mxLanguage || urlParams['lang'];
|
window.mxLanguage = window.mxLanguage || urlParams['lang'];
|
||||||
window.mxLanguages = window.mxLanguages || ['de', 'se'];
|
window.mxLanguages = window.mxLanguages || ['de', 'se'];
|
||||||
|
window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user