From d67ff41c5ec11106009685b7af54fcaa1a103fb5 Mon Sep 17 00:00:00 2001 From: Alvaro Escarti Date: Tue, 16 Apr 2024 00:21:31 +0200 Subject: [PATCH 01/17] Added Dark Mode --- public/css/foundation.css | 36 ++++++++++++++++++++++++++++++++++++ public/index.html | 1 + public/js/app.js | 5 +++++ 3 files changed, 42 insertions(+) diff --git a/public/css/foundation.css b/public/css/foundation.css index 77f9152..8e705d4 100644 --- a/public/css/foundation.css +++ b/public/css/foundation.css @@ -236,6 +236,42 @@ body { -moz-osx-font-smoothing: grayscale; } +body.dark-mode { + background: #0a0a0a; + color: #fefefe; +} + +/* This code applies an invert filter to images when the body has the "dark-mode" class, +effectively inverting the colors of the images. */ + +body.dark-mode img { + filter: invert(1); +} + +body.dark-mode hr { + border-color: #fefefe; +} + +body.dark-mode pre { + background: #0a0a0a; + color: #fefefe; +} + +body.dark-mode code, +body.dark-mode kbd, +body.dark-mode samp { + background: #0a0a0a; + color: #fefefe; +} + +body.dark-mode abbr[title] { + border-bottom-color: #fefefe; +} + +body.dark-mode .aboutgitlab a { + color: #fefefe; +} + img { display: inline-block; vertical-align: middle; diff --git a/public/index.html b/public/index.html index a30760b..f43436b 100644 --- a/public/index.html +++ b/public/index.html @@ -27,6 +27,7 @@ + diff --git a/public/js/app.js b/public/js/app.js index 93e43cf..5824e21 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -193,6 +193,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) { -- GitLab From 4999e7b3ab333ea635d21bf267373d637a9699c7 Mon Sep 17 00:00:00 2001 From: Alvaro Escarti Date: Tue, 16 Apr 2024 13:45:05 +0200 Subject: [PATCH 02/17] fixing the dark mode and adding a shadow to the images --- public/css/dark-mode.css | 55 ++++++++++++++++++++++++++++++++++++++ public/css/foundation.css | 36 ------------------------- public/img/iconDark.png | Bin 0 -> 681 bytes public/index.html | 6 ++++- 4 files changed, 60 insertions(+), 37 deletions(-) create mode 100644 public/css/dark-mode.css create mode 100644 public/img/iconDark.png diff --git a/public/css/dark-mode.css b/public/css/dark-mode.css new file mode 100644 index 0000000..fbae553 --- /dev/null +++ b/public/css/dark-mode.css @@ -0,0 +1,55 @@ +body.dark-mode { + background: #343434; + color: #fefefe; +} + +body.dark-mode abbr[title] { + border-bottom-color: #fefefe; +} + +body.dark-mode .canvas-container { + background-color: #fff; +} + +/* Left buttons */ +body.dark-mode .accordion { + background-color: #A9A9A9; +} + +/* Right buttons */ +body.dark-mode button { + background-color: #A9A9A9; +} + +/* 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 16px 10px rgba(134, 134, 173, 0.6)); + -moz-filter: drop-shadow(0px 16px 10px rgba(134, 134, 173, 0.6)); + -ms-filter: drop-shadow(0px 16px 10px rgba(134, 134, 173, 0.6)); + -o-filter: drop-shadow(0px 16px 10px rgba(134, 134, 173, 0.6)); + filter: drop-shadow(0px 16px 10px rgba(134, 134, 173, 0.6)); +} + +.iconDark { + position: absolute; + top: 20px; + right: 20px; +} + +/* Inverts the colors of the icon in dark mode */ +body.dark-mode .iconDark { + filter: invert(1); +} + + + + + + diff --git a/public/css/foundation.css b/public/css/foundation.css index 8e705d4..77f9152 100644 --- a/public/css/foundation.css +++ b/public/css/foundation.css @@ -236,42 +236,6 @@ body { -moz-osx-font-smoothing: grayscale; } -body.dark-mode { - background: #0a0a0a; - color: #fefefe; -} - -/* This code applies an invert filter to images when the body has the "dark-mode" class, -effectively inverting the colors of the images. */ - -body.dark-mode img { - filter: invert(1); -} - -body.dark-mode hr { - border-color: #fefefe; -} - -body.dark-mode pre { - background: #0a0a0a; - color: #fefefe; -} - -body.dark-mode code, -body.dark-mode kbd, -body.dark-mode samp { - background: #0a0a0a; - color: #fefefe; -} - -body.dark-mode abbr[title] { - border-bottom-color: #fefefe; -} - -body.dark-mode .aboutgitlab a { - color: #fefefe; -} - img { display: inline-block; vertical-align: middle; diff --git a/public/img/iconDark.png b/public/img/iconDark.png new file mode 100644 index 0000000000000000000000000000000000000000..54d9c4e939a3388a63409bed81465f29ba56e711 GIT binary patch literal 681 zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4mJh`hT^KKFANL}EX7WqAsieW95oy%9SjT% zoCO|{#S9D#Z$Ox_QloG$0|SF(iEBhjaDG}zd16s2LwR|*US?i)adKios$PCk`s{Z$ zQVa}CYMw5RArY;6uUq?vIEt`;xUZMsBqFp}anaO|+6(ro*-5cx`sQqPs0rEEmHTq* z(#w9Xt^z(=mVOZKh~i|rcI|G+J*A)d2CF4ZSV*!b$%!j~Ot zRv8uAYKNamXg)h__4|4BMdjA2Z9R`Gn(bpt9+cm(2|UKA=^TA;3|5mWZEm4M3cISzJOo!-6MrBgJlh^Zq->~XhT6lqZ zMpL;}%5soTwF*naR#Qvqd@w(#XhUkrA$@z8_zns&wO18Xl5UqYxZU19^?%`tF zjPh+KOb)G+Q8-!?`s=e>#Dqf|Ctq5paNAc>?ofd+`#eui%RRwM=e}Z&RF{c396smt zL&@n*8^X3QS1&pJO3}}obGxW{^EU^p#x&0#{FR;-5B?j?3D-WXy<=5aTX9hNTK&U~ zY`e6}0$6XGE{a=uCG3jSMe#df*>77-7wrj)nY5`kB75zQrZqQHznHa8^YonA{@wRQ z?({@!{z*