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 */ font-family: 'Roboto', Arial, sans-serif; } /* Button color, e.g. "Confirm", "Save", "Order"(primary functions) */ .btn-primary .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: #000000; border-color: #000000; } /* Button color, e.g. "Cancel", "Skip" (secondary function) */ .btn-secondary .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus { background-color: #000000 !important; border-color: #000000 !important; } /* Link color in the entire HTML document */ a { color: #000000; } /* Box color of the selected payment method */ .payment-tabs li a.active { color: #000000; } /* Box color of the select payment method 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; } /* Price text color in the list of the selected product in the order detail box (by default top right) */ .price-list table td:last-child { color: #000000; } /* upper frame color of the order detail box (by default top right) */ .order-details { border-top-color: #000000; }