From: SleeplessOne1917 <abias1122@gmail.com>
Date: Fri, 7 Jul 2023 18:27:25 +0000 (+0000)
Subject: Darkly tweak (#1811)
X-Git-Url: http://these/git/%7BtotpUrl%7D?a=commitdiff_plain;h=45333d8c10f335aad432ecf13a46ee38bbd9ac07;p=lemmy-ui.git

Darkly tweak (#1811)

* Make outline buttons have better contrast in dark themes

* Change secondary color for darkly themes

* Put compact styles back to how they were before

* Forgot to build themes
---

diff --git a/src/assets/css/themes/_variables.darkly-pureblack.scss b/src/assets/css/themes/_variables.darkly-pureblack.scss
index 816118e..9106b69 100644
--- a/src/assets/css/themes/_variables.darkly-pureblack.scss
+++ b/src/assets/css/themes/_variables.darkly-pureblack.scss
@@ -18,7 +18,7 @@ $green: #00bc8c;
 $cyan: #3498db;
 
 $primary: $green;
-$secondary: $gray-700;
+$secondary: $gray-600;
 $success: $green;
 $dark: $gray-300;
 
diff --git a/src/assets/css/themes/_variables.darkly-red.scss b/src/assets/css/themes/_variables.darkly-red.scss
index 691678a..29c959f 100644
--- a/src/assets/css/themes/_variables.darkly-red.scss
+++ b/src/assets/css/themes/_variables.darkly-red.scss
@@ -1,7 +1,6 @@
 @import "variables.darkly";
 
 $primary: $blue;
-$secondary: #444;
 $light: $gray-800;
 
 $link-color: $red;
diff --git a/src/assets/css/themes/_variables.darkly.scss b/src/assets/css/themes/_variables.darkly.scss
index e0762a9..5e38439 100644
--- a/src/assets/css/themes/_variables.darkly.scss
+++ b/src/assets/css/themes/_variables.darkly.scss
@@ -17,7 +17,7 @@ $green: #00bc8c;
 $cyan: #3498db;
 
 $primary: $green;
-$secondary: $gray-700;
+$secondary: $gray-500;
 $success: $green;
 $dark: $gray-300;
 
diff --git a/src/assets/css/themes/darkly-compact.css b/src/assets/css/themes/darkly-compact.css
index 5061c10..02f7ee7 100644
--- a/src/assets/css/themes/darkly-compact.css
+++ b/src/assets/css/themes/darkly-compact.css
@@ -70,7 +70,7 @@ hr.my-3 {
   --bs-gray-800: #303030;
   --bs-gray-900: #222;
   --bs-primary: #00bc8c;
-  --bs-secondary: #444;
+  --bs-secondary: #adb5bd;
   --bs-success: #00bc8c;
   --bs-info: #3498db;
   --bs-warning: #f39c12;
@@ -78,7 +78,7 @@ hr.my-3 {
   --bs-light: #303030;
   --bs-dark: #dee2e6;
   --bs-primary-rgb: 0, 188, 140;
-  --bs-secondary-rgb: 68, 68, 68;
+  --bs-secondary-rgb: 173, 181, 189;
   --bs-success-rgb: 0, 188, 140;
   --bs-info-rgb: 52, 152, 219;
   --bs-warning-rgb: 243, 156, 18;
@@ -86,7 +86,7 @@ hr.my-3 {
   --bs-light-rgb: 48, 48, 48;
   --bs-dark-rgb: 222, 226, 230;
   --bs-primary-text-emphasis: #004b38;
-  --bs-secondary-text-emphasis: #1b1b1b;
+  --bs-secondary-text-emphasis: #45484c;
   --bs-success-text-emphasis: #004b38;
   --bs-info-text-emphasis: #153d58;
   --bs-warning-text-emphasis: #613e07;
@@ -94,7 +94,7 @@ hr.my-3 {
   --bs-light-text-emphasis: #444;
   --bs-dark-text-emphasis: #444;
   --bs-primary-bg-subtle: #ccf2e8;
-  --bs-secondary-bg-subtle: #dadada;
+  --bs-secondary-bg-subtle: #eff0f2;
   --bs-success-bg-subtle: #ccf2e8;
   --bs-info-bg-subtle: #d6eaf8;
   --bs-warning-bg-subtle: #fdebd0;
@@ -102,7 +102,7 @@ hr.my-3 {
   --bs-light-bg-subtle: #fcfcfd;
   --bs-dark-bg-subtle: #ced4da;
   --bs-primary-border-subtle: #99e4d1;
-  --bs-secondary-border-subtle: #b4b4b4;
+  --bs-secondary-border-subtle: #dee1e5;
   --bs-success-border-subtle: #99e4d1;
   --bs-info-border-subtle: #aed6f1;
   --bs-warning-border-subtle: #fad7a0;
@@ -182,7 +182,7 @@ hr.my-3 {
   --bs-tertiary-bg: #292929;
   --bs-tertiary-bg-rgb: 41, 41, 41;
   --bs-primary-text-emphasis: #66d7ba;
-  --bs-secondary-text-emphasis: #8f8f8f;
+  --bs-secondary-text-emphasis: #ced3d7;
   --bs-success-text-emphasis: #66d7ba;
   --bs-info-text-emphasis: #85c1e9;
   --bs-warning-text-emphasis: #f8c471;
@@ -190,7 +190,7 @@ hr.my-3 {
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
   --bs-primary-bg-subtle: #00261c;
-  --bs-secondary-bg-subtle: #0e0e0e;
+  --bs-secondary-bg-subtle: #232426;
   --bs-success-bg-subtle: #00261c;
   --bs-info-bg-subtle: #0a1e2c;
   --bs-warning-bg-subtle: #311f04;
@@ -198,7 +198,7 @@ hr.my-3 {
   --bs-light-bg-subtle: #303030;
   --bs-dark-bg-subtle: #181818;
   --bs-primary-border-subtle: #007154;
-  --bs-secondary-border-subtle: #292929;
+  --bs-secondary-border-subtle: #686d71;
   --bs-success-border-subtle: #007154;
   --bs-info-border-subtle: #1f5b83;
   --bs-warning-border-subtle: #925e0b;
@@ -1961,13 +1961,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #000;
-  --bs-table-bg: #dadada;
-  --bs-table-border-color: #c4c4c4;
-  --bs-table-striped-bg: #cfcfcf;
+  --bs-table-bg: #eff0f2;
+  --bs-table-border-color: #d7d8da;
+  --bs-table-striped-bg: #e3e4e6;
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c4c4c4;
+  --bs-table-active-bg: #d7d8da;
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cacaca;
+  --bs-table-hover-bg: #dddee0;
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2994,20 +2994,20 @@ textarea.form-control-lg {
 }
 
 .btn-secondary {
-  --bs-btn-color: #fff;
-  --bs-btn-bg: #444;
-  --bs-btn-border-color: #444;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #3a3a3a;
-  --bs-btn-hover-border-color: #363636;
-  --bs-btn-focus-shadow-rgb: 96, 96, 96;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #363636;
-  --bs-btn-active-border-color: #333333;
+  --bs-btn-color: #000;
+  --bs-btn-bg: #adb5bd;
+  --bs-btn-border-color: #adb5bd;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #b9c0c7;
+  --bs-btn-hover-border-color: #b5bcc4;
+  --bs-btn-focus-shadow-rgb: 147, 154, 161;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #bdc4ca;
+  --bs-btn-active-border-color: #b5bcc4;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #444;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #adb5bd;
+  --bs-btn-disabled-border-color: #adb5bd;
 }
 
 .btn-success {
@@ -3130,19 +3130,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-secondary {
-  --bs-btn-color: #444;
-  --bs-btn-border-color: #444;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #444;
-  --bs-btn-hover-border-color: #444;
-  --bs-btn-focus-shadow-rgb: 68, 68, 68;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #444;
-  --bs-btn-active-border-color: #444;
+  --bs-btn-color: #adb5bd;
+  --bs-btn-border-color: #adb5bd;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #adb5bd;
+  --bs-btn-hover-border-color: #adb5bd;
+  --bs-btn-focus-shadow-rgb: 173, 181, 189;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #adb5bd;
+  --bs-btn-active-border-color: #adb5bd;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #444;
+  --bs-btn-disabled-color: #adb5bd;
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-border-color: #adb5bd;
   --bs-gradient: none;
 }
 
@@ -6777,8 +6777,8 @@ textarea.form-control-lg {
 }
 
 .text-bg-secondary {
-  color: #fff !important;
-  background-color: RGBA(68, 68, 68, var(--bs-bg-opacity, 1)) !important;
+  color: #000 !important;
+  background-color: RGBA(173, 181, 189, var(--bs-bg-opacity, 1)) !important;
 }
 
 .text-bg-success {
@@ -6825,8 +6825,8 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: RGBA(54, 54, 54, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(54, 54, 54, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(189, 196, 202, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(189, 196, 202, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-success {
diff --git a/src/assets/css/themes/darkly-pureblack.css b/src/assets/css/themes/darkly-pureblack.css
index 3fe1e91..f532a28 100644
--- a/src/assets/css/themes/darkly-pureblack.css
+++ b/src/assets/css/themes/darkly-pureblack.css
@@ -30,7 +30,7 @@
   --bs-gray-800: #202020;
   --bs-gray-900: #111;
   --bs-primary: #00bc8c;
-  --bs-secondary: #333;
+  --bs-secondary: #666;
   --bs-success: #00bc8c;
   --bs-info: #3498db;
   --bs-warning: #f39c12;
@@ -38,7 +38,7 @@
   --bs-light: #111;
   --bs-dark: #dee2e6;
   --bs-primary-rgb: 0, 188, 140;
-  --bs-secondary-rgb: 51, 51, 51;
+  --bs-secondary-rgb: 102, 102, 102;
   --bs-success-rgb: 0, 188, 140;
   --bs-info-rgb: 52, 152, 219;
   --bs-warning-rgb: 243, 156, 18;
@@ -46,7 +46,7 @@
   --bs-light-rgb: 17, 17, 17;
   --bs-dark-rgb: 222, 226, 230;
   --bs-primary-text-emphasis: #004b38;
-  --bs-secondary-text-emphasis: #141414;
+  --bs-secondary-text-emphasis: #292929;
   --bs-success-text-emphasis: #004b38;
   --bs-info-text-emphasis: #153d58;
   --bs-warning-text-emphasis: #613e07;
@@ -54,7 +54,7 @@
   --bs-light-text-emphasis: #333;
   --bs-dark-text-emphasis: #333;
   --bs-primary-bg-subtle: #ccf2e8;
-  --bs-secondary-bg-subtle: #d6d6d6;
+  --bs-secondary-bg-subtle: #e0e0e0;
   --bs-success-bg-subtle: #ccf2e8;
   --bs-info-bg-subtle: #d6eaf8;
   --bs-warning-bg-subtle: #fdebd0;
@@ -62,7 +62,7 @@
   --bs-light-bg-subtle: #f6f6f7;
   --bs-dark-bg-subtle: #ced4da;
   --bs-primary-border-subtle: #99e4d1;
-  --bs-secondary-border-subtle: #adadad;
+  --bs-secondary-border-subtle: #c2c2c2;
   --bs-success-border-subtle: #99e4d1;
   --bs-info-border-subtle: #aed6f1;
   --bs-warning-border-subtle: #fad7a0;
@@ -142,7 +142,7 @@
   --bs-tertiary-bg: #191919;
   --bs-tertiary-bg-rgb: 25, 25, 25;
   --bs-primary-text-emphasis: #66d7ba;
-  --bs-secondary-text-emphasis: #858585;
+  --bs-secondary-text-emphasis: #a3a3a3;
   --bs-success-text-emphasis: #66d7ba;
   --bs-info-text-emphasis: #85c1e9;
   --bs-warning-text-emphasis: #f8c471;
@@ -150,7 +150,7 @@
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
   --bs-primary-bg-subtle: #00261c;
-  --bs-secondary-bg-subtle: #0a0a0a;
+  --bs-secondary-bg-subtle: #141414;
   --bs-success-bg-subtle: #00261c;
   --bs-info-bg-subtle: #0a1e2c;
   --bs-warning-bg-subtle: #311f04;
@@ -158,7 +158,7 @@
   --bs-light-bg-subtle: #202020;
   --bs-dark-bg-subtle: #101010;
   --bs-primary-border-subtle: #007154;
-  --bs-secondary-border-subtle: #1f1f1f;
+  --bs-secondary-border-subtle: #3d3d3d;
   --bs-success-border-subtle: #007154;
   --bs-info-border-subtle: #1f5b83;
   --bs-warning-border-subtle: #925e0b;
@@ -1945,13 +1945,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #000;
-  --bs-table-bg: #d6d6d6;
-  --bs-table-border-color: #c1c1c1;
-  --bs-table-striped-bg: #cbcbcb;
+  --bs-table-bg: #e0e0e0;
+  --bs-table-border-color: #cacaca;
+  --bs-table-striped-bg: #d5d5d5;
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c1c1c1;
+  --bs-table-active-bg: #cacaca;
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #c6c6c6;
+  --bs-table-hover-bg: #cfcfcf;
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2979,19 +2979,19 @@ textarea.form-control-lg {
 
 .btn-secondary {
   --bs-btn-color: #f3f3f3;
-  --bs-btn-bg: #333;
-  --bs-btn-border-color: #333;
+  --bs-btn-bg: #666;
+  --bs-btn-border-color: #666;
   --bs-btn-hover-color: #f3f3f3;
-  --bs-btn-hover-bg: #2b2b2b;
-  --bs-btn-hover-border-color: #292929;
-  --bs-btn-focus-shadow-rgb: 80, 80, 80;
+  --bs-btn-hover-bg: #575757;
+  --bs-btn-hover-border-color: #525252;
+  --bs-btn-focus-shadow-rgb: 123, 123, 123;
   --bs-btn-active-color: #f3f3f3;
-  --bs-btn-active-bg: #292929;
-  --bs-btn-active-border-color: #262626;
+  --bs-btn-active-bg: #525252;
+  --bs-btn-active-border-color: #4d4d4d;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #f3f3f3;
-  --bs-btn-disabled-bg: #333;
-  --bs-btn-disabled-border-color: #333;
+  --bs-btn-disabled-bg: #666;
+  --bs-btn-disabled-border-color: #666;
 }
 
 .btn-success {
@@ -3114,19 +3114,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-secondary {
-  --bs-btn-color: #333;
-  --bs-btn-border-color: #333;
+  --bs-btn-color: #666;
+  --bs-btn-border-color: #666;
   --bs-btn-hover-color: #f3f3f3;
-  --bs-btn-hover-bg: #333;
-  --bs-btn-hover-border-color: #333;
-  --bs-btn-focus-shadow-rgb: 51, 51, 51;
+  --bs-btn-hover-bg: #666;
+  --bs-btn-hover-border-color: #666;
+  --bs-btn-focus-shadow-rgb: 102, 102, 102;
   --bs-btn-active-color: #f3f3f3;
-  --bs-btn-active-bg: #333;
-  --bs-btn-active-border-color: #333;
+  --bs-btn-active-bg: #666;
+  --bs-btn-active-border-color: #666;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #333;
+  --bs-btn-disabled-color: #666;
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #333;
+  --bs-btn-disabled-border-color: #666;
   --bs-gradient: none;
 }
 
@@ -6766,7 +6766,7 @@ textarea.form-control-lg {
 
 .text-bg-secondary {
   color: #f3f3f3 !important;
-  background-color: RGBA(51, 51, 51, var(--bs-bg-opacity, 1)) !important;
+  background-color: RGBA(102, 102, 102, var(--bs-bg-opacity, 1)) !important;
 }
 
 .text-bg-success {
@@ -6813,8 +6813,8 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: RGBA(41, 41, 41, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(41, 41, 41, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(82, 82, 82, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(82, 82, 82, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-success {
diff --git a/src/assets/css/themes/darkly-red.css b/src/assets/css/themes/darkly-red.css
index 0527b42..20349d1 100644
--- a/src/assets/css/themes/darkly-red.css
+++ b/src/assets/css/themes/darkly-red.css
@@ -30,7 +30,7 @@
   --bs-gray-800: #303030;
   --bs-gray-900: #222;
   --bs-primary: #375a7f;
-  --bs-secondary: #444;
+  --bs-secondary: #adb5bd;
   --bs-success: #00bc8c;
   --bs-info: #3498db;
   --bs-warning: #f39c12;
@@ -38,7 +38,7 @@
   --bs-light: #303030;
   --bs-dark: #dee2e6;
   --bs-primary-rgb: 55, 90, 127;
-  --bs-secondary-rgb: 68, 68, 68;
+  --bs-secondary-rgb: 173, 181, 189;
   --bs-success-rgb: 0, 188, 140;
   --bs-info-rgb: 52, 152, 219;
   --bs-warning-rgb: 243, 156, 18;
@@ -46,7 +46,7 @@
   --bs-light-rgb: 48, 48, 48;
   --bs-dark-rgb: 222, 226, 230;
   --bs-primary-text-emphasis: #162433;
-  --bs-secondary-text-emphasis: #1b1b1b;
+  --bs-secondary-text-emphasis: #45484c;
   --bs-success-text-emphasis: #004b38;
   --bs-info-text-emphasis: #153d58;
   --bs-warning-text-emphasis: #613e07;
@@ -54,7 +54,7 @@
   --bs-light-text-emphasis: #444;
   --bs-dark-text-emphasis: #444;
   --bs-primary-bg-subtle: #d7dee5;
-  --bs-secondary-bg-subtle: #dadada;
+  --bs-secondary-bg-subtle: #eff0f2;
   --bs-success-bg-subtle: #ccf2e8;
   --bs-info-bg-subtle: #d6eaf8;
   --bs-warning-bg-subtle: #fdebd0;
@@ -62,7 +62,7 @@
   --bs-light-bg-subtle: #fcfcfd;
   --bs-dark-bg-subtle: #ced4da;
   --bs-primary-border-subtle: #afbdcc;
-  --bs-secondary-border-subtle: #b4b4b4;
+  --bs-secondary-border-subtle: #dee1e5;
   --bs-success-border-subtle: #99e4d1;
   --bs-info-border-subtle: #aed6f1;
   --bs-warning-border-subtle: #fad7a0;
@@ -142,7 +142,7 @@
   --bs-tertiary-bg: #292929;
   --bs-tertiary-bg-rgb: 41, 41, 41;
   --bs-primary-text-emphasis: #879cb2;
-  --bs-secondary-text-emphasis: #8f8f8f;
+  --bs-secondary-text-emphasis: #ced3d7;
   --bs-success-text-emphasis: #66d7ba;
   --bs-info-text-emphasis: #85c1e9;
   --bs-warning-text-emphasis: #f8c471;
@@ -150,7 +150,7 @@
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
   --bs-primary-bg-subtle: #0b1219;
-  --bs-secondary-bg-subtle: #0e0e0e;
+  --bs-secondary-bg-subtle: #232426;
   --bs-success-bg-subtle: #00261c;
   --bs-info-bg-subtle: #0a1e2c;
   --bs-warning-bg-subtle: #311f04;
@@ -158,7 +158,7 @@
   --bs-light-bg-subtle: #303030;
   --bs-dark-bg-subtle: #181818;
   --bs-primary-border-subtle: #21364c;
-  --bs-secondary-border-subtle: #292929;
+  --bs-secondary-border-subtle: #686d71;
   --bs-success-border-subtle: #007154;
   --bs-info-border-subtle: #1f5b83;
   --bs-warning-border-subtle: #925e0b;
@@ -1945,13 +1945,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #000;
-  --bs-table-bg: #dadada;
-  --bs-table-border-color: #c4c4c4;
-  --bs-table-striped-bg: #cfcfcf;
+  --bs-table-bg: #eff0f2;
+  --bs-table-border-color: #d7d8da;
+  --bs-table-striped-bg: #e3e4e6;
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c4c4c4;
+  --bs-table-active-bg: #d7d8da;
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cacaca;
+  --bs-table-hover-bg: #dddee0;
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2978,20 +2978,20 @@ textarea.form-control-lg {
 }
 
 .btn-secondary {
-  --bs-btn-color: #fff;
-  --bs-btn-bg: #444;
-  --bs-btn-border-color: #444;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #3a3a3a;
-  --bs-btn-hover-border-color: #363636;
-  --bs-btn-focus-shadow-rgb: 96, 96, 96;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #363636;
-  --bs-btn-active-border-color: #333333;
+  --bs-btn-color: #000;
+  --bs-btn-bg: #adb5bd;
+  --bs-btn-border-color: #adb5bd;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #b9c0c7;
+  --bs-btn-hover-border-color: #b5bcc4;
+  --bs-btn-focus-shadow-rgb: 147, 154, 161;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #bdc4ca;
+  --bs-btn-active-border-color: #b5bcc4;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #444;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #adb5bd;
+  --bs-btn-disabled-border-color: #adb5bd;
 }
 
 .btn-success {
@@ -3114,19 +3114,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-secondary {
-  --bs-btn-color: #444;
-  --bs-btn-border-color: #444;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #444;
-  --bs-btn-hover-border-color: #444;
-  --bs-btn-focus-shadow-rgb: 68, 68, 68;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #444;
-  --bs-btn-active-border-color: #444;
+  --bs-btn-color: #adb5bd;
+  --bs-btn-border-color: #adb5bd;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #adb5bd;
+  --bs-btn-hover-border-color: #adb5bd;
+  --bs-btn-focus-shadow-rgb: 173, 181, 189;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #adb5bd;
+  --bs-btn-active-border-color: #adb5bd;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #444;
+  --bs-btn-disabled-color: #adb5bd;
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-border-color: #adb5bd;
   --bs-gradient: none;
 }
 
@@ -6765,8 +6765,8 @@ textarea.form-control-lg {
 }
 
 .text-bg-secondary {
-  color: #fff !important;
-  background-color: RGBA(68, 68, 68, var(--bs-bg-opacity, 1)) !important;
+  color: #000 !important;
+  background-color: RGBA(173, 181, 189, var(--bs-bg-opacity, 1)) !important;
 }
 
 .text-bg-success {
@@ -6813,8 +6813,8 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: RGBA(54, 54, 54, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(54, 54, 54, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(189, 196, 202, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(189, 196, 202, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-success {
diff --git a/src/assets/css/themes/darkly.css b/src/assets/css/themes/darkly.css
index 8baaf71..9450e54 100644
--- a/src/assets/css/themes/darkly.css
+++ b/src/assets/css/themes/darkly.css
@@ -30,7 +30,7 @@
   --bs-gray-800: #303030;
   --bs-gray-900: #222;
   --bs-primary: #00bc8c;
-  --bs-secondary: #444;
+  --bs-secondary: #adb5bd;
   --bs-success: #00bc8c;
   --bs-info: #3498db;
   --bs-warning: #f39c12;
@@ -38,7 +38,7 @@
   --bs-light: #303030;
   --bs-dark: #dee2e6;
   --bs-primary-rgb: 0, 188, 140;
-  --bs-secondary-rgb: 68, 68, 68;
+  --bs-secondary-rgb: 173, 181, 189;
   --bs-success-rgb: 0, 188, 140;
   --bs-info-rgb: 52, 152, 219;
   --bs-warning-rgb: 243, 156, 18;
@@ -46,7 +46,7 @@
   --bs-light-rgb: 48, 48, 48;
   --bs-dark-rgb: 222, 226, 230;
   --bs-primary-text-emphasis: #004b38;
-  --bs-secondary-text-emphasis: #1b1b1b;
+  --bs-secondary-text-emphasis: #45484c;
   --bs-success-text-emphasis: #004b38;
   --bs-info-text-emphasis: #153d58;
   --bs-warning-text-emphasis: #613e07;
@@ -54,7 +54,7 @@
   --bs-light-text-emphasis: #444;
   --bs-dark-text-emphasis: #444;
   --bs-primary-bg-subtle: #ccf2e8;
-  --bs-secondary-bg-subtle: #dadada;
+  --bs-secondary-bg-subtle: #eff0f2;
   --bs-success-bg-subtle: #ccf2e8;
   --bs-info-bg-subtle: #d6eaf8;
   --bs-warning-bg-subtle: #fdebd0;
@@ -62,7 +62,7 @@
   --bs-light-bg-subtle: #fcfcfd;
   --bs-dark-bg-subtle: #ced4da;
   --bs-primary-border-subtle: #99e4d1;
-  --bs-secondary-border-subtle: #b4b4b4;
+  --bs-secondary-border-subtle: #dee1e5;
   --bs-success-border-subtle: #99e4d1;
   --bs-info-border-subtle: #aed6f1;
   --bs-warning-border-subtle: #fad7a0;
@@ -142,7 +142,7 @@
   --bs-tertiary-bg: #292929;
   --bs-tertiary-bg-rgb: 41, 41, 41;
   --bs-primary-text-emphasis: #66d7ba;
-  --bs-secondary-text-emphasis: #8f8f8f;
+  --bs-secondary-text-emphasis: #ced3d7;
   --bs-success-text-emphasis: #66d7ba;
   --bs-info-text-emphasis: #85c1e9;
   --bs-warning-text-emphasis: #f8c471;
@@ -150,7 +150,7 @@
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
   --bs-primary-bg-subtle: #00261c;
-  --bs-secondary-bg-subtle: #0e0e0e;
+  --bs-secondary-bg-subtle: #232426;
   --bs-success-bg-subtle: #00261c;
   --bs-info-bg-subtle: #0a1e2c;
   --bs-warning-bg-subtle: #311f04;
@@ -158,7 +158,7 @@
   --bs-light-bg-subtle: #303030;
   --bs-dark-bg-subtle: #181818;
   --bs-primary-border-subtle: #007154;
-  --bs-secondary-border-subtle: #292929;
+  --bs-secondary-border-subtle: #686d71;
   --bs-success-border-subtle: #007154;
   --bs-info-border-subtle: #1f5b83;
   --bs-warning-border-subtle: #925e0b;
@@ -1945,13 +1945,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #000;
-  --bs-table-bg: #dadada;
-  --bs-table-border-color: #c4c4c4;
-  --bs-table-striped-bg: #cfcfcf;
+  --bs-table-bg: #eff0f2;
+  --bs-table-border-color: #d7d8da;
+  --bs-table-striped-bg: #e3e4e6;
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c4c4c4;
+  --bs-table-active-bg: #d7d8da;
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cacaca;
+  --bs-table-hover-bg: #dddee0;
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2978,20 +2978,20 @@ textarea.form-control-lg {
 }
 
 .btn-secondary {
-  --bs-btn-color: #fff;
-  --bs-btn-bg: #444;
-  --bs-btn-border-color: #444;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #3a3a3a;
-  --bs-btn-hover-border-color: #363636;
-  --bs-btn-focus-shadow-rgb: 96, 96, 96;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #363636;
-  --bs-btn-active-border-color: #333333;
+  --bs-btn-color: #000;
+  --bs-btn-bg: #adb5bd;
+  --bs-btn-border-color: #adb5bd;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #b9c0c7;
+  --bs-btn-hover-border-color: #b5bcc4;
+  --bs-btn-focus-shadow-rgb: 147, 154, 161;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #bdc4ca;
+  --bs-btn-active-border-color: #b5bcc4;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #444;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #adb5bd;
+  --bs-btn-disabled-border-color: #adb5bd;
 }
 
 .btn-success {
@@ -3114,19 +3114,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-secondary {
-  --bs-btn-color: #444;
-  --bs-btn-border-color: #444;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #444;
-  --bs-btn-hover-border-color: #444;
-  --bs-btn-focus-shadow-rgb: 68, 68, 68;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #444;
-  --bs-btn-active-border-color: #444;
+  --bs-btn-color: #adb5bd;
+  --bs-btn-border-color: #adb5bd;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #adb5bd;
+  --bs-btn-hover-border-color: #adb5bd;
+  --bs-btn-focus-shadow-rgb: 173, 181, 189;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #adb5bd;
+  --bs-btn-active-border-color: #adb5bd;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #444;
+  --bs-btn-disabled-color: #adb5bd;
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-border-color: #adb5bd;
   --bs-gradient: none;
 }
 
@@ -6765,8 +6765,8 @@ textarea.form-control-lg {
 }
 
 .text-bg-secondary {
-  color: #fff !important;
-  background-color: RGBA(68, 68, 68, var(--bs-bg-opacity, 1)) !important;
+  color: #000 !important;
+  background-color: RGBA(173, 181, 189, var(--bs-bg-opacity, 1)) !important;
 }
 
 .text-bg-success {
@@ -6813,8 +6813,8 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: RGBA(54, 54, 54, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(54, 54, 54, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(189, 196, 202, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(189, 196, 202, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-success {