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.
💰 Use value
Determine the ideal approach early will reduce design time for the actual implementation, and create less technical debt since we will have a solution that hopefully won't require much adjustment.
Dark mode allows greater accessibility and is eco-friendlier, should a user chose to activate.
📝 Outcomes
Items to document and consider:
[ ] A clearly defined baseline description of what dark mode means and what it means for the implementation within ICDS (e.g. will we also be implementing a pattern/means of switching dark mode on and off too?)
[ ] Variants - conversely also consider the bigger picture of the 'light', and 'default' (if necessary?), as well as dark mode
[ ] Desk research - various presentations of where it's implemented in applications and sites elsewhere
[ ] Review of existing 'light' and 'dark' themes in current ICDS components: which ones and what do they look like? Are they consistent? Good baseline for dark mode work, or do they need a re-think?
[ ] HOW will we implement this - will we be utilising design tokens? Will this lend itself well to future work on theming?
Whether this is all achieved individually or not, a summary of the above will be presented back to the wider team to prompt discussion and agree the approach going forward.
Additional info:
See this original related ticket for more context (some of it is repeated in this ticket).
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.
💰 Use value
Determine the ideal approach early will reduce design time for the actual implementation, and create less technical debt since we will have a solution that hopefully won't require much adjustment.
Dark mode allows greater accessibility and is eco-friendlier, should a user chose to activate.
📝 Outcomes
Items to document and consider:
Whether this is all achieved individually or not, a summary of the above will be presented back to the wider team to prompt discussion and agree the approach going forward.
Additional info:
See this original related ticket for more context (some of it is repeated in this ticket).
https://github.com/mi6/ic-ui-kit/issues/1654
Also -https://github.com/mi6/ic-ui-kit/issues/1496