diff --git a/css/icons.css b/css/icons.css index 4fe49391a4..5a0dc23b83 100644 --- a/css/icons.css +++ b/css/icons.css @@ -92,29 +92,46 @@ * .app-Talk rules above. * "forced-white" needs to be included in the class name as the Avatar does * not accept several classes. */ -.user-bubble__avatar .icon-group-forced-white, -.user-bubble__avatar .icon-user-forced-white, -.autocomplete-result .icon-group-forced-white, -.autocomplete-result .icon-user-forced-white, -.mention-bubble .icon-group-forced-white, -.mention-bubble .icon-user-forced-white { - background-color: var(--color-text-maxcontrast-default) !important; +.user-bubble__avatar .icon-group-forced-white.avatar-class-icon, +.user-bubble__avatar .icon-user-forced-white.avatar-class-icon, +.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--, +.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--, +.mention-bubble .icon-group-forced-white.mention-bubble__icon--, +.mention-bubble .icon-user-forced-white.mention-bubble__icon-- { + background-color: #6B6B6B; } -body[data-theme-dark] .icon-group-forced-white, -body[data-theme-dark] .icon-user-forced-white { - background-color: #3B3B3B !important; +/* System default: dark theme */ +@media (prefers-color-scheme: dark) { + body[data-theme-default] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon, + body[data-theme-default] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon, + body[data-theme-default] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--, + body[data-theme-default] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--, + body[data-theme-default] .mention-bubble .icon-group-forced-white.mention-bubble__icon--, + body[data-theme-default] .mention-bubble .icon-user-forced-white.mention-bubble__icon-- { + background-color: #3B3B3B; + } } -.user-bubble__avatar .icon-group-forced-white, -.user-bubble__avatar .icon-user-forced-white { - background-size: 75%; +/* Manually set dark theme */ +body[data-theme-dark] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon, +body[data-theme-dark] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon, +body[data-theme-dark] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--, +body[data-theme-dark] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--, +body[data-theme-dark] .mention-bubble .icon-group-forced-white.mention-bubble__icon--, +body[data-theme-dark] .mention-bubble .icon-user-forced-white.mention-bubble__icon-- { + background-color: #3B3B3B; } -.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--, -.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--, +.user-bubble__avatar .icon-group-forced-white.avatar-class-icon, +.user-bubble__avatar .icon-user-forced-white.avatar-class-icon, .mention-bubble .icon-group-forced-white.mention-bubble__icon--, .mention-bubble .icon-user-forced-white.mention-bubble__icon-- { + background-size: 75%; +} + +.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--, +.autocomplete-result .icon-user-forced-white.autocomplete-result__icon-- { background-size: 50% !important; }