diff --git a/images/any-emoji-32-hover.svg b/images/any-emoji-32-dark-hover.svg similarity index 100% rename from images/any-emoji-32-hover.svg rename to images/any-emoji-32-dark-hover.svg diff --git a/images/any-emoji-32.svg b/images/any-emoji-32-dark.svg similarity index 100% rename from images/any-emoji-32.svg rename to images/any-emoji-32-dark.svg diff --git a/images/any-emoji-32-light-hover.svg b/images/any-emoji-32-light-hover.svg new file mode 100644 index 000000000..96a9fab0d --- /dev/null +++ b/images/any-emoji-32-light-hover.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/any-emoji-32-light.svg b/images/any-emoji-32-light.svg new file mode 100644 index 000000000..a91e2651f --- /dev/null +++ b/images/any-emoji-32-light.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 54788f882..2a51007ac 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -5162,16 +5162,31 @@ button.module-image__border-overlay:focus { background: rgba($color-white, 0.3); } &--more { - background: url('../images/any-emoji-32.svg') no-repeat center; + @include light-theme { + background: url('../images/any-emoji-32-light.svg') no-repeat center; + } + + @include dark-theme { + background: url('../images/any-emoji-32-dark.svg') no-repeat center; + } &::after { content: ''; display: block; width: 52px; height: 52px; - background: url('../images/any-emoji-32-hover.svg') no-repeat center; opacity: 0; transition: opacity 400ms $ease-out-expo; + + @include light-theme { + background: url('../images/any-emoji-32-light-hover.svg') no-repeat + center; + } + + @include dark-theme { + background: url('../images/any-emoji-32-dark-hover.svg') no-repeat + center; + } } &:hover::after {