change $body-color to CSS variable

fixes: #1385

src/scss/demo/_examples.scss

@@ -22,7 +22,7 @@
 .example-content {
   font-size: $font-size-base;
   line-height: $line-height-base;
-  color: $body-color;
+  color: var(--#{$prefix}body-color);
   flex: 1;
   max-width: 100%;
 

src/scss/layout/_core.scss

@@ -47,7 +47,7 @@ body {
     margin: 0 auto;
     max-width: var(--#{$prefix}theme-boxed-width);
     border-radius: var(--#{$prefix}theme-boxed-border-radius);
-    color: $body-color;
+    color: var(--#{$prefix}body-color);
 
     @include media-breakpoint-up(md) {
       border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);

src/scss/ui/_cards.scss

@@ -516,7 +516,7 @@ Card list group
       &:active,
       &:hover {
         border-color: $card-border-color;
-        color: $body-color;
+        color: var(--#{$prefix}body-color);
       }
 
       &.active {

src/scss/ui/_pagination.scss

@@ -44,7 +44,7 @@
 .page-item-title {
   font-size: $h3-font-size;
   font-weight: var(--#{$prefix}font-weight-normal);
-  color: $body-color;
+  color: var(--#{$prefix}body-color);
 
   .page-link:hover & {
     color: $link-color;

src/scss/ui/_tables.scss

@@ -91,7 +91,7 @@
           display: block;
           padding: $table-cell-padding-x $table-cell-padding-y !important;
           border: none;
-          color: $body-color !important;
+          color: var(--#{$prefix}body-color) !important;
 
           &[data-label] {
             &:before {
@@ -132,7 +132,7 @@
   &:hover,
   &.asc,
   &.desc {
-    color: $body-color;
+    color: var(--#{$prefix}body-color);
   }
 
   &:after,

src/scss/ui/forms/_form-imagecheck.scss

@@ -99,6 +99,6 @@ Image check
   .form-imagecheck:hover &,
   .form-imagecheck-input:focus ~ .form-imagecheck-figure &,
   .form-imagecheck-input:checked ~ .form-imagecheck-figure & {
-    color: $body-color;
+    color: var(--#{$prefix}body-color);
   }
 }