New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a light theme #7027

Merged
merged 15 commits into from May 21, 2018

Conversation

Projects
None yet
10 participants
@Sylvhem
Contributor

Sylvhem commented Apr 3, 2018

  • Add a light theme (fix #317).
  • Update some locales accordingly.

Mastodon's landing page with a clear theme
Mastodon's detailed informations page with a clear theme
Mastodon's main interface with a clear theme
Mastodon's profile page with a clear theme

Sylvhem added some commits Apr 3, 2018

Sylvhem
Add a light theme to Mastodon
This add a second default theme to Mastodon. This new theme is supposed to be a light version of the dark original one.
Sylvhem
Update locales
Update the English and French locales.
Sylvhem
Change capitalization of hexadecimal triplets
Change capitalization of hexadecimal color codes to match Code Climate's recomandation.
Sylvhem
Add variable
Add a new variable to use instead of hardcoding a color. Change made to match Code Climate's recomandation.
@RX14

This comment has been minimized.

RX14 commented Apr 3, 2018

My personal opinion is that it'd look a lot better with more contrast, think far less grey, more pure or almost white behind text areas. Light themes also don't have to be completely light, they can have large dark areas in them too. Discord's light theme is my favourite example of this - I actually prerfer discord's light theme over the dark even though i'm a heavy user of light themes elsewhere.

@lynlynlynx

This comment has been minimized.

Collaborator

lynlynlynx commented Apr 4, 2018

I think this theme seems Classic theme, not a light theme. And, Is classic theme really needed for every instances? Every designers want add their own themes as mastodon's second default theme 🤷‍♀️. Mastodon's second default theme should be high contrasted (inevitably this will be light theme) for accessibility. This requires large scale refactoring to completely separate variables for letters and backgrounds. Related issue #6192 .

Ref.
My instances which default themes as classic theme and high contrast theme (but not enough high contrasted yet, I'm working on refactoring for better accessibility) .

@Cassolotl

This comment has been minimized.

Cassolotl commented Apr 4, 2018

I think this theme seems Classic theme, not a light theme. And, Is classic theme really needed for every instances? Every designers want add their own themes as mastodon's second default theme 🤷‍♀️.

Just trying to make sure I understand you here - are you saying that vanilla Mastodon should only have one theme by default, and that if admins want a light theme they should add it manually?

I agree that a high-contrast theme with dark text on light background would be awesome, but this is still pretty great and going to be a lot easier on my eyes if it get merged (except the new toot box, but I can live with that!).

@lynlynlynx

This comment has been minimized.

Collaborator

lynlynlynx commented Apr 4, 2018

Just trying to make sure I understand you here - are you saying that vanilla Mastodon should only have one theme by default, and that if admins want a light theme they should add it manually?

That's right I think so, but if @Gargron accept adding several themes, the name of this theme should not be "light" to reserve the name "light" for high contrast theme.

This request is finally accepted or not, we can discuss about that vanilla Mastodon should be vanilla or not, that the new toot box should be another color(for example), the name of this theme, and so on.

@Cassolotl

This comment has been minimized.

Cassolotl commented Apr 4, 2018

Ahh I see what you mean. Well, this is a light theme, and if there's a separate high-contrast theme it could be called "high-contrast"! But yes, details. ;)

I think that customisability for the comfort of users without admins having to go out of their way to add stuff seems like a great thing.

@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented Apr 4, 2018

Thank you a lot @RX14, @lynlynlynx and @Cassolotl for your feedback. I will try to answer your various concerns.

My personal opinion is that it'd look a lot better with more contrast, think far less grey, more pure or almost white behind text areas

Sadly, since the current variable system isn't that great, choosing a lighter color as a base background color cause some unwanted part of the UI to become white. I tried it and it didn't worked that great for me.
Of course, if it's really needed, I can still rewritte more of the default code. But as a rule of thumb, I tried to do that as little as possible to prevent the theme from breaking with every change to the HTML structure. Apart from accessibility concerns, I avoided that as much as I could.

I think this theme seems Classic theme, not a light theme. And, Is classic theme really needed for every instances?

I'm sorry, but I'm not sure to understand what you mean by "classic". What is a classic theme exactly?

Mastodon's second default theme should be high contrasted (inevitably this will be light theme) for accessibility.

If you take a closer look at it, I think you'll find this theme pretty accessible. Sure, it's not perfect, but I make sure to have a good contrast when it was possible. I tested colors combinations using WebAIM's Contrast Checker and I rewritten some parts of the code to display specific elements in a different hue than the one used by default.

This requires large scale refactoring to completely separate variables for letters and backgrounds. Related issue #6192 .

I know well about this issue, and I plan to work on it in the future. But I though it was still a good think to work on a light theme in the meantime since it's a feature people ask for.

(except the new toot box, but I can live with that!)

We could still change that! What is that you don't like with the toot box exactly?

Ahh I see what you mean. Well, this is a light theme, and if there's a separate high-contrast theme it could be called "high-contrast"

I think I agree with you on this. However, I think it'll be even better if the two defaul themes (dark and light) were both high-contrast themes.

@Cassolotl

This comment has been minimized.

Cassolotl commented Apr 4, 2018

(except the new toot box, but I can live with that!)

We could still change that! What is that you don't like with the toot box exactly?

Partly that the text typed into the box would be light text on a dark background, which is a thing I would like to escape from in a light theme. And partly because I think it stands out in a way that I don't think is very attractive or complementary, if that makes sense? It's very dark compared to everything else, and the button bar below it looks weird... It's hard to explain, and for some of it I'm not really sure why it looks off!

I think it'll be even better if the two defaul themes (dark and light) were both high-contrast themes.

Totally agree! :)

Anyway, I think for working within the framework that currently exists this is great, and if in future the framework improves maybe the themes themselves can also be improved, but in the mean time we might as well have a light theme available for users in settings, right? :)

@RX14

This comment has been minimized.

RX14 commented Apr 5, 2018

If the theme requires large scale refactoring to get a satisfactory light theme, we should do the large scale refactoring first.

@Cassolotl

This comment has been minimized.

Cassolotl commented Apr 5, 2018

I do agree, but it sounds like a very big job, and who knows when that'll get done, and it doesn't look like Sylv wants to do that instead, and so we might as well in the mean time enjoy Sylv's hard work, no? If anyone is ready to start working on refactoring right now I'd probably feel differently, though.

@trwnh

This comment has been minimized.

Contributor

trwnh commented Apr 7, 2018

IMO vanilla Mastodon's default template should stick to the Mastodon branding palette. Yes, currently the only theming options are to have an admin install a custom .scss file, or to apply a userstyle with something like Stylish and Stylus. I agree mostly with lynlynlynx:

Is classic theme really needed for every instances? Every designers want add their own themes as mastodon's second default theme 🤷‍♀️

Which is absolutely true -- admins can install one of several .scss themes like https://github.com/skiant/mastodon-light-theme, which don't need "official" designation; likewise, users can install a userstyle like https://userstyles.org/styles/153362/mfc-mastodon-flat-css (shameless self-promo).

The only real limitations of userstyles is that they can only be applied on browsers that support them (usually desktops only), but in return they offer many customizations for the user, who can choose exactly what they want and don't want. The limitation of .scss themes is that they require admin installation, but in return they can be switched more easily and are more powerful due to using Sass instead of vanilla CSS.

For any user customizability, I would be in favor of allowing users to set custom color variables -- in fact, my userstyle does exactly this, by grouping elements together into logical palettes and applying variable colors, which can be customized manually or via userstyles.org's settings before install. This might require some minor refactoring (#317, #6192) but more significantly, an interface somewhere in the webapp settings.

re: @Sylvhem's contribution specifically: I'm seconding what RX14 said -- it needs more contrast. For example, the "Clean Slate" palette of my userstyle uses #ddd for the page background, but keeps the columns at #fff to contrast strongly with the default text at #123. Bold/strong text is a full #000 for maximal contrast. But to add a little flair, I made the column header backgrounds #333. In a future revision, I'm going to make the column headers match the elephant friend in the corner.

For reference (and among other palettes at https://github.com/trwnh/mastodon-flat-css):

Clean Slate

@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented Apr 7, 2018

IMO vanilla Mastodon's default template should stick to the Mastodon branding palette.

I agree with that. That's why is kept it as much as I can in this theme.

I'm seconding what RX14 said -- it needs more contrast.

I'll add some since it seems to be the main problem with my proposal. I would just like to point out, again, that this theme has probably all the contrast it needs accessibility-wise.

@RX14

This comment has been minimized.

RX14 commented Apr 7, 2018

Accessibility aside, it looks boring and bland and honestly ugly to me.

@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented Apr 7, 2018

Accessibility aside, it looks boring and bland and honestly ugly to me.

Thanks for this constructive comment @RX14! It'll really help me improve this theme further.

@RX14

This comment has been minimized.

RX14 commented Apr 7, 2018

I apologise for that comment, it was rude and wasn't constructive.

What I meant to say that the theme looks bland because of the low contrast. I think making the theme have higher contrast will remove the overabundance of grey tones, and make the theme much less "boring".

@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented Apr 7, 2018

I apologize too, I was unnecessarily salty in my last answers.

I'll work on that and come with something better later then :).

@RX14

This comment has been minimized.

RX14 commented Apr 7, 2018

Personally I think the colour palate should consist of primary/secondary colours which are far closer to pure white than they currently are, and a highlight colour much darker than it currently is, probably the blue from the input box. Then use the highlight colour sparingly and you might get a pretty good effect.

@RX14

This comment has been minimized.

RX14 commented Apr 7, 2018

To hopefully redeem myself, I've messed around with inspect element and came up with what I think would be more towards what I prefer as a light theme:

It's nowhere near good, and I generated my colour pallette by clicking around in the colour picker, but it more closely reflects the fact that I think the actual text elements should be pure black text on pure white background, and that being afraid of using dark colours (top bar highlight), even for a large part of the screen area (left column, darker than most colours on this current theme) should not be shied away from. Ignore the dark scrollbars, it's an artifact of my gtk theme and firefox.

@RX14

This comment has been minimized.

RX14 commented Apr 7, 2018

More screenshots, I've lightened the dark colours for the header, and lightened the border-bottom on each post:

It looks better, but perhaps I've gone too far and the colours are a little washed out. I still believe it looks nicer than the OP though. I think I did quite well for a backend developer :)

Sylvhem added some commits Apr 8, 2018

Sylvhem
Use Mastodon branding palette
Replace the colors previously used by the ones found in Mastodon branding palette.
The resulting theme is lighter than the previous version.
Sylvhem
Make the overlay background white
Make the overly background used on on sensitive medias white instead of black
Sylvhem
Change the color used on the envelop icon
Change the color used on the envelop icon for a darker one. The same color is now used on both the envelop icon and the padlock icon.
Sylvhem
Add contrast
Add contrast to various places inside the main interface and the profile pages.
Sylvhem
Change the text color used in the compose form
Change the text color used in the compose form for a darker one.
Sylvhem
Make the code easier to read
Add some blank lines to make the code easier to parse for a human eye.
@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented Apr 8, 2018

Based on your feedback, I made some changes to the theme.

  • The theme is now lighter overall.
  • It now only use various hues of the Mastodon palette's colors.
  • The contrast have been improved in some parts of the interface.

Mastodon's landing page with a light theme
Mastodon's detailed informations page with a light theme
Mastodon's main interface with a light theme
Mastodon's profile page with a light theme

@tootsuite tootsuite deleted a comment from xvilo Apr 14, 2018

@RX14

This comment has been minimized.

RX14 commented Apr 14, 2018

Since this is meant to be an official theme, I don't plan to add more color to it. I want it to looks like a clear version of the base theme, not something brand new.

If the result doesn't look the best we can make it, isn't that worse than having a theme which isn't 100% "up to brand". I'm sure you can make something decent from the existing colour pallete if you tried.

Sylvhem added some commits Apr 14, 2018

Sylvhem
Change columns' background default colors
Change columns' background default colors, making the composition column the darker one.
Sylvhem
Change the color of the log in button
Change the log in button's text color to make it more readable.
Sylvhem
Fix the color of the boost buttons on the landing page
The disabled boost buttons on the landing page are now of the same color that the other disabled buttons.
@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented Apr 14, 2018

  • The composition column is now darker while the other columns are now white.
  • On the landing page, the text on login in button is now white.
  • On previous version, the landing page's disabled boost buttons were white. They are now of the same color that the other disabled buttons.

Mastodon's landing page with a light theme.
Mastodon's main interface with a light theme.

@RX14

This comment has been minimized.

RX14 commented Apr 14, 2018

@Sylvhem I think that just applying a single dark colour to the column tops would do a world of difference here.

@trwnh

This comment has been minimized.

Contributor

trwnh commented Apr 15, 2018

looks better! just a few concerns:

  • inactive buttons maybe shouldn't be pure white -- there needs to be a distinction between active and inactive buttons
  • black on blue is a bit hard to read
  • popup menu being dark grey looks out of place
Sylvhem
Change the colors used in the dropdown menu
Make the dropdown menu light instead of dark.
@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented Apr 15, 2018

I think that just applying a single dark colour to the column tops would do a world of difference here.

I'm sorry, but I'm not exactly sure what you mean here. Do you mean having a single dark color used for the text in both the column titles (Home, Local timeline…) and the icons?

inactive buttons maybe shouldn't be pure white -- there needs to be a distinction between active and inactive buttons

Don't worry, they are lighter, not pure white.

black on blue is a bit hard to read

That's what I thought too, but using white on blue wasn't conclusive either. Actually, the contrast ratio was even worst.

popup menu being dark grey looks out of place

Based on your comment, I just changed it. Does it looks better like this?

Mastodon's main interface with a light theme.

@RX14

This comment has been minimized.

RX14 commented Apr 15, 2018

Do you mean having a single dark color used for the text in both the column titles (Home, Local timeline…) and the icons?

I mean use a dark, rich colour for the background of the column titles, with white text on top. See my screenshots for reference.

That's what I thought too, but using white on blue wasn't conclusive either. Actually, the contrast ratio was even worst.

I'd darken the highlight colour then (and use the same colour for the column title backgrounds) and use white text.

@roipoussiere

This comment has been minimized.

roipoussiere commented Apr 20, 2018

I really like @RX14's proposition, I think there is still too much grey on @Sylvhem theme.

@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented Apr 21, 2018

I really don't know about that. I really want this theme to match the dark one as much as possible.
I really would want @Gargron's advice on this.

@trwnh

This comment has been minimized.

Contributor

trwnh commented Apr 25, 2018

OK, I've been playing around a bit with the official Mastodon color palette -- how's this? Keeping in mind @RX14's suggestion for a darker column head, and using only the four official Mastodon colors + 50% brightness on the muted text:

image

Was this more of the palette you had in mind?

@RX14

This comment has been minimized.

RX14 commented Apr 25, 2018

@trwnh that looks really good actually.

@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented May 7, 2018

Can someone review this?

@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented May 15, 2018

Since this pull request is meant to solve a high priority issue, it would really be nice if it could be merged in time for Mastodon 2.4. So I would really want to have your opinion on the look and feel of the theme @Gargron.

@ghost

ghost approved these changes May 19, 2018

Great work!

@ykzts

ykzts approved these changes May 21, 2018

❤️

@Gargron Gargron merged commit ea96900 into tootsuite:master May 21, 2018

9 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: check-i18n Your tests passed on CircleCI!
Details
ci/circleci: install Your tests passed on CircleCI!
Details
ci/circleci: install-ruby2.4 Your tests passed on CircleCI!
Details
ci/circleci: install-ruby2.5 Your tests passed on CircleCI!
Details
ci/circleci: test-ruby2.4 Your tests passed on CircleCI!
Details
ci/circleci: test-ruby2.5 Your tests passed on CircleCI!
Details
ci/circleci: test-webui Your tests passed on CircleCI!
Details
codeclimate All good!
Details
@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented May 21, 2018

Yes, it is :).

@Cassolotl

This comment has been minimized.

Cassolotl commented May 21, 2018

@Sylvhem Awesome! Thanks. :) I just need to wait and find out if the low-contrast bits I've found happen on vanilla as well as on the Glitch theme, and if they do I'll make a new issue.

(I'm keeping track of them here: glitch-soc#496)

@Sylvhem

This comment has been minimized.

Contributor

Sylvhem commented May 21, 2018

@Cassolotl No problem, and don't hesitate to tag me in it if you open one.

SerCom-KC added a commit to SerCom-KC/mastodon that referenced this pull request May 21, 2018

Gargron added a commit that referenced this pull request May 22, 2018

[WIP] i18n: Update Simplified Chinese translations (#7576)
* i18n: (zh-CN) #7027

* Rewording
This placeholder is also seen on single user page at Moderation > Accounts, where "this report" doesn't make sense.

* i18n: (zh-CN) #6425

* i18n: (zh-CN) #6497

* i18n: (zh-CN) #6246

* i18n: (zh-CN) Improvements
@steckerhalter

This comment has been minimized.

steckerhalter commented Jun 10, 2018

@Sylvhem I'm running 2.4.0 but don't have the light theme as an option in the UI. Do I need to do something so it's available?

byronhulcher added a commit to byronhulcher/mastodon that referenced this pull request Aug 18, 2018

Add a light theme (tootsuite#7027)
* Add a light theme to Mastodon

This add a second default theme to Mastodon. This new theme is supposed to be a light version of the dark original one.

* Update locales

Update the English and French locales.

* Change capitalization of hexadecimal triplets

Change capitalization of hexadecimal color codes to match Code Climate's recomandation.

* Add variable

Add a new variable to use instead of hardcoding a color. Change made to match Code Climate's recomandation.

* Use Mastodon branding palette

Replace the colors previously used by the ones found in Mastodon branding palette.
The resulting theme is lighter than the previous version.

* Make the overlay background white

Make the overly background used on on sensitive medias white instead of black

* Change the color used on the envelop icon

Change the color used on the envelop icon for a darker one. The same color is now used on both the envelop icon and the padlock icon.

* Add contrast

Add contrast to various places inside the main interface and the profile pages.

* Change the text color used in the compose form

Change the text color used in the compose form for a darker one.

* Make the code easier to read

Add some blank lines to make the code easier to parse for a human eye.

* Change columns' background default colors

Change columns' background default colors, making the composition column the darker one.

* Change the color of the log in button

Change the log in button's text color to make it more readable.

* Fix the color of the boost buttons on the landing page

The disabled boost buttons on the landing page are now of the same color that the other disabled buttons.

* Change the colors used in the dropdown menu

Make the dropdown menu light instead of dark.

byronhulcher added a commit to byronhulcher/mastodon that referenced this pull request Aug 18, 2018

[WIP] i18n: Update Simplified Chinese translations (tootsuite#7576)
* i18n: (zh-CN) tootsuite#7027

* Rewording
This placeholder is also seen on single user page at Moderation > Accounts, where "this report" doesn't make sense.

* i18n: (zh-CN) tootsuite#6425

* i18n: (zh-CN) tootsuite#6497

* i18n: (zh-CN) tootsuite#6246

* i18n: (zh-CN) Improvements
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment