diff --git a/public/assets/darkMode.svg b/public/assets/darkMode.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3cea18884930178179b9b34a6f7c2e62a73b53d7
--- /dev/null
+++ b/public/assets/darkMode.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/public/css/dark-mode.css b/public/css/dark-mode.css
new file mode 100644
index 0000000000000000000000000000000000000000..994194b9902755c46b92e1434011e1512728dfca
--- /dev/null
+++ b/public/css/dark-mode.css
@@ -0,0 +1,70 @@
+body.dark-mode {
+ background: #343434;
+ color: white
+}
+
+body.dark-mode abbr[title] {
+ border-bottom-color: white
+}
+
+body.dark-mode .canvas-container {
+ background-color: white
+}
+
+/* Left buttons */
+body.dark-mode .accordion {
+ background-color: #343434;;
+ color: #fefefe;
+}
+
+/* Right buttons */
+body.dark-mode button {
+ background-color: #767676;
+}
+
+/* The 'title' class of the accordion, when in dark mode, becomes white and bold
+ for a better result. */
+body.dark-mode .accordion-title {
+ color: #fefefe;
+ font-weight: bold;
+}
+
+/* Adds shadow to images */
+body.dark-mode img {
+ -webkit-filter: drop-shadow(0px 1px 7px rgba(211, 211, 255, 0.4));
+ -moz-filter: drop-shadow(0px 1px 7px rgba(211, 211, 255, 0.4));
+ -ms-filter: drop-shadow(0px 1px 7px rgba(211, 211, 255, 0.4));
+ -o-filter: drop-shadow(0px 1px 7px rgba(211, 211, 255, 0.4));
+ filter: drop-shadow(0px 1px 7px rgba(211, 211, 255, 0.4));
+}
+
+
+
+/* Sets the background color of the accordion to dark */
+body.dark-mode .accordion-content {
+ background-color: #292929;
+}
+
+body.dark-mode .accordion-title:hover,
+body.dark-mode .accordion-title:focus {
+ background-color: #7a7a7a;
+}
+
+body.dark-mode .button-group.hollow .button, .button-group.hollow .button.disabled, .button-group.hollow .button[disabled], .button-group.hollow .button.disabled:hover, .button-group.hollow .button[disabled]:hover, .button-group.hollow .button.disabled:focus, .button-group.hollow .button[disabled]:focus {
+ border: 1px solid white;
+ color: #1779ba;
+}
+
+#tools .button img {
+ max-height: 50%;
+ max-width: 50%;
+ min-width: 21px;
+ min-height: 21px;
+}
+
+
+
+
+
+
+
diff --git a/public/index.html b/public/index.html
index 891c4a64a222d41f15ec2f27b68e1d9beb90e73a..6dce22bdca6c2a12f24e089b08e70e4df6f9013d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,6 +11,7 @@
+
@@ -28,6 +29,9 @@
+
diff --git a/public/js/app.js b/public/js/app.js
index cc8bc7cf8aa1b4046187d84dd6ffb051944b91e5..3966097770b8b4544759037acc7bda0abf180ff5 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -95,6 +95,11 @@ function shape(type, width = 100, height = 100, left = 50, top = 50) {
canvas.setActiveObject(shape);
}
+// Dark mode toggle
+function darkMode() {
+ var body = document.body;
+ body.classList.toggle('dark-mode');
+}
/*
objectsMenu.forEach(function(e) {