[fenix] For https://github.com/mozilla-mobile/fenix/issues/24519 - Add Private theme to FirefoxTheme

2024-11-17 15:26:23 +00:00 · 2022-03-30 12:33:20 -04:00 · 2022-03-30 12:33:20 -04:00 · 08931906b3
commit 08931906b3
parent 14462b4717
22 changed files with 190 additions and 39 deletions
--- a/app/src/main/java/org/mozilla/fenix/compose/ClickableSubstringLink.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/ClickableSubstringLink.kt
@ -16,6 +16,7 @@ import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * [Text] containing a substring styled as an URL informing when this is clicked.
@ -86,7 +87,7 @@ fun ClickableSubstringLink(
 private fun ClickableSubstringTextPreview() {
    val text = "This text contains a link"

-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
            ClickableSubstringLink(
                text = text,
--- a/app/src/main/java/org/mozilla/fenix/compose/Favicon.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/Favicon.kt
@ -26,6 +26,7 @@ import mozilla.components.browser.icons.compose.WithIcon
 import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.components.components
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * Load and display the favicon of a particular website.
@ -85,7 +86,7 @@ private fun FaviconPlaceholder(size: Dp) {
@Composable
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 private fun FaviconPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer1)) {
            Favicon(
                url = "www.mozilla.com",
--- a/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt
@ -21,6 +21,7 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * Default layout of a large tab shown in a list taking String arguments for title and caption.
@ -138,7 +139,7 @@ private fun ListItemTabSurface(
@Composable
@Preview
 private fun ListItemTabLargePreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        ListItemTabLarge(
            imageUrl = "",
            title = "This is a very long title for a tab but needs to be so for this preview",
--- a/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLargePlaceholder.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLargePlaceholder.kt
@ -22,6 +22,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * Placeholder of a [ListItemTabLarge] with the same dimensions but only a centered text.
@ -73,7 +74,7 @@ fun ListItemTabLargePlaceholder(
@Composable
@Preview
 private fun ListItemTabLargePlaceholderPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        ListItemTabLargePlaceholder(text = "Item placeholder")
    }
 }
--- a/app/src/main/java/org/mozilla/fenix/compose/SelectableChip.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/SelectableChip.kt
@ -25,6 +25,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * Default layout of a selectable chip.
@ -67,7 +68,7 @@ fun SelectableChip(
@Composable
@Preview(uiMode = UI_MODE_NIGHT_YES)
 private fun SelectableChipDarkThemePreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
@ -83,7 +84,7 @@ private fun SelectableChipDarkThemePreview() {
@Composable
@Preview(uiMode = UI_MODE_NIGHT_NO)
 private fun SelectableChipLightThemePreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
--- a/app/src/main/java/org/mozilla/fenix/compose/StaggeredHorizontalGrid.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/StaggeredHorizontalGrid.kt
@ -20,6 +20,7 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * Displays a list of items as a staggered horizontal grid placing them on ltr rows and continuing
@ -120,7 +121,7 @@ fun StaggeredHorizontalGrid(
@Composable
@Preview
 private fun StaggeredHorizontalGridPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
            StaggeredHorizontalGrid(
                horizontalItemsSpacing = 8.dp,
--- a/app/src/main/java/org/mozilla/fenix/compose/TabSubtitle.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/TabSubtitle.kt
@ -15,6 +15,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * Default layout for a tab composable caption.
@ -43,7 +44,7 @@ fun TabSubtitle(
@Composable
@Preview
 private fun TabSubtitlePreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
            TabSubtitle(
                "Awesome tab subtitle",
--- a/app/src/main/java/org/mozilla/fenix/compose/TabSubtitleWithInterdot.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/TabSubtitleWithInterdot.kt
@ -13,6 +13,7 @@ import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.tooling.preview.Preview
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * Special caption text for a tab layout shown on one line.
@ -84,7 +85,7 @@ fun TabSubtitleWithInterdot(
@Composable
@Preview
 private fun TabSubtitleWithInterdotPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
            TabSubtitleWithInterdot(
                firstText = "firstText",
--- a/app/src/main/java/org/mozilla/fenix/compose/TabTitle.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/TabTitle.kt
@ -14,6 +14,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * Default layout for a tab composable title.
@ -42,7 +43,7 @@ fun TabTitle(
@Composable
@Preview
 private fun TabTitlePreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
            TabTitle(
                "Awesome tab title",
--- a/app/src/main/java/org/mozilla/fenix/compose/list/ExpandableListHeader.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/list/ExpandableListHeader.kt
@ -27,6 +27,7 @@ import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.PrimaryText
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * Expandable header for sections of lists
@ -90,7 +91,7 @@ fun ExpandableListHeader(
@Composable
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 private fun TextOnlyHeaderPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer1)) {
            ExpandableListHeader(headerText = "Section title")
        }
@ -100,7 +101,7 @@ private fun TextOnlyHeaderPreview() {
@Composable
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 private fun CollapsibleHeaderPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer1)) {
            ExpandableListHeader(
                headerText = "Collapsible section title",
@ -116,7 +117,7 @@ private fun CollapsibleHeaderPreview() {
@Composable
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 private fun HeaderWithClickableIconPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer1)) {
            ExpandableListHeader(headerText = "Section title") {
                Box(
@ -139,7 +140,7 @@ private fun HeaderWithClickableIconPreview() {
@Composable
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 private fun CollapsibleHeaderWithClickableIconPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer1)) {
            ExpandableListHeader(
                headerText = "Section title",
--- a/app/src/main/java/org/mozilla/fenix/compose/list/HomeSectionHeader.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/list/HomeSectionHeader.kt
@ -23,6 +23,7 @@ import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.SectionHeader
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * Homepage header.
@ -65,7 +66,7 @@ fun HomeSectionHeader(
@Composable
@Preview
 private fun HomeSectionsHeaderPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        HomeSectionHeader(
            headerText = stringResource(R.string.recent_bookmarks_title),
            description = stringResource(R.string.recently_saved_show_all_content_description_2),
--- a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketCategoriesViewHolder.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/pocket/PocketCategoriesViewHolder.kt
@ -25,6 +25,7 @@ import org.mozilla.fenix.components.components
 import org.mozilla.fenix.compose.ComposeViewHolder
 import org.mozilla.fenix.compose.SectionHeader
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 internal const val POCKET_CATEGORIES_SELECTED_AT_A_TIME_COUNT = 8

@ -98,7 +99,7 @@ private fun PocketTopics(
@Composable
@Preview
 private fun PocketCategoriesViewHolderPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        PocketTopics(
            categories = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"
                .split(" ")
--- a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketRecommendationsHeaderViewHolder.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/pocket/PocketRecommendationsHeaderViewHolder.kt
@ -21,6 +21,7 @@ import androidx.recyclerview.widget.RecyclerView
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.ComposeViewHolder
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * [RecyclerView.ViewHolder] for displaying the Pocket feature header.
@ -45,7 +46,7 @@ class PocketRecommendationsHeaderViewHolder(
            Spacer(Modifier.height(24.dp))

            PoweredByPocketHeader(
-                interactor::onLearnMoreClicked,
+                onLearnMoreClicked = interactor::onLearnMoreClicked,
                modifier = Modifier.fillMaxWidth()
            )
        }
@ -59,7 +60,9 @@ class PocketRecommendationsHeaderViewHolder(
@Composable
@Preview
 fun PocketRecommendationsFooterViewHolderPreview() {
-    FirefoxTheme {
-        PoweredByPocketHeader({})
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
+        PoweredByPocketHeader(
+            onLearnMoreClicked = {}
+        )
    }
 }
--- a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt
@ -48,6 +48,7 @@ import org.mozilla.fenix.compose.TabSubtitle
 import org.mozilla.fenix.compose.TabSubtitleWithInterdot
 import org.mozilla.fenix.compose.TabTitle
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
 import kotlin.math.roundToInt

 private const val URI_PARAM_UTM_KEY = "utm_source"
@ -239,7 +240,7 @@ fun PoweredByPocketHeader(
@Composable
@Preview
 private fun PocketStoriesComposablesPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
            Column {
                PocketStories(
@ -259,7 +260,9 @@ private fun PocketStoriesComposablesPreview() {
                )
                Spacer(Modifier.height(10.dp))

-                PoweredByPocketHeader({})
+                PoweredByPocketHeader(
+                    onLearnMoreClicked = {}
+                )
            }
        }
    }
--- a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesViewHolder.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesViewHolder.kt
@ -30,6 +30,7 @@ import org.mozilla.fenix.components.components
 import org.mozilla.fenix.compose.ComposeViewHolder
 import org.mozilla.fenix.compose.SectionHeader
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 internal const val POCKET_STORIES_TO_SHOW_COUNT = 8

@ -89,7 +90,7 @@ class PocketStoriesViewHolder(
@Composable
@Preview
 fun PocketStoriesViewHolderPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Column {
            SectionHeader(
                text = stringResource(string.pocket_stories_header_1),
--- a/app/src/main/java/org/mozilla/fenix/home/recentbookmarks/view/RecentBookmarks.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/recentbookmarks/view/RecentBookmarks.kt
@ -47,6 +47,7 @@ import org.mozilla.fenix.components.components
 import org.mozilla.fenix.compose.Image
 import org.mozilla.fenix.home.recentbookmarks.RecentBookmark
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * A list of recent bookmarks.
@ -218,7 +219,7 @@ private fun RecentBookmarksMenu(
@Composable
@Preview
 private fun RecentBookmarksPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        RecentBookmarks(
            bookmarks = listOf(
                RecentBookmark(
--- a/app/src/main/java/org/mozilla/fenix/home/recentvisits/view/RecentlyVisited.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/recentvisits/view/RecentlyVisited.kt
@ -53,6 +53,7 @@ import org.mozilla.fenix.home.recentvisits.RecentlyVisitedItem
 import org.mozilla.fenix.home.recentvisits.RecentlyVisitedItem.RecentHistoryGroup
 import org.mozilla.fenix.home.recentvisits.RecentlyVisitedItem.RecentHistoryHighlight
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 // Number of recently visited items per column.
 private const val VISITS_PER_COLUMN = 3
@ -369,7 +370,7 @@ private val LazyListState.atLeastHalfVisibleItems
@Composable
@Preview
 private fun RecentlyVisitedPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        RecentlyVisited(
            recentVisits = listOf(
                RecentHistoryGroup(title = "running shoes"),
--- a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/CustomizeHomeButtonViewHolder.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/CustomizeHomeButtonViewHolder.kt
@ -28,6 +28,7 @@ import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.ComposeViewHolder
 import org.mozilla.fenix.home.sessioncontrol.CustomizeHomeIteractor
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 class CustomizeHomeButtonViewHolder(
    composeView: ComposeView,
@ -86,7 +87,9 @@ fun CustomizeHomeButton(
@Composable
@Preview
 fun CustomizeHomeButtonPreview() {
-    FirefoxTheme {
-        CustomizeHomeButton(onButtonClick = {})
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
+        CustomizeHomeButton(
+            onButtonClick = {}
+        )
    }
 }
--- a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/PrivateBrowsingDescriptionViewHolder.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/PrivateBrowsingDescriptionViewHolder.kt
@ -25,11 +25,11 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.LifecycleOwner
-import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.ComposeViewHolder
 import org.mozilla.fenix.home.sessioncontrol.TabSessionInteractor
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme

 /**
 * View holder for a private browsing description.
@ -72,7 +72,6 @@ fun PrivateBrowsingDescription(
    onLearnMoreClick: () -> Unit,
 ) {
    val interactionSource = remember { MutableInteractionSource() }
-    val color = PhotonColors.LightGrey05 // Equivalent to fx_mobile_private_text_color_primary.

    Column(
        modifier = Modifier.padding(horizontal = 4.dp)
@ -83,7 +82,7 @@ fun PrivateBrowsingDescription(
                stringResource(R.string.app_name)
            ),
            modifier = Modifier.padding(top = 4.dp),
-            color = color,
+            color = FirefoxTheme.colors.textPrimary,
            fontSize = 14.sp,
            lineHeight = 20.sp
        )
@ -104,7 +103,7 @@ fun PrivateBrowsingDescription(
                text = stringResource(R.string.private_browsing_common_myths),
                modifier = Modifier.padding(top = 10.dp),
                style = TextStyle(
-                    color = color,
+                    color = FirefoxTheme.colors.textPrimary,
                    fontSize = 14.sp,
                    textDecoration = TextDecoration.Underline,
                    textDirection = TextDirection.Content
@ -117,7 +116,7 @@ fun PrivateBrowsingDescription(
@Composable
@Preview
 private fun PrivateBrowsingDescriptionPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        PrivateBrowsingDescription(
            onLearnMoreClick = {}
        )
--- a/app/src/main/java/org/mozilla/fenix/settings/wallpaper/WallpaperSettings.kt
+++ b/app/src/main/java/org/mozilla/fenix/settings/wallpaper/WallpaperSettings.kt
@ -57,6 +57,7 @@ import kotlinx.coroutines.launch
 import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.components
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
 import org.mozilla.fenix.wallpapers.Wallpaper
 import org.mozilla.fenix.wallpapers.WallpaperManager
 import java.util.Locale
@ -301,7 +302,7 @@ private fun WallpaperLogoSwitch(
@Preview
@Composable
 private fun WallpaperThumbnailsPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        val context = LocalContext.current
        val wallpaperManager = context.components.wallpaperManager

@ -323,7 +324,9 @@ private fun WallpaperThumbnailsPreview() {
@Preview
@Composable
 private fun WallpaperSnackbarPreview() {
-    FirefoxTheme {
-        WallpaperSnackbar(onViewWallpaper = {})
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
+        WallpaperSnackbar(
+            onViewWallpaper = {}
+        )
    }
 }
--- a/app/src/main/java/org/mozilla/fenix/tabstray/syncedtabs/SyncedTabs.kt
+++ b/app/src/main/java/org/mozilla/fenix/tabstray/syncedtabs/SyncedTabs.kt
@ -55,6 +55,7 @@ import org.mozilla.fenix.compose.PrimaryText
 import org.mozilla.fenix.compose.SecondaryText
 import org.mozilla.fenix.compose.list.ExpandableListHeader
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
 import mozilla.components.browser.storage.sync.Tab as SyncTab

 private const val EXPANDED_BY_DEFAULT = true
@ -323,7 +324,7 @@ fun SyncedTabsNoTabsItem() {
@Composable
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 private fun SyncedTabsListItemsPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Column(Modifier.background(FirefoxTheme.colors.layer1)) {
            SyncedTabsSectionHeader(headerText = "Google Pixel Pro Max +Ultra 5000")

@ -354,7 +355,7 @@ private fun SyncedTabsListItemsPreview() {
@Composable
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 private fun SyncedTabsErrorPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer1)) {
            SyncedTabsErrorItem(
                errorText = stringResource(R.string.synced_tabs_no_tabs),
@ -371,7 +372,7 @@ private fun SyncedTabsErrorPreview() {
@Composable
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 private fun SyncedTabsListPreview() {
-    FirefoxTheme {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
        Box(Modifier.background(FirefoxTheme.colors.layer1)) {
            SyncedTabsList(
                syncedTabs = getFakeSyncedTabList(),
--- a/app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt
+++ b/app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt
@ -17,17 +17,52 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
 import mozilla.components.ui.colors.PhotonColors
+import org.mozilla.fenix.ext.settings
+
+/**
+ * Indicates the theme that is displayed.
+ */
+enum class Theme {
+    Light,
+    Dark,
+    Private;
+
+    companion object {
+        /**
+         * Returns the current [Theme] that is displayed.
+         *
+         * @param isPrivate Whether or not private browsing mode is enabled.
+         * @return the current [Theme] that is displayed.
+         */
+        @Composable
+        fun getTheme(isPrivate: Boolean = LocalContext.current.settings().lastKnownMode.isPrivate) =
+            if (isPrivate) {
+                Private
+            } else if (isSystemInDarkTheme()) {
+                Dark
+            } else {
+                Light
+            }
+    }
+}

 /**
 * The theme for Mozilla Firefox for Android (Fenix).
+ *
+ * @param theme The current [Theme] that is displayed.
 */
@Composable
 fun FirefoxTheme(
-    darkTheme: Boolean = isSystemInDarkTheme(),
+    theme: Theme = Theme.getTheme(),
    content: @Composable () -> Unit
 ) {
-    val colors = if (darkTheme) darkColorPalette else lightColorPalette
+    val colors = when (theme) {
+        Theme.Light -> lightColorPalette
+        Theme.Dark -> darkColorPalette
+        Theme.Private -> privateColorPalette
+    }

    ProvideFirefoxColors(colors) {
        MaterialTheme(
@ -42,10 +77,78 @@ object FirefoxTheme {
        get() = localFirefoxColors.current
 }

+private val privateColorPalette = FirefoxColors(
+    layer1 = PhotonColors.Ink50,
+    layer2 = PhotonColors.Ink50,
+    layer3 = PhotonColors.Ink50,
+    layer4Start = PhotonColors.Purple70,
+    layer4Center = PhotonColors.Violet80,
+    layer4End = PhotonColors.Ink05,
+    layerAccent = PhotonColors.Violet40,
+    layerAccentNonOpaque = PhotonColors.Violet50A32,
+    layerAccentOpaque = Color(0xFF423262),
+    scrim = PhotonColors.DarkGrey90A95,
+    gradientStart = PhotonColors.Violet70,
+    gradientEnd = PhotonColors.Violet40,
+    actionPrimary = PhotonColors.Violet60,
+    actionSecondary = PhotonColors.LightGrey05,
+    actionTertiary = PhotonColors.DarkGrey10,
+    actionQuarternary = PhotonColors.DarkGrey80,
+    formDefault = PhotonColors.LightGrey05,
+    formSelected = PhotonColors.Violet40,
+    formSurface = PhotonColors.DarkGrey05,
+    formDisabled = PhotonColors.DarkGrey05,
+    formOn = PhotonColors.Violet40,
+    formOff = PhotonColors.LightGrey05,
+    indicatorActive = PhotonColors.LightGrey90,
+    indicatorInactive = PhotonColors.DarkGrey05,
+    textPrimary = PhotonColors.LightGrey05,
+    textSecondary = PhotonColors.LightGrey40,
+    textDisabled = PhotonColors.LightGrey05A40,
+    textWarning = PhotonColors.Red20,
+    textWarningButton = PhotonColors.Red70,
+    textAccent = PhotonColors.Violet20,
+    textAccentDisabled = PhotonColors.Violet20A60,
+    textOnColorPrimary = PhotonColors.LightGrey05,
+    textOnColorSecondary = PhotonColors.LightGrey40,
+    textActionPrimary = PhotonColors.LightGrey05,
+    textActionSecondary = PhotonColors.DarkGrey90,
+    textActionTertiary = PhotonColors.LightGrey05,
+    textActionTertiaryActive = PhotonColors.LightGrey05,
+    iconPrimary = PhotonColors.LightGrey05,
+    iconPrimaryInactive = PhotonColors.LightGrey05A60,
+    iconSecondary = PhotonColors.LightGrey40,
+    iconActive = PhotonColors.Violet40,
+    iconDisabled = PhotonColors.LightGrey05A40,
+    iconOnColor = PhotonColors.LightGrey05,
+    iconNotice = PhotonColors.Blue30,
+    iconButton = PhotonColors.LightGrey05,
+    iconWarning = PhotonColors.Red20,
+    iconWarningButton = PhotonColors.Red70,
+    iconAccentViolet = PhotonColors.Violet20,
+    iconAccentBlue = PhotonColors.Blue20,
+    iconAccentPink = PhotonColors.Pink20,
+    iconAccentGreen = PhotonColors.Green20,
+    iconAccentYellow = PhotonColors.Yellow20,
+    iconActionPrimary = PhotonColors.LightGrey05,
+    iconActionSecondary = PhotonColors.DarkGrey90,
+    iconGradientStart = PhotonColors.Violet20,
+    iconGradientEnd = PhotonColors.Blue20,
+    borderPrimary = PhotonColors.DarkGrey05,
+    borderInverted = PhotonColors.LightGrey30,
+    borderFormDefault = PhotonColors.LightGrey05,
+    borderAccent = PhotonColors.Violet40,
+    borderDisabled = PhotonColors.LightGrey05A40,
+    borderWarning = PhotonColors.Red40
+)
+
 private val darkColorPalette = FirefoxColors(
    layer1 = PhotonColors.DarkGrey60,
    layer2 = PhotonColors.DarkGrey30,
    layer3 = PhotonColors.DarkGrey80,
+    layer4Start = PhotonColors.Purple70,
+    layer4Center = PhotonColors.Violet80,
+    layer4End = PhotonColors.Ink05,
    layerAccent = PhotonColors.Violet40,
    layerAccentNonOpaque = PhotonColors.Violet50A32,
    layerAccentOpaque = Color(0xFF423262),
@ -108,6 +211,9 @@ private val lightColorPalette = FirefoxColors(
    layer1 = PhotonColors.LightGrey10,
    layer2 = PhotonColors.White,
    layer3 = PhotonColors.LightGrey20,
+    layer4Start = PhotonColors.Purple70,
+    layer4Center = PhotonColors.Violet80,
+    layer4End = PhotonColors.Ink05,
    layerAccent = PhotonColors.Ink20,
    layerAccentNonOpaque = PhotonColors.Violet70A12,
    layerAccentOpaque = Color(0xFFEAE4F9),
@ -175,6 +281,9 @@ class FirefoxColors(
    layer1: Color,
    layer2: Color,
    layer3: Color,
+    layer4Start: Color,
+    layer4Center: Color,
+    layer4End: Color,
    layerAccent: Color,
    layerAccentNonOpaque: Color,
    layerAccentOpaque: Color,
@ -243,6 +352,15 @@ class FirefoxColors(
    // Search
    var layer3 by mutableStateOf(layer3)
        private set
+    // Homescreen background, Toolbar
+    var layer4Start by mutableStateOf(layer4Start)
+        private set
+    // Homescreen background, Toolbar
+    var layer4Center by mutableStateOf(layer4Center)
+        private set
+    // Homescreen background, Toolbar
+    var layer4End by mutableStateOf(layer4End)
+        private set
    // App Bar Top (edit), Text Cursor, Selected Tab Check
    var layerAccent by mutableStateOf(layerAccent)
        private set
@ -421,6 +539,9 @@ class FirefoxColors(
        layer1 = other.layer1
        layer2 = other.layer2
        layer3 = other.layer3
+        layer4Start = other.layer4Start
+        layer4Center = other.layer4Center
+        layer4End = other.layer4End
        layerAccent = other.layerAccent
        layerAccentNonOpaque = other.layerAccentNonOpaque
        layerAccentOpaque = other.layerAccentOpaque
@ -483,6 +604,9 @@ class FirefoxColors(
        layer1 = layer1,
        layer2 = layer2,
        layer3 = layer3,
+        layer4Start = layer4Start,
+        layer4Center = layer4Center,
+        layer4End = layer4End,
        layerAccent = layerAccent,
        layerAccentNonOpaque = layerAccentNonOpaque,
        layerAccentOpaque = layerAccentOpaque,