Change footer's color

If you wish to change the footer's color and give it some contrast, you can do so with a bit of custom CSS.

For this, you'll have to you'll have to edit the theme files, choose /assets/theme.css, and at the very end of the file, paste the following code snippet:

/* Custom Footer Colors */

:root {
  --footer-text: #fff;
  --footer-background: #000;
}

#shopify-section-footer {
  background: var(--footer-background);
  position: relative;
  padding-top: calc(var(--section-margin) / 2);
  margin-top: var(--section-margin);
}
#shopify-section-footer:after {
  position: absolute;
  top: 0;
  left: calc(var(--grid-width) / 12 * -1);
  width: calc(100% + ( var(--grid-width) / 12 * 2 ));
  background: var(--footer-background);
  z-index: -1;
  content: "";
  height: 100%;
}
#shopify-section-footer>footer {
  margin-top: 0;
}
#shopify-section-footer h5, #shopify-section-footer .rte, #shopify-section-footer h5, #shopify-section-footer a, #shopify-section-footer h5, #shopify-section-footer li, #shopify-section-footer div > span {
  color: var(--footer-text);
}
@media screen and (max-width: 1023px) {     #shopify-section-footer:after {
    left: calc(var(--grid-padding) * -1);
    width: calc(100% + (var(--grid-padding)));
  } 
}
.footer-item .regular-select-cover {
  background: var(--footer-background);
  border-color: var(--footer-text) !important;
}
.footer-item .regular-select-inner {
  color: var(--footer-text);
  background-image: none !important;
}
.footer-item .regular-select-inner:after {
  content: "➤";
  transform: rotate(90deg);
  display: inline-block;
  font-family: Arial, sans-serif;
  right: 12px;
  position: absolute;
  font-size: 10px;
  top: 17px;
}
.footer-item .regular-select-content.content-opened {
  border: 1px solid var(--footer-text);
  background: var(--footer-background);
}
.footer-item  .regular-select-item button {
  color: var(--footer-text);
}
.footer-item input {
  background: var(--footer-background);
  border-color: var(--footer-text) !important;
  color: var(--footer-text) !important;
}
.footer-item input::placeholder {
  color: var(--footer-text) !important;
}
.footer-item .newsletter-form svg path, .footer-item .social-icons a svg * {
  fill: var(--footer-text);
}

In this example the background will be black, while the text white. If you wish to use different colors, change in the first two lines:

:root {
  --footer-text: #fff;
  --footer-background: #000;
}