diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index cfc652a443..75559f0761 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -101,7 +101,7 @@ watch(props, async () => {
 
         > .q-card {
             width: 100%;
-            background-color: rgb(58, 58, 58);
+            background-color: var(--vn-gray);
             padding: 15px;
             font-size: 16px;
             min-width: 275px;
@@ -119,7 +119,7 @@ watch(props, async () => {
                     margin-right: 10px;
                 }
                 .value {
-                    color: white; //$light-black;
+                    color: var(--vn-text); //$light-black;
                     width: max-content;
                     overflow: hidden;
                     white-space: nowrap;
diff --git a/src/css/app.scss b/src/css/app.scss
index 466219906c..7d1acd53b9 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -35,4 +35,11 @@ body.body--light {
             color: white;
         }
     }
+    --vn-text: #000000;
+    --vn-gray: #dddddd;
+}
+
+body.body--dark {
+    --vn-text: #ffffff;
+    --vn-gray: #313131;
 }