Mastodon-MaterialMaterial Design Native Theme for Mastodon
Mastodon Material
Language | 言語
Overview
Mastodon Material is the native theme for Mastodon, which based on Material Design. Development policy is here (Japanese).
Screenshots
show/hide
Requirement
How to install
-
Copy these files of this repository into
app/javascript/styles
of Mastodon source directory./src/mastodon-material/
/src/mastodon-material.scss
-
Add the below code on
config/themes.yml
default: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss # Added theme mastodon-material: styles/mastodon-material.scss # add this line
-
If you want to change the display theme name in your language, add localization strings to
config/locales/{lang}.yml
like below (At leastconfig/locales/en.yml
is REQUIRED)themes: contrast: High contrast default: Mastodon mastodon-light: Mastodon (light) # Added theme mastodon-material: Mastodon Material # add this line
-
If you configure to use the webfont on Google Fonts (default) or on GitHub, you need to add an exception to CSP (Content Security Policy). Make sure to change
config/initializers/content_security_policy.rb
:def host_to_url(str) "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str}" unless str.blank? end base_host = Rails.configuration.x.web_domain assets_host = Rails.configuration.action_controller.asset_host assets_host ||= host_to_url(base_host) media_host = host_to_url(ENV['S3_ALIAS_HOST']) media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST']) media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true' media_host ||= assets_host Rails.application.config.content_security_policy do |p| p.base_uri :none p.default_src :none p.frame_ancestors :none p.font_src :self, assets_host p.img_src :self, :https, :data, :blob, assets_host p.style_src :self, :unsafe_inline, assets_host p.media_src :self, :https, :data, assets_host p.frame_src :self, :https p.manifest_src :self, assets_host
into
def host_to_url(str) "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str}" unless str.blank? end base_host = Rails.configuration.x.web_domain assets_host = Rails.configuration.action_controller.asset_host assets_host ||= host_to_url(base_host) media_host = host_to_url(ENV['S3_ALIAS_HOST']) media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST']) media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true' media_host ||= assets_host # custom host github_host = "https://raw.githubusercontent.com" # GitHub google_fonts_host = "https://fonts.gstatic.com" # Google Fonts Rails.application.config.content_security_policy do |p| p.base_uri :none p.default_src :none p.frame_ancestors :none p.font_src :self, assets_host, github_host, google_fonts_host p.img_src :self, :https, :data, :blob, assets_host p.style_src :self, :unsafe_inline, assets_host p.media_src :self, :https, :data, assets_host p.frame_src :self, :https p.manifest_src :self, assets_host
Diff
def host_to_url(str) "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str}" unless str.blank? end base_host = Rails.configuration.x.web_domain assets_host = Rails.configuration.action_controller.asset_host assets_host ||= host_to_url(base_host) media_host = host_to_url(ENV['S3_ALIAS_HOST']) media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST']) media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true' media_host ||= assets_host + # custom host + github_host = "https://raw.githubusercontent.com" # GitHub + google_fonts_host = "https://fonts.gstatic.com" # Google Fonts Rails.application.config.content_security_policy do |p| p.base_uri :none p.default_src :none p.frame_ancestors :none - p.font_src :self, assets_host + p.font_src :self, assets_host, github_host, google_fonts_host p.img_src :self, :https, :data, :blob, assets_host p.style_src :self, :unsafe_inline, assets_host p.media_src :self, :https, :data, assets_host p.frame_src :self, :https p.manifest_src :self, assets_host
Customization
Stylus/Stylish theme
You can use our theme on any server by the browser extension, Stylus or Stylish.
-
Build by yourself
- Install Sass on your computer. Require version is refered in Requirement.
- Clone or download this repository on your computer.
- If you want to customize, please read Customization Guide.
- Run build.bat (Windows) or build.sh (macOS/Linux). Results will be output in build.css.
- Make a new theme on Stylus or Stylish, copy the code of build.css and paste on it. Add your favorite server domain on it and save/enable it.
License
This theme and the Stylish/Stylus theme can be used under AGPL-3.0. Material Icons font is available under Apache license version 2.0. (This repository does not include Material Icons font.)
The header image was made by using Noto Sans and mastodon.privacyfilter.user.styl.