Enable theming via new HTML element attributes (#37477)

2026-01-18 16:56:39 +00:00 · 2026-01-15 17:04:27 +01:00 · 2026-01-15 17:04:27 +01:00 · bc2f8a358f
commit bc2f8a358f
parent c09fbeb32f
13 changed files with 53 additions and 60 deletions
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@ -1,2 +1,2 @@
-<html class="no-reduce-motion theme-light">
+<html class="no-reduce-motion" data-color-scheme="light">
 </html>
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@ -89,6 +89,12 @@ module ApplicationHelper
    Rails.env.production? ? site_title : "#{site_title} (Dev)"
  end

+  def page_color_scheme
+    return content_for(:force_color_scheme) if content_for(:force_color_scheme)
+
+    color_scheme
+  end
+
  def label_for_scope(scope)
    safe_join [
      tag.samp(scope, class: { 'scope-danger' => SessionActivation::DEFAULT_SCOPES.include?(scope.to_s) }),
@ -153,6 +159,19 @@ module ApplicationHelper
    tag.meta(content: content, property: property)
  end

+  def html_attributes
+    base = {
+      lang: I18n.locale,
+      class: html_classes,
+      'data-contrast': contrast.parameterize,
+      'data-color-scheme': page_color_scheme.parameterize,
+    }
+
+    base[:'data-system-theme'] = 'true' if page_color_scheme == 'auto'
+
+    base
+  end
+
  def html_classes
    output = []
    output << content_for(:html_classes)
--- a/app/javascript/inline/theme-selection.js
+++ b/app/javascript/inline/theme-selection.js
@ -1,16 +1,17 @@
 (function (element) {
-  const {userTheme} = element.dataset;
+  const {colorScheme, contrast} = element.dataset;

  const colorSchemeMediaWatcher = window.matchMedia('(prefers-color-scheme: dark)');
  const contrastMediaWatcher = window.matchMedia('(prefers-contrast: more)');

  const updateColorScheme = () => {
-    const useDarkMode = userTheme === 'system' ? colorSchemeMediaWatcher.matches : userTheme !== 'mastodon-light';
-    element.dataset.mode = useDarkMode ? 'dark' : 'light';
+    const useDarkMode = colorScheme === 'auto' ? colorSchemeMediaWatcher.matches : colorScheme === 'dark';
+
+    element.dataset.colorScheme = useDarkMode ? 'dark' : 'light';
  };

  const updateContrast = () => {
-    const useHighContrast = userTheme === 'contrast' || contrastMediaWatcher.matches;
+    const useHighContrast = contrast === 'high' || contrastMediaWatcher.matches;

    element.dataset.contrast = useHighContrast ? 'high' : 'default';
  }
--- a/app/javascript/mastodon/features/annual_report/announcement/index.tsx
+++ b/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'
--- a/app/javascript/mastodon/features/annual_report/index.tsx
+++ b/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>}
--- a/app/javascript/mastodon/features/annual_report/modal.tsx
+++ b/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 ? (
--- a/app/javascript/mastodon/features/emoji/tests/emoji-test.js
+++ b/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)', () => {
--- a/app/javascript/mastodon/features/emoji/emoji.js
+++ b/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';

--- a/app/javascript/mastodon/utils/theme.ts
+++ b/app/javascript/mastodon/utils/theme.ts
@ -1,11 +1,9 @@
-export function getUserTheme() {
-  const { userTheme } = document.documentElement.dataset;
-  return userTheme;
+export function getIsSystemTheme() {
+  const { systemTheme } = document.documentElement.dataset;
+  return systemTheme === 'true';
 }

 export function isDarkMode() {
-  const { userTheme } = document.documentElement.dataset;
-  return userTheme === 'system'
-    ? window.matchMedia('(prefers-color-scheme: dark)').matches
-    : userTheme !== 'mastodon-light';
+  const { colorScheme } = document.documentElement.dataset;
+  return colorScheme === 'dark';
 }
--- a/app/javascript/styles/mastodon/theme/index.scss
+++ b/app/javascript/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,
-html:where(
-  :not([data-user-theme='mastodon-light'], [data-user-theme='system'])
-) {
+[data-color-scheme='dark'],
+html:not([data-color-scheme]) {
  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'],
-html[data-user-theme='contrast'] .theme-dark {
-  @include dark.contrast-overrides;
-}
-
-.theme-light,
-html:where([data-user-theme='mastodon-light']) {
+[data-color-scheme='light'] {
  color-scheme: light;

  @include light.tokens;
  @include utils.invert-on-light;
+
+  &[data-contrast='high'],
+  [data-contrast='high'] & {
+    @include light.contrast-overrides;
+  }
 }
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@ -1,5 +1,5 @@
 !!! 5
-%html{ lang: I18n.locale, class: html_classes, 'data-user-theme': current_theme.parameterize, 'data-contrast': contrast.parameterize, 'data-mode': color_scheme.parameterize }
+%html{ html_attributes }
  %head
    %meta{ charset: 'utf-8' }/
    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' }/
--- a/app/views/wrapstodon/show.html.haml
+++ b/app/views/wrapstodon/show.html.haml
@ -13,7 +13,7 @@

  = vite_typescript_tag 'wrapstodon.tsx', crossorigin: 'anonymous'

- content_for :html_classes, 'theme-dark'
+- content_for :force_color_scheme, 'dark'

 #wrapstodon
 = render_wrapstodon_share_data @generated_annual_report
--- a/spec/requests/content_security_policy_spec.rb
+++ b/spec/requests/content_security_policy_spec.rb
@ -32,7 +32,7 @@ RSpec.describe 'Content-Security-Policy' do
      img-src 'self' data: blob: #{local_domain}
      manifest-src 'self' #{local_domain}
      media-src 'self' data: #{local_domain}
-      script-src 'self' #{local_domain} 'wasm-unsafe-eval' 'sha256-Q/2Cjx8v06hAdOF8/DeBUpsmBcSj7sLN3I/WpTF8T8c='
+      script-src 'self' #{local_domain} 'wasm-unsafe-eval' 'sha256-Z5KW83D+6/pygIQS3h9XDpF52xW3l3BHc7JL9tj3uMs='
      style-src 'self' #{local_domain} 'nonce-ZbA+JmE7+bK8F5qvADZHuQ=='
      worker-src 'self' blob: #{local_domain}
    CSP