Scheduling Background + Text Color Updates

I'm looking for some assistance for coding.  I currently input the below:

body { background-color: #000000; }
scheduleday.activeday { color: #C9F3A9; }
scheduleday { color: #EBE8E1; }
appointment-type-name { font-size: 120%; font-weight: bold; }

However this did not achieve the results that I am looking for. I would like the full background on the scheduling portion to be black and all of the text to be white. Can you please advise how to do this?

Thank you so much in advance for your time and expertise. 

11 hours ago, alverhubbard said:

I currently input [some CSS into Acuity Scheduling].

However this did not achieve the results that I am looking for. I would like the full background on the scheduling portion to be black and all of the text to be white.

The CSS above will cover a few of the elements that you need to change, but there are many more! For example, to set the background of the main pane to black, you'll need to use the step-pane class:

.step-pane {
    background: #000;
}

To set the date heading background to near-black, you'd need to use the date-heading class:

.choose-date-time .date-heading, .reschedule-choose-date-time .date-heading {
    background: #222;
}

You'll then need to change the color of the fonts, the colors of the popups, and so on.

This will be a long list so, instead of me quoting each individual class here, I recommend that you take a look at the Developer Tools that are built into your browser, and try to identify the selectors/classes yourself. To give you a head start, take a look at my Finding CSS ID and Class Selectors post as this applies equally to Acuity Scheduling as it does to Squarespace. As they change from time to time, this will allow you to update them in future too.

Did this help? Please give feedback by clicking an icon below  ⬇️