Below is a CSS example that enables simple design changes. Only the color codes need to be adjusted accordingly.
body {
/* Background color of the entire HTML document */
background-color: #000000;
/* Font color of the entire HTML document */
color: #000000;
/* Font type */
font-family: 'Roboto', Arial, sans-serif;
}
/* Color of the button for e.g. "Confirm", "Save", "Order" (primary functions) */ .btn-primary, .e.g. "Confirm", "Save", "Order" (primary functions) */
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
background-color: #000000;
border-color: #000000;
}
/* Color of the button for e.g. "Cancel", "Skip" (secondary functions) */
.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
background-color: #000000 !important;
border-color: #000000 !important;
}
/* Color of all links in the entire HTML document */
a {
color: #000000;
}
/* Color of the box of the selected payment type */
.payment-tabs li a.active {
color: #000000;
}
/* Color of the box of the selected payment type when focusing or hovering */
.payment-tabs li a.active::before .payment-tabs li a:hover::before, .payment-tabs li a:focus::before {
border-color: #000000;
}
/* Color of the price text in the list of selected products in the order detail box (top right by default) */
.price-list table td:last-child {
color: #000000;
}
/* Top border color of the order detail box (in the standard top right) */
.order-details {
border-top-color: #000000;
}
.png)