Skip to content

Add Black theme option for battery saving on OLED displays#6441

Open
timurgilfanov wants to merge 10 commits intoelement-hq:developfrom
timurgilfanov:feature-oled-black
Open

Add Black theme option for battery saving on OLED displays#6441
timurgilfanov wants to merge 10 commits intoelement-hq:developfrom
timurgilfanov:feature-oled-black

Conversation

@timurgilfanov
Copy link
Copy Markdown
Contributor

@timurgilfanov timurgilfanov commented Mar 23, 2026

Content

Added Theme.Black option alongside the existing Light/Dark/System themes.

Core changes:

  • Theme enum gets a new Black value; isDark() returns true for it
  • ElementTheme parameter changed from darkTheme: Boolean to theme: Theme; Black theme uses
    compoundDark colors with bgCanvasDefault = Color.Black and derives its Material color scheme from
    that
  • ElementThemeApp passes theme directly and maps Theme.Black to MODE_NIGHT_YES

UI:

  • New ThemeOption.Black in Advanced Settings
  • New string resource common_black = "Black" (in temporary.xml pending Localazy integration)

Housekeeping:

  • All darkTheme: Boolean call sites migrated to theme: Theme equivalent
  • libraries.designsystem.preview.ElementPreviewBlack added; used in AdvancedSettingsView preview only

Motivation and context

Closes #2624.

Screenshots / GIFs

image

Tests

  • Open Settings
  • Open Advanced Settings
  • Click on Appearance
  • Change it to "Black". Background become pure black.

Tested devices

  • Physical
  • Emulator
  • OS version(s): Android 15

Checklist

  • Changes have been tested on an Android device or Android emulator with API 24
  • UI change has been tested on both light and dark themes
  • Accessibility has been taken into account. See https://github.com/element-hq/element-x-android/blob/develop/CONTRIBUTING.md#accessibility
  • Pull request is based on the develop branch
  • Pull request title will be used in the release note, it clearly define what will change for the user
  • Pull request includes screenshots or videos if containing UI changes
  • You've made a self review of your PR

timurgilfanov and others added 2 commits March 23, 2026 15:26
* Add `Theme.Black` to the `Theme` enum and update `isDark()` to include it.
* Refactor `ElementTheme` to accept a `Theme` object instead of a `darkTheme` boolean, allowing for more specific color mapping (e.g., setting `bgCanvasDefault` to `Color.Black` for the Black theme).
* Update `AdvancedSettingsPresenter` and `AdvancedSettingsState` to include "Black" as a user-selectable theme option.
* Adjust `ElementThemeApp` and `MaterialTextPreview` to handle the expanded theme selection.
* Add `ElementPreviewBlack` and update existing preview components to support the new theme.
* Update Konsist tests to ensure `@PreviewsDayNight` annotated functions don't have "BlackPreview" suffix.
@timurgilfanov timurgilfanov requested a review from a team as a code owner March 23, 2026 12:33
@timurgilfanov timurgilfanov requested review from jmartinesp and removed request for a team March 23, 2026 12:33
@github-actions
Copy link
Copy Markdown
Contributor

Thank you for your contribution! Here are a few things to check in the PR to ensure it's reviewed as quickly as possible:

  • Your branch should be based on origin/develop, at least when it was created.
  • The title of the PR will be used for release notes, so it needs to describe the change visible to the user.
  • The test pass locally running ./gradlew test.
  • The code quality check suite pass locally running ./gradlew runQualityChecks.
  • If you modified anything related to the UI, including previews, you'll have to run the Record screenshots GH action in your forked repo: that will generate compatible new screenshots. However, given Github Actions limitations, it will prevent the CI from running temporarily, until you upload a new commit after that one. To do so, just pull the latest changes and push an empty commit.

@github-actions github-actions bot added the Z-Community-PR Issue is solved by a community member's PR label Mar 23, 2026
Copy link
Copy Markdown
Contributor

@bxdxnn bxdxnn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@timurgilfanov timurgilfanov requested a review from bmarty March 26, 2026 05:15
@frebib
Copy link
Copy Markdown
Contributor

frebib commented Mar 30, 2026

I've been using this for a few days and the black with the existing colours looks kinda... bad. The contrast looks off. It's hard to put into words. I think this needs more tweaking before it's shipped

@timurgilfanov
Copy link
Copy Markdown
Contributor Author

@frebib thanks for the first hands-on feedback. Could you attach screenshots were you feel most discomforting? And what is the model of your device?

@frebib
Copy link
Copy Markdown
Contributor

frebib commented Mar 30, 2026

In particular the green banner is too harsh, as is the grey used by the message bubbles is too light. Perhaps they would look better if they are darker? I'm not sure- I'm no UX expert. I just know that dark grey looks better than black with the rest of the colour scheme. If it matters, I'm using a Pixel 8 Pro. I don't imagine screenshots would help because I imagine that it renders the same on any phone.

@timurgilfanov
Copy link
Copy Markdown
Contributor Author

I don't imagine screenshots would help because I imagine that it renders the same on any phone.

Screenshots make it easier to make a common understanding what screens and UI elements we talking about. I'm not an active Element user and for me it requires a suggestion to understand what green banner we talking about.

@bmarty
Copy link
Copy Markdown
Member

bmarty commented Apr 1, 2026

I am testing the app with a pure Black background, and I think @frebib is talking about the green banner at the top of the screen:

image

But it's not blocking to me.

I guess we can merge the PR only if the new Black entry is behind a new feature flag (like "Allow black theme"), so that we can let more people test it and give feedback.

@timurgilfanov
Copy link
Copy Markdown
Contributor Author

@bmarty I hidden Black theme behind the feature flag.

Copy link
Copy Markdown
Member

@bmarty bmarty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@bmarty bmarty enabled auto-merge (squash) April 7, 2026 14:09
@timurgilfanov
Copy link
Copy Markdown
Contributor Author

@bmarty looks like at least some of the test failures were unrelated to PR, and will be passed after develop had been merged into pr branch. Can you approve workflows to run?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

X-Needs-Design Z-Community-PR Issue is solved by a community member's PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

OLED black mode

6 participants