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 {