feat: add themes and custom color options

feat: add italian translation

styles/dark-theme.css

@@ -8,7 +8,7 @@ body > header {
 }
 
 header .logo .logo-image {
-    background-image: url("../images/wallossolidwhite.png");
+    background-image: url("../images/siteicons/blue/walloswhite.png");
 }
 
 .split-header > h2 .header-subtitle {
@@ -96,6 +96,10 @@ input[type="button"].secondary-button:hover {
     background-color: #111;
 }
 
+input[type="color"] {
+    background-color: #F2F2F2;
+}
+
 .avatar-select .avatar-list .remove-avatar {
     background-color: #222;
 }
@@ -133,7 +137,7 @@ input[type="button"].secondary-button:hover {
 }
 
 .logo-preview:after {
-    color: #007bff;
+    color: var(--main-color);
 }
 
 .sort-options > ul > li {

styles/login.css

@@ -94,7 +94,7 @@ input[type="submit"] {
     width: 100%;
     padding: 15px;
     font-size: 16px;
-    background-color: #007bff;
+    background-color: var(--main-color);
     color: #fff;
     border: none;
     border-radius: 8px;
@@ -102,7 +102,7 @@ input[type="submit"] {
 }
 
 input[type="submit"]:hover {
-    background-color: #0056b3;
+    background-color: var(--hover-color);
 }
 
 input[type="checkbox"] {
@@ -120,6 +120,6 @@ input[type="checkbox"] {
 
 .error {
     display: block;
-    color: red;
+    color: var(--error-color);
     margin-bottom: 20px;
 }

styles/styles.css

@@ -52,7 +52,7 @@ h2, h3 {
 }
   
 body > header {
-  border-bottom: 7px solid #007bff;
+  border-bottom: 7px solid var(--main-color);
   background-color: white;
 }
 
@@ -67,7 +67,7 @@ header .logo .logo-image {
   height: 50px;
   width: 134px;
   margin-right: 10px;
-  background-image: url("../images/wallossolid.png");
+  background-image: url("../images/siteicons/blue/wallos.png");
   background-size: 100%;
 }
 
@@ -193,8 +193,8 @@ main > .contain {
   cursor: pointer;
   user-select: none;
   color: #fff;
-  border: 1px solid #007bff;
-  background-color: #007bff;
+  border: 1px solid var(--main-color);
+  background-color: var(--main-color);
   padding: 15px 30px;
   font-size: 1rem;
   border-radius: 8px;
@@ -203,8 +203,8 @@ main > .contain {
 }
 
 .button:hover {
-  background-color: #0056b3;
-  border-color: #0056b3;
+  background-color: var(--hover-color);
+  border-color: var(--hover-color);
 }
 
 .button.thin {
@@ -229,7 +229,7 @@ main > .contain {
   margin-top: -35px;
   position: relative;
   z-index: 2;
-  color: #007bff;
+  color: var(--main-color);
   font-size: 20px;
 }
 
@@ -603,17 +603,17 @@ header #avatar {
   justify-content: center;
   width: 60px;
   height: 60px;
-  border: 1px solid #007bff;
+  border: 1px solid var(--main-color);
   border-radius: 50%;
   cursor: pointer;
   margin: 0px;
   box-sizing: border-box;
-  color: #007bff;
+  color: var(--main-color);
 }
 
 .avatar-select label.add-avatar:hover {
-  border-color: #8FBFFA;
-  color: #8FBFFA;
+  border-color: var(--accent-color);
+  color: var(--accent-color);
 }
 
 .avatar-select .avatar-list .remove-avatar {
@@ -667,7 +667,7 @@ header #avatar {
 }
 
 .image-button > i {
-  color: #0056b3;
+  color: var(--hover-color);
   font-size: 28px;
   padding: 2px;
 }
@@ -709,7 +709,7 @@ header #avatar {
   flex-direction: row;
   align-items: center;
   gap: 8px;
-  background-color: #8FBFFA;
+  background-color: var(--accent-color);
   padding: 6px 12px;
   border-radius: 8px;
   transition: filter 300ms;
@@ -766,17 +766,17 @@ header #avatar {
 .settings-notes > p > span > a {
   margin-left: 5px;
   font-size: 13px;
-  color: #8FBFFA;
+  color: var(--accent-color);
 }
 
 .credits-list > p > span > a:visited,
 .settings-notes > p > span > a:visited {
-  color: #8FBFFA;
+  color: var(--accent-color);
 }
 
 .settings-notes > p > i,
 .account-section .notes > p > i {
-  color: #007bff;
+  color: var(--main-color);
   margin-right: 5px;
 } 
 
@@ -844,6 +844,19 @@ select {
   box-sizing: border-box;
 }
 
+input[type="color"] {
+  height: 46px;
+  width: 46px;
+  background-color: #222;
+  border: 1px solid var(--hover-color);
+  outline: none;  
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: 16px;
+  position: relative;
+  border-radius: 5px;
+}
+
 .one-third {
   max-width: 33%;
 }
@@ -874,26 +887,26 @@ input[type="button"],
 button.button {
   padding: 12px 30px;
   font-size: 16px;
-  background-color: #007bff;
+  background-color: var(--main-color);
   color: #fff;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   box-sizing: border-box;
-  border: 2px solid #007bff;
+  border: 2px solid var(--main-color);
 }
 
 input[type="button"].secondary-button,
 button.button.secondary-button {
   background-color: #FFFFFF;
-  color: #007bff;
+  color: var(--main-color);
 }
 
 input[type="button"].secondary-button:hover,
 button.button.secondary-button:hover {
   background-color: #EEEEEE;
-  color: #0056b3;
-  border-color: #0056b3;
+  color: var(--hover-color);
+  border-color: var(--hover-color);
 }
 
 input[type="button"].warning-button {
@@ -907,8 +920,8 @@ input[type="button"].warning-button:hover {
 }
 
 input[type="submit"]:hover {
-  background-color: #0056b3;
-  border-color: #0056b3;
+  background-color: var(--hover-color);
+  border-color: var(--hover-color);
 }
 
 input[type="submit"]:disabled,
@@ -1113,7 +1126,7 @@ input[type="text"]:disabled {
   justify-content: center;
   align-items: center;
   height: 100%;
-  color: #0056b3;
+  color: var(--hover-color);
   font-size: 16px;
   text-align: center;
 }
@@ -1141,7 +1154,7 @@ input[type="text"]:disabled {
   justify-content: center;
   align-items: center;
   height: 100%;
-  color: #0056b3;
+  color: var(--hover-color);
   font-size: 16px;
   text-align: center;
 }
@@ -1281,11 +1294,11 @@ input[type="text"]:disabled {
 }
 
 .toast-content .toast-icon.error {
-  background-color: #f45a40;
+  background-color: var(--error-color);
 }
 
 .toast-content .toast-icon.success {
-  background-color: #188823;
+  background-color: var(--success-color);
 }
 
 
@@ -1338,11 +1351,11 @@ input[type="text"]:disabled {
 }
 
 .toast .progress.error:before {
-  background-color: #f45a40;
+  background-color: var(--error-color);
 }
 
 .toast .progress.success:before {
-  background-color: #188823;
+  background-color: var(--success-color);
 }
 
 .progress.active:before {
@@ -1401,7 +1414,7 @@ input[type="text"]:disabled {
 
 .statistic > span {
   font-size: 42px;
-  color: #0056b3; 
+  color: var(--hover-color); 
 }
 
 .statistic > .title {
@@ -1411,7 +1424,7 @@ input[type="text"]:disabled {
 
 .statistic > .subtitle {
   font-size: 25px;
-  color: #8FBFFA;
+  color: var(--accent-color);
   margin-top: 10px;
   text-align: center;
 }
@@ -1486,8 +1499,8 @@ input[type="text"]:disabled {
 
 .sortable-list .sortable-ghost {
   border-radius: 16px;
-  background-color: #c1d9f7;
-  border: 1px solid #8FBFFA;
+  background-color: rgba(var(--accent-color-rgb), 0.6);
+  border: 1px solid var(--accent-color);
 }
 
 /* Fitler dropdown */
@@ -1567,7 +1580,7 @@ input[type="text"]:disabled {
 }
 
 .filtermenu-content .filter-title.filter-clear {
-  color: #0056b3;
+  color: var(--hover-color);
   font-weight: normal;
   border-bottom: none;
 }
@@ -1588,3 +1601,115 @@ input[type="text"]:disabled {
 .filtermenu-submenu-content.is-open {
   display: block;
 }
+
+/* Theme Selector */
+
+.theme-selector {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.theme-preview {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 20px 15px 20px 10px;
+}
+
+.theme-preview.is-selected {
+  border: 1px solid var(--main-color);
+}
+
+.theme-preview:hover {
+  background-color: rgba(var(--accent-color-rgb), 0.6);
+}
+
+.theme-preview > .main-color,
+.theme-preview > .accent-color,
+.theme-preview > .hover-color {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  border: 1px solid #FFF;
+}
+
+.theme-preview.blue > .main-color {
+  background-color: #007bff;
+}
+
+.theme-preview.blue > .accent-color {
+  background-color: #8fbffa;
+}
+
+.theme-preview.blue > .hover-color {
+  background-color: #0056b3;
+}
+
+.theme-preview.green > .main-color {
+  background-color: #6B8E23;
+}
+
+.theme-preview.green > .accent-color {
+  background-color: #9ACD32;
+}
+
+.theme-preview.green > .hover-color {
+  background-color: #556B2F;
+}
+
+.theme-preview.red > .main-color {
+  background-color: #f45a40;
+}
+
+.theme-preview.red > .accent-color {
+  background-color: #f79988;
+}
+
+.theme-preview.red > .hover-color {
+  background-color: #c73f29;
+}
+
+.theme-preview.yellow > .main-color {
+  background-color: #ffae00;
+}
+
+.theme-preview.yellow > .accent-color {
+  background-color: #faea8f;
+}
+
+.theme-preview.yellow > .hover-color {
+  background-color: #cd930c;
+}
+
+.color-picker-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+
+}
+
+.color-picker {
+  flex-shrink: 0;
+}
+
+.color-picker::before {
+  color: var(--hover-color);
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    border: 1px solid;
+    border-radius: 15px;
+    background-color: white;
+    padding: 4px;
+}
+
+.wrap {
+  flex-wrap: wrap;
+}

styles/theme.css

@@ -0,0 +1,12 @@
+:root {
+    --main-color: #007bff;
+    --main-color-rgb: 0, 123, 255;
+    --accent-color: #8fbffa;
+    --accent-color-rgb: 143, 191, 250;
+    --hover-color: #0056b3;
+    --hover-color-rgb: 0, 86, 179;
+    --error-color: #f45a40;
+    --error-color-rgb: 244, 90, 64;
+    --success-color: #188823;
+    --success-color-rgb: 24, 136, 35;
+}

styles/themes/green.css

@@ -0,0 +1,21 @@
+:root {
+    --main-color: #6B8E23; /* Dark Olive Green */
+    --main-color-rgb: 107, 142, 35;
+    --accent-color: #9ACD32; /* Yellow-Green */
+    --accent-color-rgb: 154, 205, 50;
+    --hover-color: #556B2F; /* Olive Drab */
+    --hover-color-rgb: 85, 107, 47;
+}
+
+header .logo .logo-image {
+    background-image: url("../../images/siteicons/green/wallos.png");
+}
+
+.dark header .logo .logo-image {
+    background-image: url("../../images/siteicons/green/walloswhite.png");
+}
+
+.sort-options > ul > li.selected,
+.filtermenu-content .filter-item.selected {
+    background-image: url("../../images/siteicons/green/check.png");
+}

styles/themes/red.css

@@ -0,0 +1,21 @@
+:root {
+    --main-color: #f45a40;
+    --main-color-rgb: 244, 90, 64;
+    --accent-color: #f79988;
+    --accent-color-rgb: 239, 134, 116;
+    --hover-color: #c73f29;
+    --hover-color-rgb: 199, 63, 41;
+}
+
+header .logo .logo-image {
+    background-image: url("../../images/siteicons/red/wallos.png");
+}
+
+.dark header .logo .logo-image {
+    background-image: url("../../images/siteicons/red/walloswhite.png");
+}
+
+.sort-options > ul > li.selected,
+.filtermenu-content .filter-item.selected {
+    background-image: url("../../images/siteicons/red/check.png");
+}

styles/themes/yellow.css

@@ -0,0 +1,21 @@
+:root {
+    --main-color: #ffae00;
+    --main-color-rgb: 255, 174, 0;
+    --accent-color: #faea8f;
+    --accent-color-rgb: 250, 234, 143;
+    --hover-color: #cd930c;
+    --hover-color-rgb: 179, 124, 0;
+}
+
+header .logo .logo-image {
+    background-image: url("../../images/siteicons/yellow/wallos.png");
+}
+
+.dark header .logo .logo-image {
+    background-image: url("../../images/siteicons/yellow/walloswhite.png");
+}
+
+.sort-options > ul > li.selected,
+.filtermenu-content .filter-item.selected {
+    background-image: url("../../images/siteicons/yellow/check.png");
+}