Enable theming via new HTML element attributes (#37477)

app/javascript/mastodon/features/annual_report/announcement/index.tsx

@@ -1,7 +1,5 @@
 import { FormattedMessage } from 'react-intl';
 
-import classNames from 'classnames';
-
 import type { ApiAnnualReportState } from '@/mastodon/api/annual_report';
 import { Button } from '@/mastodon/components/button';
 
@@ -19,7 +17,7 @@ export const AnnualReportAnnouncement: React.FC<
   AnnualReportAnnouncementProps
 > = ({ year, state, onRequestBuild, onOpen, onDismiss }) => {
   return (
-    <div className={classNames('theme-dark', styles.wrapper)}>
+    <div className={styles.wrapper} data-color-scheme='dark'>
       <FormattedMessage
         id='annual_report.announcement.title'
         defaultMessage='Wrapstodon {year} has arrived'

app/javascript/mastodon/features/annual_report/index.tsx

@@ -81,7 +81,7 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
   const topHashtag = report.data.top_hashtags[0];
 
   return (
-    <div className={moduleClassNames(styles.wrapper, 'theme-dark')}>
+    <div className={styles.wrapper} data-color-scheme='dark'>
       <div className={styles.header}>
         <h1>Wrapstodon {report.year}</h1>
         {account && <p>@{account.acct}</p>}

app/javascript/mastodon/features/annual_report/modal.tsx

@@ -60,11 +60,8 @@ const AnnualReportModal: React.FC<{
     // default modal backdrop, preventing clicks to pass through.
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
-      className={classNames(
-        'modal-root__modal',
-        styles.modalWrapper,
-        'theme-dark',
-      )}
+      className={classNames('modal-root__modal', styles.modalWrapper)}
+      data-color-scheme='dark'
       onClick={handleCloseModal}
     >
       {!showAnnouncement ? (

app/javascript/mastodon/features/emoji/__tests__/emoji-test.js

@@ -86,7 +86,7 @@ describe('emoji', () => {
 
     it('does an emoji containing ZWJ properly', () => {
       expect(emojify('💂‍♀️💂‍♂️'))
-        .toEqual('<img draggable="false" class="emojione" alt="💂\u200D♀️" title=":female-guard:" src="/emoji/1f482-200d-2640-fe0f_border.svg"><img draggable="false" class="emojione" alt="💂\u200D♂️" title=":male-guard:" src="/emoji/1f482-200d-2642-fe0f_border.svg">');
+        .toEqual('<img draggable="false" class="emojione" alt="💂‍♀️" title=":female-guard:" src="/emoji/1f482-200d-2640-fe0f.svg"><img draggable="false" class="emojione" alt="💂‍♂️" title=":male-guard:" src="/emoji/1f482-200d-2642-fe0f.svg">');
     });
 
     it('keeps ordering as expected (issue fixed by PR 20677)', () => {

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

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