Add Black theme option for battery saving on OLED displays#6441
Add Black theme option for battery saving on OLED displays#6441timurgilfanov wants to merge 10 commits intoelement-hq:developfrom
Conversation
* 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.
|
Thank you for your contribution! Here are a few things to check in the PR to ensure it's reviewed as quickly as possible:
|
|
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 |
|
@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? |
|
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. |
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. |
|
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:
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. |
|
@bmarty I hidden Black theme behind the feature flag. |
|
@bmarty looks like at least some of the test failures were unrelated to PR, and will be passed after |

Content
Added
Theme.Blackoption alongside the existingLight/Dark/Systemthemes.Core changes:
isDark()returns true for itElementThemeparameter changed fromdarkTheme: Booleantotheme: Theme; Black theme usescompoundDarkcolors withbgCanvasDefault = Color.Blackand derives its Material color scheme fromthat
UI:
ThemeOption.Blackin Advanced Settingscommon_black = "Black"(intemporary.xmlpending Localazy integration)Housekeeping:
darkTheme: Booleancall sites migrated totheme: Themeequivalentlibraries.designsystem.preview.ElementPreviewBlackadded; used inAdvancedSettingsViewpreview onlyMotivation and context
Closes #2624.
Screenshots / GIFs
Tests
Tested devices
Checklist