Optimize Dark Theme & Ultra Dark (#1889)

---------

Co-authored-by: MHSanaei <ho3ein.sanaei@gmail.com>
Co-authored-by: Alireza Ahmadi <alireza7@gmail.com>

1 files changed, 16 insertions, 16 deletions

diff --git a/web/assets/persian-datepicker/persian-datepicker.min.css b/web/assets/persian-datepicker/persian-datepicker.min.css
index 2681d6a4..133f80d0 100644
--- a/web/assets/persian-datepicker/persian-datepicker.min.css
+++ b/web/assets/persian-datepicker/persian-datepicker.min.css
@@ -206,15 +206,15 @@ jdp-container .jdp-day-name {
 }
 jdp-container .jdp-day-name.today,
 jdp-container .jdp-day.today {
-    border-color: #008771;
-    color: #008771;
+    border-color: var(--color-primary-100);
+    color: var(--color-primary-100);
     font-weight: 700;
 }
 .dark jdp-container .jdp-day-name.selected,
 .dark jdp-container .jdp-day.selected,
 jdp-container .jdp-day-name.selected,
 jdp-container .jdp-day.selected {
-    background-color: #008771 !important;
+    background-color: var(--color-primary-100) !important;
     color: #fff !important;
     opacity: 1 !important;
 }
@@ -267,7 +267,7 @@ jdp-container .jdp-btn-empty,
 jdp-container .jdp-btn-today {
     background: #00877000;
     border-radius: 5px;
-    color: #008771;
+    color: var(--color-primary-100);
     cursor: pointer;
     display: inline-block;
     font-size: 90%;
@@ -369,26 +369,26 @@ jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
 }
 
 .dark jdp-container .jdp-days {
-    border-color: #32353b;
+    border-color: var(--dark-color-surface-400);
 }
 
 .dark jdp-overlay {
     background-color: #181f2c;
 }
 .dark jdp-container {
-    background: #000000;
+    background: var(--dark-color-background);
     border-color: #2c3950;
     box-shadow: 0 2px 8px rgba(0,0,0,.15);
     color: #fff;
 }
 .dark jdp-container .jdp-icon-minus,
 .dark jdp-container .jdp-icon-plus {
-    outline-color: #32353b;
+    outline-color: var(--dark-color-surface-600);
 }
 
 .dark jdp-container .jdp-icon-minus:hover,
 .dark jdp-container .jdp-icon-plus:hover {
-    background-color: #32353b;
+    background-color: var(--dark-color-surface-600);
 }
 
 .dark jdp-container .jdp-months,
@@ -405,27 +405,27 @@ jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
 .dark jdp-container .jdp-year,
 .dark jdp-container .jdp-year input,
 .dark jdp-container .jdp-year select {
-    background: #000000;
-    color: rgba(255, 255, 255, 0.85);
+    background: var(--dark-color-background);
+    color: var(--dark-color-text-primary);
 }
 .dark jdp-container .jdp-day,
 .dark jdp-container .jdp-day-name {
     border: 1px solid transparent;
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--dark-color-text-primary);
 }
 .dark jdp-container .jdp-day-name.today,
 .dark jdp-container .jdp-day.today {
-    border-color: #008771;
+    border-color: var(--color-primary-100);
 }
 .dark jdp-container .jdp-day.disabled-day {
     opacity: 0.15;
 }
 .dark jdp-container .jdp-day:not(.disabled-day):hover {
-    background-color: #32353b;
+    background-color: var(--dark-color-surface-600);
     color: #fff;
 }
 .dark jdp-container .jdp-footer {
-    border-color: #32353b;
+    border-color: var(--dark-color-surface-400);
 }
 .dark jdp-container .jdp-btn-close,
 .dark jdp-container .jdp-btn-empty,
@@ -446,10 +446,10 @@ jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
 }
 
 .dark jdp-container .jdp-time-container .jdp-time select:hover {
-    background-color: #32353b;
+    background-color: var(--dark-color-surface-600);
     color: #fff;
 }
 
 .dark jdp-container .jdp-time-container .jdp-time select {
-    border: 1px solid #32353b;
+    border: 1px solid var(--dark-color-surface-600);
 }