Dark mode enable mechanism

[GCHQ-Developer-094]

Summary

In parallel with our dark mode offering, we want a means in order to both enable and disable (on and off) the implementation of said dark mode.

💬 Description

It is assumed the use of a switch or toggle component will be utilised to achieve this. However, research should be conducted and various options presented.

Outputs

• Conduct desk research
• Experiment with existing components but also don't be afraid to create something bespoke
• Several options to present back to team
• Think about how we will want to get feedback from the community before refining designs

💰 User value

Easy out of the box means for customers to apply to products, ensuring seamless experience for the end user.

Acceptance Criteria

[GCHQ-Developer-465]

As already spoken about, this ticket relates slightly with 1033 in the way the work could be done. However 1033 has a different use case. Majority of sites use a switch for Light mode / Dark mode. Therefore a switch component should be used for this. Research is being done already to investigate this.

[GCHQ-Developer-299]

Going to go back to design to clarify final designs and decide whether this work is just for top nav for now so we can implement on guidance site

[GCHQDeveloper618]

updated figma to show button placement on small screen

[MI6-255]

Add this as a pattern to pattern pages. Include adding code examples to the dark mode page. Also add it to our top navigation and how to control the theme and storing the state. Include how the background will switch

[ad9242]

initial work done in #1222

still to do:

• storing the setting
• detecting os\browser settings for default
• full dark mode of site