Add a button to change the background of a govuk website

alphagov / learningtime-dm-sem1-darkmode

Early talent assigned learning time, Semester 1 project for DanielMurray97

0 stars 0 forks source link

Add a button to change the background of a govuk website #3

Open DanielMurray97 opened 1 year ago

DanielMurray97 commented 1 year ago

What?

Add a button that changes the background of the selected govuk website from white to black.

Why?

Can see how to change and implement a stylistic change on the front-end using a button, potentially leading to this button changing the entire website into dark-mode.

Acceptance Criteria

[ ] Understand how to change CSS styling using a button
[ ] A button which changes the background from white to black on a govuk repo

huwd commented 1 year ago

Let's check in on this on Friday 2nd. I think the answer you are looking for here is that you are going to need some javascript not just CSS.

But, css can do some cool things all by itself, check out: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme. I use it on my own website here.

Once you've done that you should be able to toggle which scheme you want to use by going into your web browser tools and adjusting from there. For example in firefox you get this funky sun and moon button you can click to toggle:

DanielMurray97 commented 1 year ago

That's great! makes it super easy for testing for different versions - I think given this information Im going to put the button on the back-burner for now and focus on getting the homepage in darkmode by switching between the different versions given your recommendation of a media query.