It seems like the two tickets are talking about two different things:

• One is talking about a "night-light" theme, which is a system-level setting in Android O, and cannot be controlled from within our app. Or possibly this user is not aware of our Dark theme.
• The other ticket is referring to the Sepia theme in the iOS app, which we have previously declined to do, unless @RHo wants to undertake putting together the color palette for it.

Agree with @Dbrant that these are two different requests. Have removed the second task as that pertains to night mode (which the user doesn't appear to be aware of as existing in the app).

In T194327#4195794, @Dbrant wrote:

It seems like the two tickets are talking about two different things:

• One is talking about a "night-light" theme, which is a system-level setting in Android O, and cannot be controlled from within our app. Or possibly this user is not aware of our Dark theme.

^ This second ticket https://ticket.wikimedia.org/otrs/index.pl?Action=AgentTicketZoom;TicketID=10693091 may possibly be referring to auto-night mode, which we have as a backlog ticket T128044 (though it is not available on iOS).

• The other ticket is referring to the Sepia theme in the iOS app, which we have previously declined to do, unless @RHo wants to undertake putting together the color palette for it.

Updated ticket to refer to sepia palette... for the UX backlog.

Change 471028 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] [SUPER WIP] Sepia.

https://gerrit.wikimedia.org/r/471028

@JMinor - Have any stats for sepia theme usage in iOS?

Last we looked Sepia is selected roughly 25% of the time, with dark being about 65%. Addtionally our support of sepia was partically predicated not just on volume of use but also to support the 5-15% of the population with blue light sensitivity (https://en.wikipedia.org/wiki/Effects_of_blue_light_technology).

Full rundown on use from just after release:
https://docs.google.com/presentation/d/1-wu23LhcYvANVSkwD_Sj0x1-bpulWWBINX63ioVbg2M/edit#slide=id.p

Change 471028 merged by jenkins-bot:
[apps/android/wikipedia@master] Sepia.

https://gerrit.wikimedia.org/r/471028

Hey @RHo, this task is currently in the design signoff column on the L board. Is there some kind of initial design spec to compare it with the current Alpha? I know about the Wikimedia Apps/Android theme guidelines, but is that enough to review it? Thanks for letting me know.

@schoenbaechler The sepia palette was borrowed from the iOS design: T169154

In T194327#4901958, @schoenbaechler wrote:

Hey @RHo, this task is currently in the design signoff column on the L board. Is there some kind of initial design spec for to compare the Sepia implementation in the current Alpha with the actual implementation in the Alpha? I know about the Wikimedia Apps/Android theme guidelines, but is that enough to review it? Thanks for letting me know.

hi @schoenbaechler - per @Dbrant's comment this task was filed and implemented using colors borrowed from iOS's design. It would be great if @cooltey can update the Android theme guidelines page with the relevant colors for the sepia theme first. Then I would review key screens to ensure correct colors have been applied in design review, recommend looking at least at the following:

• Explore feed
  • In the news item detail screen
  • On this day sub-screen
  • Randomizer
• Article page
  • the link preview bottom sheet
  • Font and theme bottom sheet
  • open table of contents
  • exploded tabs view
• My lists
  • Create a new list dialog
  • Reading list details
• Settings
  • Wikipedia languages settings

Hi @RHo . I looked at the Android theme guidelines page and looks like @cmadeo has updated most of them.

I also checked our current implementation of the Sepia theme and found that some colors don't match the colors on the guidelines page.

For example, in the Light theme, the Base color is Base80-Gray #EAECF0. The guidelines page shows that it should be Amate #E1DAD1 for the Base color in Sepia theme, but the app is actually using "kraft" #cbc8c1, which does not list on the guidelines page.

I am not sure that which one is correct, and maybe @cmadeo has the answer?

Hi @cooltey, you're correct. The base color should be Amate #E1DAD1, however on iOS we use Kraft #CBC8C1 for the border, shadows and HRs.

Also, sorry I had left some fields empty on the Android theme guidelines page and have now updated the table to include all of the necessary colors.

Thanks for the update, @cmadeo!

Will make a patch for the updated colors and will let @RHo and @schoenbaechler know when the patch get merged.

Thanks @cmadeo and happy to review it once merged @cooltey!

Change 488998 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] Update Sepia theme color set

https://gerrit.wikimedia.org/r/488998

Change 488998 merged by jenkins-bot:
[apps/android/wikipedia@master] Update Sepia theme color set

https://gerrit.wikimedia.org/r/488998

Hi @schoenbaechler and @RHo, the patch was merged. Please update to the latest Alpha version to see the changes.

I reviewed the sepia colors and found the following discrepancies @cooltey:

#6C6760 needs to be #646059

#C8CCD1 needs to be #CBC8C1

#CBC8C1 needs to be #3366CC

#E1DAD1 needs to be #F8F1E3

#EAECF0 needs to be #E1DAD1

#EAECF0 needs to be #E1DAD1

Let me know if you have any questions.

Change 490522 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] Tweak: update theme color set

https://gerrit.wikimedia.org/r/490522

Change 490522 abandoned by Cooltey:
Tweak: update theme color set

Reason:
Moved to GitHub

https://gerrit.wikimedia.org/r/490522

@schoenbaechler The patch has been merged. Please download the latest version of the alpha app to check.

Thanks @cooltey. Some colors are still off. My assumption is that applying global color variables had effects in areas we did not want to change. Moving it back to “Did not pass QA".

Sepia

#C8CCD1 needs to be #CBC8C1 here

#E1DAD1 needs to be #F8F1E3 here

#EAECF0 needs to be #E1DAD1 here

#FAFAFA needs to be #E1DAD1 here

Light

Apparently the color changes affected the light theme as well:

#FAFAFA needs to be #EAECF0

Oh, one additional thing I just noticed. Can we use #000000 38% for inactive navigation items in the Light and Sepia theme? They look a bit off currently in Sepia.

Hi @schoenbaechler, I've create a patch of fixing most of them, except the following thing:

Oh, one additional thing I just noticed. Can we use #000000 38% for inactive navigation items in the Light and Sepia theme? They look a bit off currently in Sepia.

Will try to do that if is possible.

Not sure why but looks like some of the background color of the default image are not applied properly, so I've made changed to them.

They will need to be re-verified such as: on this day, trending, news page, preview dialog, because of you read, and floating queue, thank you!

Hey @cooltey, I design reviewed the color palette for the thumbnails from scratch. Can we apply these definitions per theme?

👉 T194327 | Thumbnail colors per theme on Zeplin

Let me know in case these RGBA definitions don’t work for vector drawables.

Hi @schoenbaechler, thanks for the reply. Please let me know if the following screens look good to you.

Now the thumbnail background will apply the ?android:attr/windowBackground for each theme:
Light theme: #eaecf0

Also, regarding the following, it can be done and you can see the changes after the patch got merged.

Oh, one additional thing I just noticed. Can we use #000000 38% for inactive navigation items in the Light and Sepia theme? They look a bit off currently in Sepia.

All colors from these screenshots vary from the definitions on Zeplin. Not quite sure if this is due to the color profile of the device where these screenshots have been taken. Can we release to Alpha so I can check on the device itself?

Thought I list all colors again here for easy reference:

Thanks @cooltey and sorry for the detour.

PS / on another note: I’m thinking about filing a task that removes all placeholder images from the interface. There are just too many of it and the UI feels unfinished/cheap.

Thanks, @schoenbaechler. My bad, I didn't notice there has an opacity value for the color, and that's why I kept confusing.

I've created a tweak patch of it, and you will see it until the code review is done. If you need the APK before that, I can send it to you.

BTW, I am not sure about the color set of thumbnail placeholder in the Edit task cards, I've tried to apply #61000000 for the foreground-color and #72777d for the background-color, but it just looks not that right.
https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5c1a6f9e9630f416ee47ac50

The screenshot below is the one I've applied #33ffffff for the foreground-color and #72777d for the background-color

We can do the design check in the ticket T217169 for this specific case, and I can update it on the patch that relates to the ticket.

I've created a tweak patch of it, and you will see it until the code review is done

Sounds good!

BTW, I am not sure about the color set of thumbnail placeholder in the Edit task cards, I've tried to apply #61000000 for the foreground-color and #72777d for the background-color, but it just looks not that right.

I have a suggestion: As a first step towards getting rid of placeholders in the app, let’s remove it from editor tasks and display more text instead. I’ll leave a comment in the task.

Thanks, @schoenbaechler. The PR got merged today. Please download the latest alpha APK to see the changes.

I have a suggestion: As a first step towards getting rid of placeholders in the app, let’s remove it from editor tasks and display more text instead. I’ll leave a comment in the task.

Got it!

Good to go from a design perspective! @cooltey and I discussed one thing in a sidebar chat in regards to:

Can we use #000000 38% for inactive navigation items in the Light and Sepia theme? They look a bit off currently in Sepia.

He’s going to change black38 to white50 for dark and black mode in another ticket.

Thanks!