Separate methods for theme style and meta color tags (#29802)

This commit is contained in:
Matt Jankowski 2024-04-05 05:52:43 -04:00 committed by GitHub
parent 52ab8a59c6
commit b61ae28f8d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 123 additions and 14 deletions

View file

@ -160,18 +160,6 @@ module ApplicationHelper
output.compact_blank.join(' ') output.compact_blank.join(' ')
end 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')
concat tag.meta name: 'theme-color', content: Themes::MASTODON_DARK_THEME_COLOR, media: '(prefers-color-scheme: dark)'
concat tag.meta name: 'theme-color', content: Themes::MASTODON_LIGHT_THEME_COLOR, media: '(prefers-color-scheme: light)'
else
concat stylesheet_pack_tag theme, media: 'all', crossorigin: 'anonymous'
concat tag.meta name: 'theme-color', content: theme == 'mastodon-light' ? Themes::MASTODON_LIGHT_THEME_COLOR : Themes::MASTODON_DARK_THEME_COLOR
end
end
def cdn_host def cdn_host
Rails.configuration.action_controller.asset_host Rails.configuration.action_controller.asset_host
end end

View file

@ -0,0 +1,27 @@
# frozen_string_literal: true
module ThemeHelper
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 theme_color_tags(theme)
if theme == 'system'
concat tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:dark], media: '(prefers-color-scheme: dark)')
concat tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:light], media: '(prefers-color-scheme: light)')
else
tag.meta name: 'theme-color', content: theme_color_for(theme)
end
end
private
def theme_color_for(theme)
theme == 'mastodon-light' ? Themes::THEME_COLORS[:light] : Themes::THEME_COLORS[:dark]
end
end

View file

@ -6,8 +6,10 @@ require 'yaml'
class Themes class Themes
include Singleton include Singleton
MASTODON_DARK_THEME_COLOR = '#191b22' THEME_COLORS = {
MASTODON_LIGHT_THEME_COLOR = '#f3f5f7' dark: '#191b22',
light: '#f3f5f7',
}.freeze
def initialize def initialize
@conf = YAML.load_file(Rails.root.join('config', 'themes.yml')) @conf = YAML.load_file(Rails.root.join('config', 'themes.yml'))

View file

@ -21,6 +21,7 @@
%link{ rel: 'mask-icon', href: frontend_asset_path('images/logo-symbol-icon.svg'), color: '#6364FF' }/ %link{ rel: 'mask-icon', href: frontend_asset_path('images/logo-symbol-icon.svg'), color: '#6364FF' }/
%link{ rel: 'manifest', href: manifest_path(format: :json) }/ %link{ rel: 'manifest', href: manifest_path(format: :json) }/
= theme_color_tags current_theme
%meta{ name: 'apple-mobile-web-app-capable', content: 'yes' }/ %meta{ name: 'apple-mobile-web-app-capable', content: 'yes' }/
%title= html_title %title= html_title

View file

@ -0,0 +1,91 @@
# frozen_string_literal: true
require 'rails_helper'
describe ThemeHelper do
describe 'theme_style_tags' do
let(:result) { helper.theme_style_tags(theme) }
context 'when using system theme' do
let(:theme) { 'system' }
it 'returns the mastodon-light and default stylesheets with correct color schemes' do
expect(html_links.first.attributes.symbolize_keys)
.to include(
href: have_attributes(value: match(/mastodon-light/)),
media: have_attributes(value: 'not all and (prefers-color-scheme: dark)')
)
expect(html_links.last.attributes.symbolize_keys)
.to include(
href: have_attributes(value: match(/default/)),
media: have_attributes(value: '(prefers-color-scheme: dark)')
)
end
end
context 'when using other theme' do
let(:theme) { 'contrast' }
it 'returns the theme stylesheet without color scheme information' do
expect(html_links.first.attributes.symbolize_keys)
.to include(
href: have_attributes(value: match(/contrast/)),
media: have_attributes(value: 'all')
)
end
end
end
describe 'theme_color_tags' do
let(:result) { helper.theme_color_tags(theme) }
context 'when using system theme' do
let(:theme) { 'system' }
it 'returns the mastodon-light and default stylesheets with correct color schemes' do
expect(html_theme_colors.first.attributes.symbolize_keys)
.to include(
content: have_attributes(value: Themes::THEME_COLORS[:dark]),
media: have_attributes(value: '(prefers-color-scheme: dark)')
)
expect(html_theme_colors.last.attributes.symbolize_keys)
.to include(
content: have_attributes(value: Themes::THEME_COLORS[:light]),
media: have_attributes(value: '(prefers-color-scheme: light)')
)
end
end
context 'when using mastodon-light theme' do
let(:theme) { 'mastodon-light' }
it 'returns the theme stylesheet without color scheme information' do
expect(html_theme_colors.first.attributes.symbolize_keys)
.to include(
content: have_attributes(value: Themes::THEME_COLORS[:light])
)
end
end
context 'when using other theme' do
let(:theme) { 'contrast' }
it 'returns the theme stylesheet without color scheme information' do
expect(html_theme_colors.first.attributes.symbolize_keys)
.to include(
content: have_attributes(value: Themes::THEME_COLORS[:dark])
)
end
end
end
private
def html_links
Nokogiri::HTML5.fragment(result).css('link')
end
def html_theme_colors
Nokogiri::HTML5.fragment(result).css('meta[name=theme-color]')
end
end