mi6
Spike: Research an appropriate approach for implementing a dark mode color-scheme into our component library
Summary
Research various approaches and patterns for smoothly implementing a new color-scheme into our component library that would enable dark mode support.
💬 Description
Typically when implementing dark mode, colours tokens that are used in the overall styles come in pairs (light and dark variant), E.G: light and dark action colour. When we eventually have these pairs of colours, we will need to determine the most efficient way of adding them to our component styles, and implementing the switching of color-schemes between the two modes for every component. Since this approach will involve a huge amount of new style tokens being added, we will need a pattern that will ideally reduce code duplication and be easy for us to maintain for our current library, as well as applying to future components.
💰 Use value
Determine the ideal approach early will reduce development time for the actual implementation, and create less technical debt since we will have a solution that hopefully won't require much adjustment. Will also allow us to better document to users how they can take advantage of the future dark mode feature in their applications when it is released.
📝 Acceptance Criteria
Given that we have appropriate light and dark colour pairs When a component needs to switch between the two color-schemes Then the way it will switch between the two will be clear and concise
Given that we have a new component to build When a developer needs to implement dark mode using the new colour pairs Then the method of implementing them will be the same as current components, creating a clear pattern for us to adopt
Additional info
Will likely need some consideration for our guidance site. Whatever way we implement the dark mode colours, how will the guidance site be affected by them.
Some resources to use as a starting point, giving some context around implementing dark mode:
- https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web
- https://dev.to/alexeagleson/how-to-create-a-dark-mode-component-in-react-3ibg
