Release Dark Mode To Beta

[JamieB-gu]

Written up based on #9113 by @sophie-macmillan

This work relies on #9175 being completed first.

I've attempted to list all of the places we need to do this work below, but have probably missed places - so feel free to add to this!

I've split components out where they are either used in multiple places or larger/more complicated components. This should allow us to work on them in parallel.

Once the components are done, we can look at the layouts and implement darkmode where it hasn't already been implemented, hopefully without any clashes (as we'll have most of the shared components working in dark mode)

I haven't created issues for each of them, as I didn't want to overwhelm the board. We can possibly create tickets as we pick each task up?

Components

Beta Give feedback

1. Support darkmode - AdSlot.apps #9251
   +0
   
2. Support darkmode - AppsEpic & EpicContent.apps #9621
   +0
   
3. Support darkmode - Accordion #9265
   +0
   
4. Support darkmode - Avatar #9238
   +0
   
5. Support darkmode - ArticleMeta #9280
   4 of 4
   +0
   
6. Support darkmode - Headings #9419
   +0
   
7. Support darkmode - BlockQuote #9275
   DCR for Apps +1
   
8. Support darkmode - Byline #9260
   +0
   
9. Support darkmode - Callouts 💬 #9277
   +0
   
10. Support darkmode - Caption #9282
    DCR for Apps +1
    
11. Support darkmode - Star Rating #9213
    DCR for Apps +1
    
12. Support darkmode - Table of Contents #9288
    DCR for Apps +1
    
13. Support darkmode - Standfirst #9216
    +0
    
14. Support darkmode - Pull Quote #9281
    DCR for Apps +1
    
15. Support darkmode - Branding Logo #9305
    +0
    
16. Support darkmode - AppsFooter #9215
    DCR for Apps +1
    
17. Support darkmode - Card #9402
    DCR for Apps +1
    
18. Support darkmode - ClickToView #9317
    +0
    
19. Support darkmode - KeyEvents + KeyEventsCarousel #9296
    DCR for Apps +1
    
20. Support darkmode - submeta #9484
    +0
    
21. Support darkmode - Links #9497
    +0
    
22. Support darkmode - ShareIcons #9556
    +0
    
23. Support darkmode - Most Viewed #9599
    DCR for Apps +1
    
24. Support darkmode - CommentCount #9666
    +0
    
25. Support darkmode - support sections at the bottom of the article #9704
    +0
    

Layouts

Beta Give feedback

1. Support Darkmode - StandardLayout #9437
   +0
   
2. Support Darkmode - ImmersiveLayout #9560
   DCR for Apps +1
   
3. Support Darkmode - CommentLayout #9521
   +0
   
4. Support Darkmode - PictureLayout #9586
   DCR for Apps +1
   
5. Support Darkmode - ShowcaseLayout #9571
   DCR for Apps +1
   
6. Support Darkmode - LiveLayout #9479
   +0
   
7. Support Darkmode - InteractiveLayout #9557
   +0
   

Tasks

Beta Give feedback

1. Darkmode - Drop caps colour #9618
   +0
   
2. Darkmode - rich links #9619
   +0
   
3. Darkmode - Apps footer #9620
   +0
   
4. Darkmode - Related Stories (Carousel) #9623
   +0
5. We should only show the related content at the bottom of Apps articles in DCAR #9631
   +0
   
6. Darkmode - Byline with multiple authors #9728
   +0
7. Darkmode - Document embed (InteractiveBlockElement) #9730
   +0
8. Darkmode - Article Headline colours #9723
   +0
   
9. Darkmode - Article Title #9726
   +0
   
10. DarkMode - More on this story and related content carousels #9737
    +0
    
11. Darkmode - Borders in articles #9727
    +0
    
12. Darkmode - Pullquote in Comment article #9745
    +0
    
13. DarkMode - NumberedList titles #9739
    +0
    
14. Turn on dark mode in Beta (the switch)

[ioannakok]

Moving to the backlog for health week