Merge commit 'b61ae28f8d4b6f269f50a05c3e65ec7f2c846d32' into glitch-soc/merge-upstream
Conflicts: - `app/helpers/application_helper.rb`: Conflict because of our different theming systems. Updated accordingly, along with `app/helpers/theme_helper.rb` and `app/helpers/theme_helper_spec.rb`.shrike
commit
555e33a392
|
@ -161,20 +161,6 @@ module ApplicationHelper
|
||||||
output.compact_blank.join(' ')
|
output.compact_blank.join(' ')
|
||||||
end
|
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')
|
|
||||||
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 "skins/#{flavour}/#{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
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
# frozen_string_literal: true
|
||||||
|
|
||||||
|
module ThemeHelper
|
||||||
|
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
|
||||||
|
concat stylesheet_pack_tag "skins/#{flavour}/#{theme}", media: 'all', crossorigin: 'anonymous'
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
def theme_color_tags(flavour_and_skin)
|
||||||
|
_, theme = flavour_and_skin
|
||||||
|
|
||||||
|
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
|
|
@ -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
|
||||||
@flavours = {}
|
@flavours = {}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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) { ['glitch', '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) { ['glitch', '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) { ['glitch', '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) { ['glitch', '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) { ['glitch', '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
|
Loading…
Reference in New Issue