diff --git a/app/controllers/concerns/theming_concern.rb b/app/controllers/concerns/theming_concern.rb
index ebdaf54c05..38b31e932f 100644
--- a/app/controllers/concerns/theming_concern.rb
+++ b/app/controllers/concerns/theming_concern.rb
@@ -12,13 +12,13 @@ module ThemingConcern
def current_skin
@current_skin ||= begin
skins = Themes.instance.skins_for(current_flavour)
- [current_user&.setting_skin, Setting.skin, 'default'].find { |skin| skins.include?(skin) }
+ [current_user&.setting_skin, Setting.skin, 'system', 'default'].find { |skin| skins.include?(skin) }
end
end
def current_theme
# NOTE: this is slightly different from upstream, as it's a derived value used
# for the sole purpose of pointing to the appropriate stylesheet pack
- "skins/#{current_flavour}/#{current_skin}"
+ [current_flavour, current_skin]
end
end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index b0114132cc..dba10a1646 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -161,6 +161,17 @@ module ApplicationHelper
output.compact_blank.join(' ')
end
+ def theme_style_tags(flavour_and_skin)
+ flavour, theme = flavour_and_skin
+
+ if theme == 'system'
+ concat stylesheet_pack_tag("skins/#{flavour}/mastodon-light", media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous')
+ concat stylesheet_pack_tag("skins/#{flavour}/default", media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
+ else
+ stylesheet_pack_tag "skins/#{flavour}/#{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('๐bar๐ด๐'))
- .toEqual('๐bar๐ด
');
+ .toEqual('๐bar๐ด');
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('
');
+ .toEqual('');
});
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 89730c9b31..c24f0641a9 100644
--- a/app/lib/themes.rb
+++ b/app/lib/themes.rb
@@ -63,7 +63,8 @@ class Themes
end
def skins_for(name)
- @flavours[name]['skins']
+ skins = @flavours[name]['skins']
+ skins.include?('default') && skins.include?('mastodon-light') ? ['system'] + skins : skins
end
def flavours_and_skins
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 7d69ea88e6..a1d6e75000 100755
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -27,7 +27,7 @@
%title= html_title
= flavoured_stylesheet_pack_tag 'common', media: 'all', crossorigin: 'anonymous' # upstream uses `common` but that's implicitly defined
- = 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