[Glitch] Enable theming via new HTML element attributes

Port bc2f8a358f96a9540e6f39bb1c58273deb4545de to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/annual_report/announcement/index.tsx

@@ -1,7 +1,5 @@
 import { FormattedMessage } from 'react-intl';
 
-import classNames from 'classnames';
-
 import type { ApiAnnualReportState } from '@/flavours/glitch/api/annual_report';
 import { Button } from '@/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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(
+      className={classNames('modal-root__modal', styles.modalWrapper)}
-        'modal-root__modal',
+      data-color-scheme='dark'
-        styles.modalWrapper,
-        'theme-dark',
-      )}
       onClick={handleCloseModal}
     >
       {!showAnnouncement ? (

app/javascript/flavours/glitch/features/emoji/emoji.js

@@ -1,6 +1,6 @@
 import Trie from 'substring-trie';
 
-import { getUserTheme, isDarkMode } from '@/flavours/glitch/utils/theme';
+import { getIsSystemTheme, isDarkMode } from '@/flavours/glitch/utils/theme';
 import { assetHost } from 'flavours/glitch/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';
 

app/javascript/flavours/glitch/styles/mastodon/theme/index.scss

@@ -5,49 +5,29 @@
 
 html {
   @include base.palette;
-
-  &:where([data-user-theme='system']) {
-    color-scheme: dark light;
-
-    @media (prefers-color-scheme: dark) {
-      @include dark.tokens;
-      @include utils.invert-on-dark;
-
-      @media (prefers-contrast: more) {
-        @include dark.contrast-overrides;
-      }
-    }
-
-    @media (prefers-color-scheme: light) {
-      @include light.tokens;
-      @include utils.invert-on-light;
-
-      @media (prefers-contrast: more) {
-        @include light.contrast-overrides;
-      }
-    }
-  }
 }
 
-.theme-dark,
+[data-color-scheme='dark'],
-html:where(
+html:not([data-color-scheme]) {
-  :not([data-user-theme='mastodon-light'], [data-user-theme='system'])
-) {
   color-scheme: dark;
 
   @include dark.tokens;
   @include utils.invert-on-dark;
+
+  &[data-contrast='high'],
+  [data-contrast='high'] & {
+    @include dark.contrast-overrides;
+  }
 }
 
-html[data-user-theme='contrast'],
+[data-color-scheme='light'] {
-html[data-user-theme='contrast'] .theme-dark {
-  @include dark.contrast-overrides;
-}
-
-.theme-light,
-html:where([data-user-theme='mastodon-light']) {
   color-scheme: light;
 
   @include light.tokens;
   @include utils.invert-on-light;
+
+  &[data-contrast='high'],
+  [data-contrast='high'] & {
+    @include light.contrast-overrides;
+  }
 }

app/javascript/flavours/glitch/utils/theme.ts

@@ -1,11 +1,9 @@
-export function getUserTheme() {
+export function getIsSystemTheme() {
-  const { userTheme } = document.documentElement.dataset;
+  const { systemTheme } = document.documentElement.dataset;
-  return userTheme;
+  return systemTheme === 'true';
 }
 
 export function isDarkMode() {
-  const { userTheme } = document.documentElement.dataset;
+  const { colorScheme } = document.documentElement.dataset;
-  return userTheme === 'system'
+  return colorScheme === 'dark';
-    ? window.matchMedia('(prefers-color-scheme: dark)').matches
-    : userTheme !== 'mastodon-light';
 }