diff --git a/public/js/drawio/index.html b/public/js/drawio/index.html
index 8171bf784..b35da59d5 100644
--- a/public/js/drawio/index.html
+++ b/public/js/drawio/index.html
@@ -2,20 +2,13 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Flowchart Maker &amp; Online Diagram Software</title>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta name="Description" content="diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
-    <meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
-    <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">
+    <title>Grapheditor</title>
+    <!--[if IE]>
+    <meta http-equiv="X-UA-Compatible" content="IE=5,IE=9">
+    <![endif]-->
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <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">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="theme-color" content="#d89000">
+    <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
     <script type="text/javascript">
         /**
          * URL Parameters and protocol description are here:
@@ -342,16 +335,6 @@
             }
         };
     </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">
         body { overflow:hidden; }
         div.picker { z-index: 10007; }
@@ -423,7 +406,7 @@
 <div id="geInfo">
     <div class="geBlock"></div>
 </div>
-
+<script type="text/javascript" src="./js/grapheditor/Dark.js"></script>
 <script type="text/javascript">
     /**
      * Main
diff --git a/public/js/drawio/js/diagramly/Init.js b/public/js/drawio/js/diagramly/Init.js
index a4cd01d16..b11166736 100644
--- a/public/js/drawio/js/diagramly/Init.js
+++ b/public/js/drawio/js/diagramly/Init.js
@@ -11,6 +11,7 @@ window.isLocalStorage = window.isLocalStorage || false;
 
 // Disables loading settings in configured mode
 window.mxLoadSettings = window.mxLoadSettings || urlParams['configure'] != '1';
+window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
 
 // Checks for SVG support
 window.isSvgBrowser = true;
diff --git a/public/js/drawio/js/grapheditor/Dark.js b/public/js/drawio/js/grapheditor/Dark.js
new file mode 100644
index 000000000..cf1f1030f
--- /dev/null
+++ b/public/js/drawio/js/grapheditor/Dark.js
@@ -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;
+}
diff --git a/public/js/drawio/js/grapheditor/Init.js b/public/js/drawio/js/grapheditor/Init.js
index 0272e2ef7..0e5d4b5b2 100644
--- a/public/js/drawio/js/grapheditor/Init.js
+++ b/public/js/drawio/js/grapheditor/Init.js
@@ -33,3 +33,4 @@ window.mxBasePath = window.mxBasePath || 'mxgraph';
 window.mxImageBasePath = window.mxImageBasePath || 'mxgraph/images';
 window.mxLanguage = window.mxLanguage || urlParams['lang'];
 window.mxLanguages = window.mxLanguages || ['de', 'se'];
+window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
diff --git a/public/js/drawio/stencils/clipart/Gear_128x128.png b/public/js/drawio/stencils/clipart/Gear_128x128.png
index 40d373515..a44e376c3 100644
Binary files a/public/js/drawio/stencils/clipart/Gear_128x128.png and b/public/js/drawio/stencils/clipart/Gear_128x128.png differ
diff --git a/resources/assets/statics/public/js/drawio/images/manifest.json b/resources/assets/statics/public/js/drawio/images/manifest.json
index 5182c6f55..b18bb2471 100644
--- a/resources/assets/statics/public/js/drawio/images/manifest.json
+++ b/resources/assets/statics/public/js/drawio/images/manifest.json
@@ -1,5 +1,5 @@
 {
-    "name": "diagrams.net",
+    "name": "",
     "short_name": "Diagrams",
     "description": "diagrams.net is a completely free diagram editor",
     "icons": [
diff --git a/resources/assets/statics/public/js/drawio/index.html b/resources/assets/statics/public/js/drawio/index.html
index 8171bf784..b35da59d5 100644
--- a/resources/assets/statics/public/js/drawio/index.html
+++ b/resources/assets/statics/public/js/drawio/index.html
@@ -2,20 +2,13 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Flowchart Maker &amp; Online Diagram Software</title>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta name="Description" content="diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
-    <meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
-    <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">
+    <title>Grapheditor</title>
+    <!--[if IE]>
+    <meta http-equiv="X-UA-Compatible" content="IE=5,IE=9">
+    <![endif]-->
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <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">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="theme-color" content="#d89000">
+    <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
     <script type="text/javascript">
         /**
          * URL Parameters and protocol description are here:
@@ -342,16 +335,6 @@
             }
         };
     </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">
         body { overflow:hidden; }
         div.picker { z-index: 10007; }
@@ -423,7 +406,7 @@
 <div id="geInfo">
     <div class="geBlock"></div>
 </div>
-
+<script type="text/javascript" src="./js/grapheditor/Dark.js"></script>
 <script type="text/javascript">
     /**
      * Main
diff --git a/resources/assets/statics/public/js/drawio/js/diagramly/Init.js b/resources/assets/statics/public/js/drawio/js/diagramly/Init.js
index a4cd01d16..b11166736 100644
--- a/resources/assets/statics/public/js/drawio/js/diagramly/Init.js
+++ b/resources/assets/statics/public/js/drawio/js/diagramly/Init.js
@@ -11,6 +11,7 @@ window.isLocalStorage = window.isLocalStorage || false;
 
 // Disables loading settings in configured mode
 window.mxLoadSettings = window.mxLoadSettings || urlParams['configure'] != '1';
+window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
 
 // Checks for SVG support
 window.isSvgBrowser = true;
diff --git a/resources/assets/statics/public/js/drawio/js/grapheditor/Dark.js b/resources/assets/statics/public/js/drawio/js/grapheditor/Dark.js
new file mode 100644
index 000000000..cf1f1030f
--- /dev/null
+++ b/resources/assets/statics/public/js/drawio/js/grapheditor/Dark.js
@@ -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;
+}
diff --git a/resources/assets/statics/public/js/drawio/js/grapheditor/Init.js b/resources/assets/statics/public/js/drawio/js/grapheditor/Init.js
index 0272e2ef7..0e5d4b5b2 100644
--- a/resources/assets/statics/public/js/drawio/js/grapheditor/Init.js
+++ b/resources/assets/statics/public/js/drawio/js/grapheditor/Init.js
@@ -33,3 +33,4 @@ window.mxBasePath = window.mxBasePath || 'mxgraph';
 window.mxImageBasePath = window.mxImageBasePath || 'mxgraph/images';
 window.mxLanguage = window.mxLanguage || urlParams['lang'];
 window.mxLanguages = window.mxLanguages || ['de', 'se'];
+window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
