Merge pull request #1 from misterzwiebel/fix/themes

Add high contrast and light theme
This commit is contained in:
@stux 2023-07-02 20:43:19 +02:00 committed by GitHub
commit a050e72cc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 30 additions and 12 deletions

View File

@ -4,13 +4,15 @@ To add the [Bird UI theme](https://github.com/ronilaukkarinen/mastodon-bird-ui)
1. Add the files from the repo (elephant.scss) and the folder elephant to your Mastodon themes directory: 1. Add the files from the repo (elephant-*.scss) and the folder elephant to your Mastodon themes directory:
``` ```
app/ app/
javascript/ javascript/
styles/ styles/
elephant.scss | **new** elephant.scss | **new**
elephant-contrast.scss | **new**
elephant-light.scss | **new**
contrast/ contrast/
... ...
fonts/ fonts/
@ -21,16 +23,18 @@ app/
``` ```
2. **Add your theme to the config.** This is what [the default themes.yml](https://github.com/tootsuite/mastodon/blob/master/config/themes.yml) looks like in Mastodon. To make your custom theme visible in settings, you need to add a new line in the form `themeName: path/to/theme.scss`. For example, the modern-dark theme would require adding `modern-dark: styles/modern-dark.scss` as a new line. 2. **Add your themes to the config.** This is what [the default themes.yml](https://github.com/tootsuite/mastodon/blob/master/config/themes.yml) looks like in Mastodon. To make your custom themes visible in settings, you need to add a new line in the form `themeName: path/to/theme.scss`. For example, the modern-dark theme would require adding `modern-dark: styles/modern-dark.scss` as a new line.
``` ```
default: styles/application.scss default: styles/application.scss
contrast: styles/contrast.scss contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss mastodon-light: styles/mastodon-light.scss
elephant: styles/elephant.scss | **new** elephant: styles/elephant.scss | **new**
elephant-contrast: styles/elephant-contrast.scss | **new**
elephant-light: styles/elephant-light.scss | **new**
``` ```
3. **Add a human-friendly name for the theme (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for your theme's `themeName` as added in the previous step. For example, [the default `config/locales/en.yml`](https://github.com/tootsuite/mastodon/blob/041ff5fa9a45f7b8d1048a05a35611622b6f5fdb/config/locales/en.yml#L942-L945) contains localizations for the three default themes that ship with Mastodon, into the `en`glish language. You need to do this for every language you expect your users to use, or else they will see the unlocalized `themeName` directly. 3. **Add a human-friendly name for the themes (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for your theme's `themeName` as added in the previous step. For example, [the default `config/locales/en.yml`](https://github.com/tootsuite/mastodon/blob/041ff5fa9a45f7b8d1048a05a35611622b6f5fdb/config/locales/en.yml#L942-L945) contains localizations for the three default themes that ship with Mastodon, into the `en`glish language. You need to do this for every language you expect your users to use, or else they will see the unlocalized `themeName` directly.
``` ```
themes: themes:
@ -38,6 +42,8 @@ app/
default: Mastodon (Dark) default: Mastodon (Dark)
mastodon-light: Mastodon (Light) mastodon-light: Mastodon (Light)
elephant: Elephant | **new** elephant: Elephant | **new**
elephant-contrast: Elephant (High contrast) | **new**
elephant-light: Elephant (Light) | **new**
``` ```
4. **Compile theme assets and restart.** Run `RAILS_ENV=production bundle exec rails assets:precompile` and restart your Mastodon instance for the changes to take effect. 4. **Compile theme assets and restart.** Run `RAILS_ENV=production bundle exec rails assets:precompile` and restart your Mastodon instance for the changes to take effect.

View File

@ -0,0 +1,5 @@
@import 'contrast/variables';
@import 'application';
@import 'contrast/diff';
@import 'elephant/layout-single-column.scss';
@import 'elephant/layout-multiple-columns.scss';

View File

@ -0,0 +1,5 @@
@import 'mastodon-light/variables';
@import 'application';
@import 'mastodon-light/diff';
@import 'elephant/layout-single-column.scss';
@import 'elephant/layout-multiple-columns.scss';

View File

@ -141,7 +141,7 @@
} }
/* High Contrast theme */ /* High Contrast theme */
body.theme-contrast.layout-multiple-columns { body.theme-elephant-contrast.layout-multiple-columns {
--color-dim: #b8b3c0; --color-dim: #b8b3c0;
/* Icons */ /* Icons */
@ -161,7 +161,7 @@ body.theme-contrast.layout-multiple-columns {
} }
/* Light theme */ /* Light theme */
body.theme-mastodon-light.layout-multiple-columns { body.theme-elephant-light.layout-multiple-columns {
--color-bg: #fff; --color-bg: #fff;
--color-fg: #000; --color-fg: #000;
--color-border: #e6e1ed; --color-border: #e6e1ed;

View File

@ -140,7 +140,7 @@
} }
/* High Contrast theme */ /* High Contrast theme */
body.theme-contrast.layout-single-column { body.theme-elephant-contrast.layout-single-column {
--color-dim: #b8b3c0; --color-dim: #b8b3c0;
/* Icons */ /* Icons */
@ -160,7 +160,7 @@ body.theme-contrast.layout-single-column {
} }
/* Light theme */ /* Light theme */
body.theme-mastodon-light.layout-single-column { body.theme-elephant-light.layout-single-column {
--color-bg: #fff; --color-bg: #fff;
--color-fg: #000; --color-fg: #000;
--color-border: #e6e1ed; --color-border: #e6e1ed;

View File

@ -2,3 +2,5 @@ default: styles/application.scss
contrast: styles/contrast.scss contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss mastodon-light: styles/mastodon-light.scss
elephant: styles/elephant.scss elephant: styles/elephant.scss
elephant-contrast: styles/elephant-contrast.scss
elephant-light: styles/elephant-light.scss