Ensure that blue group avatars are preserved in dark theme

stylesheets/_theme_dark.scss

@@ -1325,6 +1325,9 @@ body.dark-theme {
     background-color: $color-conversation-grey-shade;
   }
 
+  .module-avatar--signal-blue {
+    background-color: $color-signal-blue;
+  }
   .module-avatar--red {
     background-color: $color-conversation-red-shade;
   }

ts/components/Avatar.md

@@ -1,6 +1,7 @@
 ### With avatar
 
 ```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
     size={28}
     color="pink"
@@ -17,11 +18,13 @@
     conversationType="group"
     i18n={util.i18n}
   />
+</util.ConversationContext>
 ```
 
 ### With only name
 
 ```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
     size={28}
     color="blue"
@@ -43,11 +46,13 @@
     conversationType="group"
     i18n={util.i18n}
   />
+</util.ConversationContext>
 ```
 
 ### Just phone number
 
 ```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
     size={28}
     color="pink"
@@ -55,11 +60,13 @@
     conversationType="direct"
     i18n={util.i18n}
   />
+</util.ConversationContext>
 ```
 
 ### All colors
 
 ```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
     size={28}
     color="signal-blue"
@@ -144,11 +151,13 @@
     conversationType="direct"
     i18n={util.i18n}
   />
+</util.ConversationContext>
 ```
 
 ### 36px
 
 ```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
     size={36}
     color="teal"
@@ -171,12 +180,7 @@
     conversationType="direct"
     i18n={util.i18n}
   />
-<Avatar
+  <Avatar size={36} color="teal" conversationType="direct" i18n={util.i18n} />
-  size={36}
-  color="teal"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
   <Avatar
     size={36}
     color="teal"
@@ -184,11 +188,13 @@
     conversationType="group"
     i18n={util.i18n}
   />
+</util.ConversationContext>
 ```
 
 ### 48px
 
 ```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
     size={48}
     color="teal"
@@ -211,12 +217,7 @@
     conversationType="direct"
     i18n={util.i18n}
   />
-<Avatar
+  <Avatar size={48} color="teal" conversationType="direct" i18n={util.i18n} />
-  size={48}
-  color="teal"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
   <Avatar
     size={48}
     color="teal"
@@ -224,11 +225,13 @@
     conversationType="group"
     i18n={util.i18n}
   />
+</util.ConversationContext>
 ```
 
 ### 80px
 
 ```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
     size={80}
     color="teal"
@@ -251,12 +254,7 @@
     conversationType="direct"
     i18n={util.i18n}
   />
-<Avatar
+  <Avatar size={80} color="teal" conversationType="direct" i18n={util.i18n} />
-  size={80}
-  color="teal"
-  conversationType="direct"
-  i18n={util.i18n}
-/>
   <Avatar
     size={80}
     color="teal"
@@ -264,11 +262,13 @@
     conversationType="group"
     i18n={util.i18n}
   />
+</util.ConversationContext>
 ```
 
 ### Broken color
 
 ```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
     size={28}
     color="fake"
@@ -276,11 +276,13 @@
     conversationType="direct"
     i18n={util.i18n}
   />
+</util.ConversationContext>
 ```
 
 ### Broken image
 
 ```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
     size={28}
     color="pink"
@@ -289,11 +291,13 @@
     conversationType="direct"
     i18n={util.i18n}
   />
+</util.ConversationContext>
 ```
 
 ### Broken image for group
 
 ```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <Avatar
     size={28}
     avatarPath="nonexistent"
@@ -303,4 +307,5 @@
     conversationType="group"
     i18n={util.i18n}
   />
+</util.ConversationContext>
 ```