From 54ee1ef2932ca180464e8d9c159214b57b4c6735 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 25 Nov 2021 10:05:57 +0300
Subject: [PATCH] Add a border to colorpicker to fix issues of dark themes

---
 public/themes/arya-blue/theme.css               | 2 +-
 public/themes/arya-green/theme.css              | 2 +-
 public/themes/arya-orange/theme.css             | 2 +-
 public/themes/arya-purple/theme.css             | 2 +-
 public/themes/bootstrap4-dark-blue/theme.css    | 2 +-
 public/themes/bootstrap4-dark-purple/theme.css  | 2 +-
 public/themes/bootstrap4-light-blue/theme.css   | 2 +-
 public/themes/bootstrap4-light-purple/theme.css | 2 +-
 public/themes/fluent-light/theme.css            | 2 +-
 public/themes/lara-dark-blue/theme.css          | 2 +-
 public/themes/lara-dark-indigo/theme.css        | 2 +-
 public/themes/lara-dark-purple/theme.css        | 2 +-
 public/themes/lara-dark-teal/theme.css          | 2 +-
 public/themes/lara-light-blue/theme.css         | 2 +-
 public/themes/lara-light-indigo/theme.css       | 2 +-
 public/themes/lara-light-purple/theme.css       | 2 +-
 public/themes/lara-light-teal/theme.css         | 2 +-
 public/themes/luna-amber/theme.css              | 2 +-
 public/themes/luna-blue/theme.css               | 2 +-
 public/themes/luna-green/theme.css              | 2 +-
 public/themes/luna-pink/theme.css               | 2 +-
 public/themes/md-dark-deeppurple/theme.css      | 2 +-
 public/themes/md-dark-indigo/theme.css          | 2 +-
 public/themes/md-light-deeppurple/theme.css     | 2 +-
 public/themes/md-light-indigo/theme.css         | 2 +-
 public/themes/mdc-dark-deeppurple/theme.css     | 2 +-
 public/themes/mdc-dark-indigo/theme.css         | 2 +-
 public/themes/mdc-light-deeppurple/theme.css    | 2 +-
 public/themes/mdc-light-indigo/theme.css        | 2 +-
 public/themes/nova-accent/theme.css             | 2 +-
 public/themes/nova-alt/theme.css                | 2 +-
 public/themes/nova-vue/theme.css                | 2 +-
 public/themes/nova/theme.css                    | 2 +-
 public/themes/rhea/theme.css                    | 2 +-
 public/themes/saga-blue/theme.css               | 2 +-
 public/themes/saga-green/theme.css              | 2 +-
 public/themes/saga-orange/theme.css             | 2 +-
 public/themes/saga-purple/theme.css             | 2 +-
 public/themes/tailwind-light/theme.css          | 2 +-
 public/themes/vela-blue/theme.css               | 2 +-
 public/themes/vela-green/theme.css              | 2 +-
 public/themes/vela-orange/theme.css             | 2 +-
 public/themes/vela-purple/theme.css             | 2 +-
 43 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index a1261ea82..31a6a2ae2 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1e1e1e;
-  border-color: #383838;
+  border: 1px solid #383838;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 0f22bfdf4..38cb01435 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1e1e1e;
-  border-color: #383838;
+  border: 1px solid #383838;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 8b353a116..a7e27f851 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1e1e1e;
-  border-color: #383838;
+  border: 1px solid #383838;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 8fdbc6910..aeea31dbf 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1e1e1e;
-  border-color: #383838;
+  border: 1px solid #383838;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 5606eab25..67d1543f5 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #2a323d;
-  border-color: #3f4b5b;
+  border: 1px solid #3f4b5b;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 141c3dca4..db39ce4d5 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #2a323d;
-  border-color: #3f4b5b;
+  border: 1px solid #3f4b5b;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 58561e229..40a18cb78 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #212529;
-  border-color: #212529;
+  border: 1px solid #212529;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 0e45e606e..358a82c96 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #212529;
-  border-color: #212529;
+  border: 1px solid #212529;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 9744a031f..9baf4e040 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index fdbb1cf51..08035a76f 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -725,7 +725,7 @@
 
 .p-colorpicker-panel {
   background: #22272d;
-  border-color: #444c56;
+  border: 1px solid #444c56;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 8e579b887..e9244b588 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -725,7 +725,7 @@
 
 .p-colorpicker-panel {
   background: #22272d;
-  border-color: #444c56;
+  border: 1px solid #444c56;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 7d2046ca4..4e181cdaf 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -725,7 +725,7 @@
 
 .p-colorpicker-panel {
   background: #22272d;
-  border-color: #444c56;
+  border: 1px solid #444c56;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index b99fa3572..ed31f89a5 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -725,7 +725,7 @@
 
 .p-colorpicker-panel {
   background: #22272d;
-  border-color: #444c56;
+  border: 1px solid #444c56;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index f591dfacb..eb0f984ff 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -725,7 +725,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 95818591b..cedb62370 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -725,7 +725,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index a198998b0..599b9eca6 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -725,7 +725,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 708debfcf..49ec6fdb8 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -725,7 +725,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 47bca2880..c39987a4d 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 1be930688..e3a8979de 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 2806ef23b..621d7a96d 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index b98acad98..500a1f154 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index ac99a6205..1ac33ff74 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -714,7 +714,7 @@
 
 .p-colorpicker-panel {
   background: #2b2b2b;
-  border-color: #1e1e1e;
+  border: 1px solid #1e1e1e;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index dce8e896d..0329ea36a 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -714,7 +714,7 @@
 
 .p-colorpicker-panel {
   background: #2b2b2b;
-  border-color: #1e1e1e;
+  border: 1px solid #1e1e1e;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index d268701cd..f66952b57 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -714,7 +714,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index d8895831b..65d397cee 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -714,7 +714,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index f822cf217..1731d84e2 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -714,7 +714,7 @@
 
 .p-colorpicker-panel {
   background: #2b2b2b;
-  border-color: #1e1e1e;
+  border: 1px solid #1e1e1e;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index bb50879a2..3f6f5b1c8 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -714,7 +714,7 @@
 
 .p-colorpicker-panel {
   background: #2b2b2b;
-  border-color: #1e1e1e;
+  border: 1px solid #1e1e1e;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index b9275ce1c..552fadad2 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -714,7 +714,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index afaa0b331..64bde773e 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -714,7 +714,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 7a3f79109..dea23be2a 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 9ec62be7a..e30a235e5 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 2b0fda6bc..c2940c4b5 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index a6195d1da..02e524eb5 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index ef9b0e1cc..409181c72 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index ddd4c902f..f87419122 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index da23a697b..6642d47b2 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 4cc062655..2fa42baab 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index c19e5b260..88f1573b9 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index d0e6bca60..311778dbf 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -725,7 +725,7 @@
 
 .p-colorpicker-panel {
   background: #27272A;
-  border-color: #18181B;
+  border: 1px solid #18181B;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index acb543ef6..8fa4c0543 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1f2d40;
-  border-color: #304562;
+  border: 1px solid #304562;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 9287ef622..06039cb0a 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1f2d40;
-  border-color: #304562;
+  border: 1px solid #304562;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 25ee2d63e..04bc7bbcc 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1f2d40;
-  border-color: #304562;
+  border: 1px solid #304562;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index b6141756d..c8dc27045 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1f2d40;
-  border-color: #304562;
+  border: 1px solid #304562;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {