Dark Mode: Images

[GCHQDeveloper823]

Summary

Go through the relevant Figma library and create dark mode images for the website.

💬 Description

To improve user experience on the ICDS website in dark mode, the images should also switch to their dark mode equivalent. We need to create the dark mode images, ensuring the correct component tokens are used.

NOTE: Please assign yourself with "@" against a file. Once complete, please tick and move onto the next file. Reviewing will take place after all dark mode images have been created. In the reviewing section below, please assign yourself with "@" and make any adjustments to the images as required. Once complete, please tick and move onto reviewing another file.

Assignees :

• Elevation (1) @GCHQDeveloper823
• Focus indicator (2) @mi6-577
• Layout and spacing (8) @GCHQDeveloper823
• Templates (4) @GCHQDeveloper823
• Motion (~20)
• Modals (6) @mi6-577

------Components-------

• Component gallery (44) @GCHQDeveloper823
• Accordion (9)
• Alerts (4) @GCHQDeveloper823
• Autocomplete (9) @GCHQDeveloper823
• Back to top (5) @GCHQDeveloper823
• Badge (14) @GCHQDeveloper823
• Buttons (19) @GCHQDeveloper823
• Breadcrumbs (4) @GCHQDeveloper823
• Cards (9) @GCHQDeveloper823
• Checkbox (10) @GCHQDeveloper823
• Chips (9) @GCHQDeveloper823
• Data entity (7) @GCHQ-Developer-837
• Date input (14) @mi6-577
• Date picker (8) @mi6-577
• Dialogs (7) @mi6-577
• Empty state (12) @mi6-577
• Footer (13) @mi6-577
• Hero (17) @GCHQDeveloper823
• Links (8) @MI6-94
• Loading indicators (8) @GCHQDeveloper823
• Page header (11) @mi6-577
• Pagination (11) @GCHQDeveloper823
• Popover menu (20) @mi6-577
• Radio (10) @GCHQ-Developer-837
• Search (6) @GCHQ-Developer-837
• Section container (5) @mi6-577
• Select (6) @GCHQ-Developer-837
• Side navigation (11) @GCHQDeveloper823
• Skeleton (5) @GCHQDeveloper823
• Status tags (10) @GCHQDeveloper823
• Stepper (8) @mi6-577
• Switch (11) @GCHQ-Developer-837 NB: Switch v3 has changed significantly...images updated @mi6-577
• Tabs (10) @GCHQDeveloper823
• Text inputs (9) @GCHQDeveloper823
• Time input (9) - can't do this as we don't have time input yet
• Time picker - can't do this as we don't have time picker yet
• Toasts (14) @GCHQDeveloper823 - review background colours against text area
• Toggle buttons (7) @mi6-577
• Tooltips (6) @GCHQ-Developer-837
• Top nav (22) @GCHQ-Developer-837
• Tree view (4) @mi6-577

---

• Top navigation layout pattern (1) @mi6-577
• Side navigation layout pattern (1) @mi6-577
• Navigation layouts intro (2) @mi6-577
• Forms (16) @mi6-577

---

Reviewers :

• Elevation (1)
• Focus indicator (2)
• Layout and spacing (8)
• Templates (4)
• Motion (~20)
• Modals (6)

------Components-------

• Component gallery (44)
• Accordion (9) @mi6-577
• Alerts (4) @GCHQ-Developer-837
• Autocomplete (9) @GCHQ-Developer-837
• Back to top (5) @GCHQ-Developer-837
• Badge (14) @mi6-577
• Buttons (19) @mi6-577
• Breadcrumbs (4) @GCHQ-Developer-837
• Cards (9) @mi6-577
• Checkbox (10) @GCHQ-Developer-837
• Chips (9) @mi6-577
• Data entity (7) @GCHQDeveloper823
• Date input (14) @GCHQDeveloper823
• Date picker (8) @GCHQDeveloper823
• Dialogs (7) @GCHQDeveloper823
• Empty state (12) @GCHQDeveloper823
• Footer (13) @GCHQ-Developer-837
• Hero (17) @mi6-577
• Links (8) @mi6-577
• Loading indicators (8) @mi6-577
• Page header (11) @GCHQ-Developer-837
• Pagination (11) @mi6-577
• Popover menu (20) @GCHQ-Developer-837
• Radio (10) @mi6-577
• Search (6) @mi6-577
• Section container (5)
• Select (6) @mi6-577
• Side navigation (11)
• Skeleton (5)
• Status tags (10)
• Stepper (8)
• Switch (11) @GCHQ-Developer-837
• Tabs (10)
• Text inputs (9)
• Time input (9) - can't do this as we don't have time input yet
• Time picker - can't do this as we don't have time picker yet
• Toasts (14)
• Toggle buttons (7)
• Tooltips (6)
• Top nav (22)
• Tree view (4) - NB needs the treeview branch merged into v3

---

• Top navigation layout pattern (1)
• Side navigation layout pattern (1)
• Navigation layouts intro (2)
• Forms (16)

💰 User value

Improved user experience when using the ICDS website in dark mode.