From 02ea16150647ac3baf0bb8a89203ccc7200b4a2f Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Tue, 26 Mar 2024 10:25:49 +0100 Subject: [PATCH 01/18] Support "system" theme setting (light/dark theme depending on user system preference) (#29748) Co-authored-by: Nishiki Liu --- app/helpers/application_helper.rb | 9 +++++ .../features/emoji/__tests__/emoji-test.js | 38 +++++++++--------- .../mastodon/features/emoji/emoji.js | 39 +++++++++++++++---- app/lib/themes.rb | 2 +- app/views/layouts/application.html.haml | 2 +- app/views/layouts/embedded.html.haml | 2 +- app/views/layouts/error.html.haml | 2 +- config/locales/en.yml | 1 + config/settings.yml | 2 +- 9 files changed, 65 insertions(+), 32 deletions(-) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 668afe7fde..d46d0674a4 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -160,6 +160,15 @@ module ApplicationHelper output.compact_blank.join(' ') end + def theme_style_tags(theme) + if theme == 'system' + concat stylesheet_pack_tag('mastodon-light', media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous') + concat stylesheet_pack_tag('default', media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous') + else + stylesheet_pack_tag theme, media: 'all', crossorigin: 'anonymous' + end + end + def cdn_host Rails.configuration.action_controller.asset_host end diff --git a/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js b/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js index 7b917ac43b..9d6ff5226a 100644 --- a/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js +++ b/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js @@ -22,23 +22,23 @@ describe('emoji', () => { it('does unicode', () => { expect(emojify('\uD83D\uDC69\u200D\uD83D\uDC69\u200D\uD83D\uDC66\u200D\uD83D\uDC66')).toEqual( - '👩‍👩‍👦‍👦'); + '👩‍👩‍👦‍👦'); expect(emojify('👨‍👩‍👧‍👧')).toEqual( - '👨‍👩‍👧‍👧'); - expect(emojify('👩‍👩‍👦')).toEqual('👩‍👩‍👦'); + '👨‍👩‍👧‍👧'); + expect(emojify('👩‍👩‍👦')).toEqual('👩‍👩‍👦'); expect(emojify('\u2757')).toEqual( - '❗'); + '❗'); }); it('does multiple unicode', () => { expect(emojify('\u2757 #\uFE0F\u20E3')).toEqual( - '❗ #️⃣'); + '❗ #️⃣'); expect(emojify('\u2757#\uFE0F\u20E3')).toEqual( - '❗#️⃣'); + '❗#️⃣'); expect(emojify('\u2757 #\uFE0F\u20E3 \u2757')).toEqual( - '❗ #️⃣ ❗'); + '❗ #️⃣ ❗'); expect(emojify('foo \u2757 #\uFE0F\u20E3 bar')).toEqual( - 'foo ❗ #️⃣ bar'); + 'foo ❗ #️⃣ bar'); }); it('ignores unicode inside of tags', () => { @@ -46,16 +46,16 @@ describe('emoji', () => { }); it('does multiple emoji properly (issue 5188)', () => { - expect(emojify('👌🌈💕')).toEqual('👌🌈💕'); - expect(emojify('👌 🌈 💕')).toEqual('👌 🌈 💕'); + expect(emojify('👌🌈💕')).toEqual('👌🌈💕'); + expect(emojify('👌 🌈 💕')).toEqual('👌 🌈 💕'); }); it('does an emoji that has no shortcode', () => { - expect(emojify('👁‍🗨')).toEqual('👁‍🗨'); + expect(emojify('👁‍🗨')).toEqual('👁‍🗨'); }); it('does an emoji whose filename is irregular', () => { - expect(emojify('↙️')).toEqual('↙️'); + expect(emojify('↙️')).toEqual('↙️'); }); it('avoid emojifying on invisible text', () => { @@ -67,11 +67,11 @@ describe('emoji', () => { it('avoid emojifying on invisible text with nested tags', () => { expect(emojify('😇')) - .toEqual('😇'); + .toEqual('😇'); expect(emojify('😇')) - .toEqual('😇'); + .toEqual('😇'); expect(emojify('😇')) - .toEqual('😇'); + .toEqual('😇'); }); it('does not emojify emojis with textual presentation VS15 character', () => { @@ -79,19 +79,19 @@ describe('emoji', () => { .toEqual('✴︎'); }); - it('does an simple emoji properly', () => { + it('does a simple emoji properly', () => { expect(emojify('♀♂')) - .toEqual('♀♂'); + .toEqual('♀♂'); }); it('does an emoji containing ZWJ properly', () => { expect(emojify('💂‍♀️💂‍♂️')) - .toEqual('💂\u200D♀️💂\u200D♂️'); + .toEqual('💂\u200D♀️💂\u200D♂️'); }); it('keeps ordering as expected (issue fixed by PR 20677)', () => { expect(emojify('

💕 #foo test: foo.

')) - .toEqual('

💕 #foo test: foo.

'); + .toEqual('

💕 #foo test: foo.

'); }); }); }); diff --git a/app/javascript/mastodon/features/emoji/emoji.js b/app/javascript/mastodon/features/emoji/emoji.js index 5918a65ed7..e4aad302f6 100644 --- a/app/javascript/mastodon/features/emoji/emoji.js +++ b/app/javascript/mastodon/features/emoji/emoji.js @@ -17,8 +17,13 @@ const emojiFilenames = (emojis) => { const darkEmoji = emojiFilenames(['🎱', '🐜', '⚫', '🖤', '⬛', '◼️', '◾', '◼️', '✒️', '▪️', '💣', '🎳', '📷', '📸', '♣️', '🕶️', '✴️', '🔌', '💂‍♀️', '📽️', '🍳', '🦍', '💂', '🔪', '🕳️', '🕹️', '🕋', '🖊️', '🖋️', '💂‍♂️', '🎤', '🎓', '🎥', '🎼', '♠️', '🎩', '🦃', '📼', '📹', '🎮', '🐃', '🏴', '🐞', '🕺', '📱', '📲', '🚲', '🪮', '🐦‍⬛']); const lightEmoji = emojiFilenames(['👽', '⚾', '🐔', '☁️', '💨', '🕊️', '👀', '🍥', '👻', '🐐', '❕', '❔', '⛸️', '🌩️', '🔊', '🔇', '📃', '🌧️', '🐏', '🍚', '🍙', '🐓', '🐑', '💀', '☠️', '🌨️', '🔉', '🔈', '💬', '💭', '🏐', '🏳️', '⚪', '⬜', '◽', '◻️', '▫️', '🪽', '🪿']); -const emojiFilename = (filename) => { - const borderedEmoji = (document.body && document.body.classList.contains('theme-mastodon-light')) ? lightEmoji : darkEmoji; +/** + * @param {string} filename + * @param {"light" | "dark" } colorScheme + * @returns {string} + */ +const emojiFilename = (filename, colorScheme) => { + const borderedEmoji = colorScheme === "light" ? lightEmoji : darkEmoji; return borderedEmoji.includes(filename) ? (filename + '_border') : filename; }; @@ -92,12 +97,30 @@ const emojifyTextNode = (node, customEmojis) => { const { filename, shortCode } = unicodeMapping[unicode_emoji]; const title = shortCode ? `:${shortCode}:` : ''; - replacement = document.createElement('img'); - replacement.setAttribute('draggable', 'false'); - replacement.setAttribute('class', 'emojione'); - replacement.setAttribute('alt', unicode_emoji); - replacement.setAttribute('title', title); - replacement.setAttribute('src', `${assetHost}/emoji/${emojiFilename(filename)}.svg`); + replacement = document.createElement('picture'); + + const isSystemTheme = !!document.body?.classList.contains('theme-system'); + + if(isSystemTheme) { + let source = document.createElement('source'); + source.setAttribute('media', '(prefers-color-scheme: dark)'); + source.setAttribute('srcset', `${assetHost}/emoji/${emojiFilename(filename, "dark")}.svg`); + replacement.appendChild(source); + } + + let img = document.createElement('img'); + img.setAttribute('draggable', 'false'); + img.setAttribute('class', 'emojione'); + img.setAttribute('alt', unicode_emoji); + img.setAttribute('title', title); + + let theme = "light"; + + if(!isSystemTheme && !document.body?.classList.contains('theme-mastodon-light')) + theme = "dark"; + + img.setAttribute('src', `${assetHost}/emoji/${emojiFilename(filename, theme)}.svg`); + replacement.appendChild(img); } // Add the processed-up-to-now string and the emoji replacement diff --git a/app/lib/themes.rb b/app/lib/themes.rb index 243ffb9ab9..4010d84435 100644 --- a/app/lib/themes.rb +++ b/app/lib/themes.rb @@ -11,6 +11,6 @@ class Themes end def names - @conf.keys + ['system'] + @conf.keys end end diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 449657f8ca..0cd7fc9f44 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -27,7 +27,7 @@ %title= html_title = stylesheet_pack_tag 'common', media: 'all', crossorigin: 'anonymous' - = stylesheet_pack_tag current_theme, media: 'all', crossorigin: 'anonymous' + = theme_style_tags current_theme -# Needed for the wicg-inert polyfill. It needs to be on it's own