client: dark theme colors

AdguardTeam · Jan 17, 2023 · bd84ae4 · bd84ae4
1 parent 136ea56
commit bd84ae4
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 26 deletions.
diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css
@@ -1,5 +1,22 @@
 :root {
     --bgcolor: #f5f7fb;
+    --mcolor: #495057;
+    --scolor: rgba(74, 74, 74, 0.7);
+    --border-color: rgba(0, 40, 100, 0.12);
+    --header-bgcolor: #fff;
+    --card-bgcolor: #fff;
+    --card-border-color: rgba(0, 40, 100, 0.12);
+    --ctrl-bgcolor: #fff;
+    --ctrl-select-bgcolor: rgba(69, 79, 94, 0.12);
+    --ctrl-dropdown-color: #212529;
+    --ctrl-dropdown-bgcolor-focus: #f8f9fa;
+    --ctrl-dropdown-color-focus: #16181b;
+    --btn-success-bgcolor: #5eba00;
+    --form-disabled-bgcolor: #f8f9fa;
+    --form-disabled-color: #495057;
+    --rt-nodata-bgcolor: rgba(255,255,255,0.8);
+    --rt-nodata-color: rgba(0,0,0,0.5);
+    --logs__table-bgcolor: #fff;
     --yellow-pale: rgba(247, 181, 0, 0.1);
     --green79: #67b279;
     --gray-a5: #a5a5a5;
@@ -10,7 +27,25 @@
 }
 
 [data-theme="dark"] {
-    --bgcolor: black;
+    --bgcolor: #131313;
+    --mcolor: #e6e6e6;
+    --scolor: #a5a5a5;
+    --header-bgcolor: #131313;
+    --border-color: #222;
+    --card-bgcolor: #1c1c1c;
+    --card-border-color: #3d3d3d;
+    --ctrl-bgcolor: #1c1c1c;
+    --ctrl-select-bgcolor: #3d3d3d;
+    --ctrl-dropdown-color: #fff;
+    --ctrl-dropdown-bgcolor-focus: #000;
+    --ctrl-dropdown-color-focus: #fff;
+    --btn-success-bgcolor: #67b279;
+    --form-disabled-bgcolor: #a5a5a5;
+    --form-disabled-color: #1c1c1c;
+    --logs__text-color: #f3f3f3;
+    --rt-nodata-bgcolor: #1c1c1c;
+    --rt-nodata-color: #fff;
+    --logs__table-bgcolor: #a5a5a5;
 }
 
 body {

diff --git a/client/src/components/Header/Header.css b/client/src/components/Header/Header.css
@@ -47,7 +47,7 @@
     width: 250px;
     height: 100vh;
     transition: transform 0.3s ease;
-    background-color: #fff;
+    background-color: var(--bgcolor);
     overflow-y: auto;
 }
 

diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
@@ -31,7 +31,7 @@
     overflow: hidden;
     font-size: 1rem;
     font-family: var(--font-family-sans-serif);
-    color: var(--gray-4d);
+    color: var(--logs__text-color);
     letter-spacing: 0;
     line-height: 1.5rem;
 }
@@ -403,7 +403,7 @@
 }
 
 .logs__table {
-    background-color: var(--white);
+    background-color: var(--logs__table-bgcolor);
     border: 0;
     border-radius: 8px;
     min-height: 43rem;

diff --git a/client/src/components/ui/Checkbox.css b/client/src/components/ui/Checkbox.css
@@ -107,5 +107,5 @@
 .checkbox__label-subtitle {
     display: block;
     line-height: 1.5;
-    color: rgba(74, 74, 74, 0.7);
+    color: var(--scolor);
 }
diff --git a/client/src/components/ui/ReactTable.css b/client/src/components/ui/ReactTable.css
@@ -13,6 +13,16 @@
     overflow: visible;
 }
 
+.ReactTable .rt-noData {
+    color: var(--rt-nodata-color);
+    background-color: var(--rt-nodata-bgcolor);
+}
+
+.ReactTable .-pagination input, .ReactTable .-pagination select {
+    color: var(--rt-nodata-color);
+    background-color: var(--rt-nodata-bgcolor);
+}
+
 .rt-tr-group.logs__row--red {
     background-color: rgba(223, 56, 18, 0.05);
 }

diff --git a/client/src/components/ui/Select.css b/client/src/components/ui/Select.css
@@ -2,7 +2,7 @@
     height: 45px;
     padding: 0 32px 2px 11px;
     outline: 0;
-    border-color: rgba(69, 79, 94, 0.12);
+    border-color: var(--ctrl-select-bgcolor);
     background-image: url("./svg/chevron-down.svg");
     background-repeat: no-repeat;
     background-position: right 9px center;
@@ -19,7 +19,7 @@
     height: 45px;
     padding: 0 32px 2px 33px;
     outline: 0;
-    border-color: rgba(69, 79, 94, 0.12);
+    border-color: var(--ctrl-select-bgcolor);
     background-image: url("./svg/globe.svg"), url("./svg/chevron-down.svg");
     background-repeat: no-repeat, no-repeat;
     background-position: left 11px center, right 9px center;

diff --git a/client/src/components/ui/Tabler.css b/client/src/components/ui/Tabler.css
@@ -85,7 +85,7 @@ body {
     font-size: 0.9375rem;
     font-weight: 400;
     line-height: 1.5;
-    color: #495057;
+    color: var(--mcolor);
     text-align: left;
     background-color: var(--bgcolor);
 }
@@ -1943,10 +1943,10 @@ pre code {
     padding: 0.375rem 0.75rem;
     font-size: 0.9375rem;
     line-height: 1.6;
-    color: #495057;
-    background-color: #fff;
+    color: var(--mcolor);
+    background-color: var(--card-bgcolor);
     background-clip: padding-box;
-    border: 1px solid rgba(0, 40, 100, 0.12);
+    border: 1px solid var(--card-border-color);
     border-radius: 3px;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
@@ -1991,7 +1991,8 @@ pre code {
 
 .form-control:disabled,
 .form-control[readonly] {
-    background-color: #f8f9fa;
+    background-color: var(--form-disabled-bgcolor);
+    color: var(--form-disabled-color);
     opacity: 1;
 }
 
@@ -2580,7 +2581,7 @@ fieldset:disabled a.btn {
 
 .btn-success {
     color: #fff;
-    background-color: #5eba00;
+    background-color: var(--btn-success-bgcolor);
     border-color: #5eba00;
 }
 
@@ -3244,7 +3245,7 @@ tbody.collapse.show {
     color: #495057;
     text-align: left;
     list-style: none;
-    background-color: #fff;
+    background-color: var(--ctrl-bgcolor);
     background-clip: padding-box;
     border: 1px solid rgba(0, 40, 100, 0.12);
     border-radius: 3px;
@@ -3348,7 +3349,7 @@ tbody.collapse.show {
     padding: 0.25rem 1.5rem;
     clear: both;
     font-weight: 400;
-    color: #212529;
+    color: var(--ctrl-dropdown-color);
     text-align: inherit;
     white-space: nowrap;
     background-color: transparent;
@@ -3357,9 +3358,9 @@ tbody.collapse.show {
 
 .dropdown-item:hover,
 .dropdown-item:focus {
-    color: #16181b;
+    color: var(--ctrl-dropdown-color-focus);
     text-decoration: none;
-    background-color: #f8f9fa;
+    background-color: var(--ctrl-dropdown-bgcolor-focus);
 }
 
 .dropdown-item.active,
@@ -3794,11 +3795,11 @@ tbody.collapse.show {
     height: 2.375rem;
     padding: 0.5rem 1.75rem 0.5rem 0.75rem;
     line-height: 1.5;
-    color: #495057;
+    color: var(--mcolor);
     vertical-align: middle;
-    background: #fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
+    background: var(--card-bgcolor) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
     background-size: 8px 10px;
-    border: 1px solid rgba(0, 40, 100, 0.12);
+    border: 1px solid var(--card-border-color);
     border-radius: 3px;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -4469,9 +4470,9 @@ tbody.collapse.show {
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
-    background-color: #fff;
+    background-color: var(--card-bgcolor);
     background-clip: border-box;
-    border: 1px solid rgba(0, 40, 100, 0.12);
+    border: 1px solid var(--card-border-color);
     border-radius: 3px;
 }
 
@@ -10268,8 +10269,8 @@ body.fixed-header .page {
 .header {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
-    background: #fff;
-    border-bottom: 1px solid rgba(0, 40, 100, 0.12);
+    background: var(--header-bgcolor);
+    border-bottom: 1px solid var(--border-color);
 }
 
 body.fixed-header .header {
@@ -10382,8 +10383,8 @@ body.fixed-header .header {
 }
 
 .footer {
-    background: #fff;
-    border-top: 1px solid rgba(0, 40, 100, 0.12);
+    background: var(--card-bgcolor);
+    border-top: 1px solid var(--card-border-color);
     font-size: 0.875rem;
     padding: 1.25rem 0;
     color: #9aa0ac;