Fix inversion of emoji colours based on dark/light mode (#37120)

app/javascript/mastodon/features/emoji/constants.ts

@@ -116,3 +116,29 @@ export const EMOJIS_WITH_LIGHT_BORDER = [
   '🪽', // 1FAE8
   '🪿', // 1FABF
 ];
+
+export const EMOJIS_REQUIRING_INVERSION_IN_LIGHT_MODE = [
+  '⛓️', // 26D3-FE0F
+];
+
+export const EMOJIS_REQUIRING_INVERSION_IN_DARK_MODE = [
+  '🔜', // 1F51C
+  '🔙', // 1F519
+  '🔛', // 1F51B
+  '🔝', // 1F51D
+  '🔚', // 1F51A
+  '©️', // 00A9 FE0F
+  '➰', // 27B0
+  '💱', // 1F4B1
+  '✔️', // 2714 FE0F
+  '➗', // 2797
+  '💲', // 1F4B2
+  '➖', // 2796
+  '✖️', // 2716 FE0F
+  '➕', // 2795
+  '®️', // 00AE FE0F
+  '🕷️', // 1F577 FE0F
+  '📞', // 1F4DE
+  '™️', // 2122 FE0F
+  '〰️', // 3030 FE0F
+];

app/javascript/mastodon/features/emoji/emoji.js

@@ -1,5 +1,6 @@
 import Trie from 'substring-trie';
 
+import { getUserTheme, isDarkMode } from '@/mastodon/utils/theme';
 import { assetHost } from 'mastodon/utils/config';
 
 import { autoPlayGif } from '../../initial_state';
@@ -97,9 +98,9 @@ const emojifyTextNode = (node, customEmojis) => {
       const { filename, shortCode } = unicodeMapping[unicode_emoji];
       const title = shortCode ? `:${shortCode}:` : '';
 
-      const isSystemTheme = !!document.body?.classList.contains('theme-system');
+      const isSystemTheme = getUserTheme() === 'system';
 
-      const theme = (isSystemTheme || document.body?.classList.contains('theme-mastodon-light')) ? 'light' : 'dark';
+      const theme = (isSystemTheme || !isDarkMode()) ? 'light' : 'dark';
 
       const imageFilename = emojiFilename(filename, theme);
 

app/javascript/mastodon/features/emoji/mode.ts

@@ -3,6 +3,7 @@
 
 import { createAppSelector, useAppSelector } from '@/mastodon/store';
 import { isDevelopment } from '@/mastodon/utils/environment';
+import { isDarkMode } from '@/mastodon/utils/theme';
 
 import {
   EMOJI_MODE_NATIVE,
@@ -27,7 +28,7 @@ export function useEmojiAppState(): EmojiAppState {
     currentLocale: locale,
     locales: [locale],
     mode,
-    darkTheme: document.body.classList.contains('theme-default'),
+    darkTheme: isDarkMode(),
   };
 }
 

app/javascript/mastodon/features/emoji/normalize.ts

@@ -10,6 +10,8 @@ import {
   SKIN_TONE_CODES,
   EMOJIS_WITH_DARK_BORDER,
   EMOJIS_WITH_LIGHT_BORDER,
+  EMOJIS_REQUIRING_INVERSION_IN_LIGHT_MODE,
+  EMOJIS_REQUIRING_INVERSION_IN_DARK_MODE,
 } from './constants';
 import type { CustomEmojiMapArg, ExtraCustomEmojiMap } from './types';
 
@@ -150,6 +152,16 @@ export function twemojiToUnicodeInfo(
   return hexNumbersToString(mappedCodes);
 }
 
+export function emojiToInversionClassName(emoji: string): string | null {
+  if (EMOJIS_REQUIRING_INVERSION_IN_DARK_MODE.includes(emoji)) {
+    return 'invert-on-dark';
+  }
+  if (EMOJIS_REQUIRING_INVERSION_IN_LIGHT_MODE.includes(emoji)) {
+    return 'invert-on-light';
+  }
+  return null;
+}
+
 export function cleanExtraEmojis(extraEmojis?: CustomEmojiMapArg) {
   if (!extraEmojis) {
     return null;