theme changes for nodebb/nodebb#9311

less/account.less

@@ -374,6 +374,54 @@
 		padding: 10px 5px;
 		font-size: 13px;
 	}
+
+	label {
+		vertical-align: top;
+		line-height: 26px;
+
+		> input[type="radio"] {
+			display: none;
+
+			&:checked {
+				+ span:before {
+					border-radius: 50%;
+					border: 2px solid @brand-primary;
+					position: relative;
+					top: -4px;
+					left: -4px;
+				}
+			}
+
+			&[value="transparent"] {
+				&:checked + span:before {
+					padding-top: 2px;
+					padding-left: 2px;
+				}
+
+				+ span:before {
+					content: '\f05e';
+					font-family: FontAwesome;
+					color: @gray-lighter;
+					font-size: 28px;
+				}
+			}
+		}
+
+		span {
+			display: inline-block;
+			width: 24px;
+			height: 24px;
+			border-radius: 50%;
+			margin-right: .5em;
+
+			&:before {
+				content: '';
+				display: inline-block;
+				width: 32px;
+				height: 32px;
+			}
+		}
+	}
 }
 
 .page-user-info {

templates/partials/modals/change_picture_modal.tpl

@@ -62,3 +62,12 @@
 		</div>
 	</div>
 </div>
+
+<hr />
+
+<h4>[[user:avatar-background-colour]]</h4>
+
+<label><input type="radio" name="icon:bgColor" value="transparent" /><span></span></label>
+{{{ each iconBackgrounds }}}
+<label><input type="radio" name="icon:bgColor" value="{@value}" /><span style="background-color: {@value};"></span></label>
+{{{ end }}}