From 7c0c8604f67fbeb56908b03674f0ba73d755f422 Mon Sep 17 00:00:00 2001 From: Zwiebel <88088481+misterzwiebel@users.noreply.github.com> Date: Thu, 8 Jun 2023 22:58:11 +0200 Subject: [PATCH] Add high contrast and light theme --- README.md | 22 ++++++++++++------- .../javascript/styles/elephant-contrast.scss | 5 +++++ .../app/javascript/styles/elephant-light.scss | 5 +++++ .../elephant/layout-multiple-columns.scss | 4 ++-- .../styles/elephant/layout-single-column.scss | 4 ++-- mastodon/config/themes.yml | 2 ++ 6 files changed, 30 insertions(+), 12 deletions(-) create mode 100644 mastodon/app/javascript/styles/elephant-contrast.scss create mode 100644 mastodon/app/javascript/styles/elephant-light.scss diff --git a/README.md b/README.md index 3c94be6..364957f 100644 --- a/README.md +++ b/README.md @@ -4,40 +4,46 @@ 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/ javascript/ styles/ elephant.scss | **new** + elephant-contrast.scss | **new** + elephant-light.scss | **new** contrast/ ... fonts/ ... - elephant/ | **new** - layout-multiple-columns.scss | **new** - layout-single-column.scss | **new** + elephant/ | **new** + layout-multiple-columns.scss | **new** + layout-single-column.scss | **new** ``` -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 contrast: styles/contrast.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: contrast: Mastodon (High contrast) default: Mastodon (Dark) 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. diff --git a/mastodon/app/javascript/styles/elephant-contrast.scss b/mastodon/app/javascript/styles/elephant-contrast.scss new file mode 100644 index 0000000..9168cd1 --- /dev/null +++ b/mastodon/app/javascript/styles/elephant-contrast.scss @@ -0,0 +1,5 @@ +@import 'contrast/variables'; +@import 'application'; +@import 'contrast/diff'; +@import 'elephant/layout-single-column.scss'; +@import 'elephant/layout-multiple-columns.scss'; diff --git a/mastodon/app/javascript/styles/elephant-light.scss b/mastodon/app/javascript/styles/elephant-light.scss new file mode 100644 index 0000000..f506e12 --- /dev/null +++ b/mastodon/app/javascript/styles/elephant-light.scss @@ -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'; diff --git a/mastodon/app/javascript/styles/elephant/layout-multiple-columns.scss b/mastodon/app/javascript/styles/elephant/layout-multiple-columns.scss index e7489bf..a519ca6 100644 --- a/mastodon/app/javascript/styles/elephant/layout-multiple-columns.scss +++ b/mastodon/app/javascript/styles/elephant/layout-multiple-columns.scss @@ -141,7 +141,7 @@ } /* High Contrast theme */ -body.theme-contrast.layout-multiple-columns { +body.theme-elephant-contrast.layout-multiple-columns { --color-dim: #b8b3c0; /* Icons */ @@ -161,7 +161,7 @@ body.theme-contrast.layout-multiple-columns { } /* Light theme */ -body.theme-mastodon-light.layout-multiple-columns { +body.theme-elephant-light.layout-multiple-columns { --color-bg: #fff; --color-fg: #000; --color-border: #e6e1ed; diff --git a/mastodon/app/javascript/styles/elephant/layout-single-column.scss b/mastodon/app/javascript/styles/elephant/layout-single-column.scss index de98742..8e4185b 100644 --- a/mastodon/app/javascript/styles/elephant/layout-single-column.scss +++ b/mastodon/app/javascript/styles/elephant/layout-single-column.scss @@ -140,7 +140,7 @@ } /* High Contrast theme */ -body.theme-contrast.layout-single-column { +body.theme-elephant-contrast.layout-single-column { --color-dim: #b8b3c0; /* Icons */ @@ -160,7 +160,7 @@ body.theme-contrast.layout-single-column { } /* Light theme */ -body.theme-mastodon-light.layout-single-column { +body.theme-elephant-light.layout-single-column { --color-bg: #fff; --color-fg: #000; --color-border: #e6e1ed; diff --git a/mastodon/config/themes.yml b/mastodon/config/themes.yml index 7d6d69f..2284612 100644 --- a/mastodon/config/themes.yml +++ b/mastodon/config/themes.yml @@ -2,3 +2,5 @@ default: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss elephant: styles/elephant.scss +elephant-contrast: styles/elephant-contrast.scss +elephant-light: styles/elephant-light.scss