Skip to content

Add theme preference - #55

Open
alexanderpaolini wants to merge 9 commits into
breadboardapp:devfrom
alexanderpaolini:main
Open

Add theme preference#55
alexanderpaolini wants to merge 9 commits into
breadboardapp:devfrom
alexanderpaolini:main

Conversation

@alexanderpaolini

@alexanderpaolini alexanderpaolini commented May 9, 2026

Copy link
Copy Markdown

This PR:

Introduces a theme selection preference that allows users to select a preferred theme. The options are DARK, LIGHT, and AUTO.

  • DARK: always use dark theme
  • LIGHT: always use light theme
  • AUTO: follow system preferences (default, old behaviour)

Adds a section Appearance to the preferences page, with the aforementioned theme selection.

@alexanderpaolini

Copy link
Copy Markdown
Author

Proof of testing provided below

Auto mode with system theme as light Dark theme selected Light theme selected Theme selector modal
Auto mode with system theme as light Dark theme selected Light theme selected Theme selector modal

@apex2504 apex2504 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Good addition, thanks!

I've left a few comments on pieces of code that I'd like you to take a look at.

Also, a couple extra things need to be looked at:

  1. The status bar icons can be difficult to see if the app theme does not match the system theme (you can see an example of this in your 2nd screenshot). These icons should also adjust to match.

  2. Dark theme wasn't introduced officially until Android 10 but I think some Android 9 (and maybe even 8) devices support the feature to an extent. We should be making sure the device actually supports system-level dark theme before surfacing the option for it.

const val INTERNAL_IGNORE_LIST = "internal_ignore_list"
const val AUTOPLAY_VIDEOS = "autoplay_videos"
const val UNIFIED_INFO_SHEET = "unified_info_sheet"
const val THEME = "theme"

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

DARK_THEME = "dark_theme"

val INTERNAL_IGNORE_LIST = stringSetPreferencesKey(PrefNames.INTERNAL_IGNORE_LIST)
val AUTOPLAY_VIDEOS = stringPreferencesKey(PrefNames.AUTOPLAY_VIDEOS)
val UNIFIED_INFO_SHEET = booleanPreferencesKey(PrefNames.UNIFIED_INFO_SHEET)
var THEME = stringPreferencesKey(PrefNames.THEME)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

DARK_THEME

val autoplayVideos: AutoplayVideosMode,
val unifiedInfoSheet: Boolean
val unifiedInfoSheet: Boolean,
val theme: Theme,

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

darkTheme

internalIgnoreList = emptySet(),
autoplayVideos = AutoplayVideosMode.OFF,
unifiedInfoSheet = false, // Unified is called 'Classic' in the UI
theme = Theme.AUTO

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

~

PreferenceKeys.INTERNAL_IGNORE_LIST to PrefMeta(PrefCategory.SETTING, exportable = false),
PreferenceKeys.UNIFIED_INFO_SHEET to PrefMeta(PrefCategory.SETTING)
PreferenceKeys.UNIFIED_INFO_SHEET to PrefMeta(PrefCategory.SETTING),
PreferenceKeys.THEME to PrefMeta(PrefCategory.SETTING)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

~

title = "Theme",
summary = currentSettings.theme.label,
enumItems = Theme.entries,
infoText = "Select Light or Dark to always use that theme, or Auto to follow the system theme.",

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think this is redundant

)
}

@Composable()

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Very minor formatting thing -- parentheses unneeded

val autoplayVideos = preferences[PreferenceKeys.AUTOPLAY_VIDEOS]?.let { AutoplayVideosMode.valueOf(it) } ?: Prefs.DEFAULT.autoplayVideos
val unifiedInfoSheet = preferences[PreferenceKeys.UNIFIED_INFO_SHEET] ?: Prefs.DEFAULT.unifiedInfoSheet

val theme = preferences[PreferenceKeys.THEME]?.let { Theme.valueOf(it) } ?: Prefs.DEFAULT.theme

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

~

autoplayVideos,
unifiedInfoSheet
unifiedInfoSheet,
theme

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

~

ExpressiveGroup(title = "Appearance") {
item {
EnumPref(
title = "Theme",

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Dark theme

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants