Closes #363 & Closes #364: Adds private browsing theme (#405)

* For #345 #346 - Adds private browsing theme

Co-authored-by: Sawyer Blatz <sdblatz@gmail.com>

* Abstracts theme management

* Theme browser toolbar

* Remove unused imports

* Begin work on sharedPreferences

* fix lint

* #346 - Refactors ThemeManager to take a callback

* Adds clean status bar and nav bar

* lint

* Themes settings icons better

* Small clean up

app/src/main/AndroidManifest.xml

@@ -13,7 +13,7 @@
             android:roundIcon="@mipmap/ic_launcher_round"
             android:supportsRtl="true"
             android:name=".FenixApplication"
-            android:theme="@style/LightAppTheme"
+            android:theme="@style/LightTheme"
             android:usesCleartextTraffic="true"
             tools:ignore="UnusedAttribute">
         <activity android:name=".HomeActivity"
@@ -69,7 +69,7 @@
             android:name=".settings.SettingsActivity"
             android:label="@string/settings"
             android:parentActivityName=".HomeActivity"
-            android:theme="@style/SettingsAppTheme" />
+            android:theme="@style/SettingsTheme"/>
     </application>
 
 </manifest>

app/src/main/java/org/mozilla/fenix/HomeActivity.kt

@@ -17,10 +17,20 @@ import org.mozilla.fenix.browser.BrowserFragment
 import org.mozilla.fenix.ext.components
 
 open class HomeActivity : AppCompatActivity() {
+    val themeManager = DefaultThemeManager().also {
+        it.onThemeChange = { theme ->
+            setTheme(theme)
+            recreate()
+        }
+    }
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_home)
 
+        setTheme(themeManager.currentTheme)
+        DefaultThemeManager.applyStatusBarTheme(window, themeManager, this)
+
         if (intent?.extras?.getBoolean(OPEN_TO_BROWSER) == true) {
             openToBrowser()
         }

app/src/main/java/org/mozilla/fenix/ThemeManager.kt

@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+   License, v. 2.0. If a copy of the MPL was not distributed with this
+   file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix
+
+import android.app.Activity
+import android.content.Context
+import android.util.TypedValue
+import android.view.View
+import android.view.Window
+import androidx.core.content.ContextCompat
+
+interface ThemeManager {
+    enum class Theme {
+        Light, Private
+    }
+
+    val currentTheme: Theme
+    fun setTheme(theme: Theme)
+}
+
+fun Activity.setTheme(theme: ThemeManager.Theme) {
+    val themeCode = when (theme) {
+        ThemeManager.Theme.Light -> R.style.LightTheme
+        ThemeManager.Theme.Private -> R.style.PrivateTheme
+    }
+
+    setTheme(themeCode)
+}
+
+fun ThemeManager.Theme.isPrivate(): Boolean = this == ThemeManager.Theme.Private
+
+private var temporaryThemeManagerStorage = ThemeManager.Theme.Light
+class DefaultThemeManager : ThemeManager {
+    var onThemeChange: ((ThemeManager.Theme) -> Unit)? = null
+
+    override val currentTheme: ThemeManager.Theme
+        get() = temporaryThemeManagerStorage
+
+    override fun setTheme(theme: ThemeManager.Theme) {
+        temporaryThemeManagerStorage = theme
+
+        onThemeChange?.invoke(currentTheme)
+    }
+
+    companion object {
+        fun resolveAttribute(attribute: Int, context: Context): Int {
+            val typedValue = TypedValue()
+            val theme = context.theme
+            theme.resolveAttribute(attribute, typedValue, true)
+
+            return typedValue.resourceId
+        }
+
+        // Handles status bar theme change since the window does not dynamically recreate
+        fun applyStatusBarTheme(window: Window, themeManager: ThemeManager, context: Context) {
+            window.statusBarColor = ContextCompat
+                .getColor(context, DefaultThemeManager
+                    .resolveAttribute(android.R.attr.statusBarColor, context))
+
+            window.navigationBarColor = ContextCompat
+                .getColor(context, DefaultThemeManager
+                    .resolveAttribute(android.R.attr.navigationBarColor, context))
+
+            when (themeManager.currentTheme) {
+                ThemeManager.Theme.Light -> {
+                    window.decorView.systemUiVisibility = window.decorView.systemUiVisibility or
+                            View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR or View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
+                }
+                ThemeManager.Theme.Private -> {
+                    window.decorView.systemUiVisibility = window.decorView.systemUiVisibility and
+                            View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv() and
+                            View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR.inv()
+                }
+            }
+        }
+    }
+}

app/src/main/java/org/mozilla/fenix/browser/BrowserFragment.kt

@@ -8,6 +8,7 @@ import android.annotation.SuppressLint
 import android.content.Context
 import android.content.Intent
 import android.os.Bundle
+import android.preference.PreferenceManager
 import android.view.Gravity
 import android.view.LayoutInflater
 import android.view.View
@@ -29,6 +30,7 @@ import mozilla.components.feature.session.SessionFeature
 import mozilla.components.feature.session.SessionUseCases
 import mozilla.components.support.ktx.android.arch.lifecycle.addObservers
 import org.mozilla.fenix.BackHandler
+import org.mozilla.fenix.DefaultThemeManager
 import org.mozilla.fenix.R
 import org.mozilla.fenix.components.FindInPageIntegration
 import org.mozilla.fenix.ext.requireComponents
@@ -57,6 +59,7 @@ class BrowserFragment : Fragment(), BackHandler {
         savedInstanceState: Bundle?
     ): View? {
         val view = inflater.inflate(R.layout.fragment_browser, container, false)
+
         toolbarComponent = ToolbarComponent(
             view.browserLayout,
             ActionBusFactory.get(this),
@@ -64,7 +67,8 @@ class BrowserFragment : Fragment(), BackHandler {
         )
 
         toolbarComponent.uiView.view.apply {
-            setBackgroundColor(ContextCompat.getColor(view.context, R.color.offwhite))
+            setBackgroundColor(ContextCompat.getColor(view.context,
+                DefaultThemeManager.resolveAttribute(R.attr.browserToolbarBackground, context)))
 
             (layoutParams as CoordinatorLayout.LayoutParams).apply {
                 // Stop toolbar from collapsing if TalkBack is enabled
@@ -200,6 +204,11 @@ class BrowserFragment : Fragment(), BackHandler {
             is ToolbarMenu.Item.RequestDesktop -> sessionUseCases.requestDesktopSite.invoke(action.item.isChecked)
             is ToolbarMenu.Item.Share -> requireComponents.core.sessionManager
                 .selectedSession?.url?.apply { requireContext().share(this) }
+            is ToolbarMenu.Item.NewPrivateTab -> {
+                PreferenceManager.getDefaultSharedPreferences(context)
+                    .edit().putBoolean(context!!.getString(R.string.pref_key_private_mode),
+                    !PreferenceManager.getDefaultSharedPreferences(context)
+                        .getBoolean(context!!.getString(R.string.pref_key_private_mode), false)).apply() }
             is ToolbarMenu.Item.ReportIssue -> requireComponents.core.sessionManager
                 .selectedSession?.url?.apply {
                 val reportUrl = String.format(REPORT_SITE_ISSUE_URL, this)

app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt

@@ -13,11 +13,15 @@ import android.view.ViewGroup
 import androidx.constraintlayout.motion.widget.MotionLayout
 import androidx.fragment.app.Fragment
 import androidx.navigation.Navigation
+import kotlinx.android.synthetic.main.fragment_home.*
 import kotlinx.android.synthetic.main.fragment_home.view.*
+import org.mozilla.fenix.HomeActivity
 import org.mozilla.fenix.R
+import org.mozilla.fenix.ThemeManager
 import org.mozilla.fenix.ext.requireComponents
 import org.mozilla.fenix.home.sessions.SessionsComponent
 import org.mozilla.fenix.home.sessions.layoutComponents
+import org.mozilla.fenix.isPrivate
 import org.mozilla.fenix.mvi.ActionBusFactory
 import kotlin.math.roundToInt
 
@@ -80,6 +84,23 @@ class HomeFragment : Fragment() {
             }
             override fun onTransitionCompleted(p0: MotionLayout?, p1: Int) { }
         })
+
+        view.toolbar_wrapper.isPrivateModeEnabled = (requireActivity() as HomeActivity)
+            .themeManager
+            .currentTheme
+            .isPrivate()
+
+        privateBrowsingButton.setOnClickListener {
+            // When we build out private mode we will want to handle this logic elsewhere.
+            (requireActivity() as HomeActivity).themeManager.apply {
+                val newTheme = when (this.currentTheme) {
+                    ThemeManager.Theme.Light -> ThemeManager.Theme.Private
+                    ThemeManager.Theme.Private -> ThemeManager.Theme.Light
+                }
+
+                setTheme(newTheme)
+            }
+        }
     }
 
     @SuppressWarnings("MagicNumber")

app/src/main/java/org/mozilla/fenix/home/SearchView.kt

@@ -11,31 +11,60 @@ import android.widget.FrameLayout
 import org.mozilla.fenix.R
 
 class SearchView(context: Context, attrs: AttributeSet) : FrameLayout(context, attrs) {
+
+    var isPrivateModeEnabled = false
+
     private val lightDrawable = resources.getDrawable(R.drawable.home_search_background_light)
+    private val privateLightDrawable = resources.getDrawable(R.drawable.home_search_background_private)
     private val darkDrawable = resources.getDrawable(R.drawable.home_search_background_dark)
+    private val privateDarkDrawable = resources.getDrawable(R.drawable.home_search_background_private_dark)
     private val darkNoBorderDrawable = resources.getDrawable(R.drawable.home_search_background_dark_no_border)
+    private val privateDarkNoBorderDrawable =
+        resources.getDrawable(R.drawable.home_search_background_private_dark_no_border)
 
     private val lightToDark = TransitionDrawable(arrayOf(lightDrawable, darkDrawable))
     private val darkToNoBorder = TransitionDrawable(arrayOf(darkDrawable, darkNoBorderDrawable))
+    private val privateLightToDark = TransitionDrawable(arrayOf(privateLightDrawable, privateDarkDrawable))
+    private val privateDarkToNoBorder = TransitionDrawable(arrayOf(privateDarkDrawable, privateDarkNoBorderDrawable))
 
     fun transitionToLight() {
-        background = lightToDark
+        if (isPrivateModeEnabled) {
-        lightToDark.reverseTransition(transitionDurationMs)
+            background = privateLightToDark
+            privateLightToDark.reverseTransition(transitionDurationMs)
+        } else {
+            background = lightToDark
+            lightToDark.reverseTransition(transitionDurationMs)
+        }
     }
 
     fun transitionToDark() {
-        background = lightToDark
+        if (isPrivateModeEnabled) {
-        lightToDark.startTransition(transitionDurationMs)
+            background = privateLightToDark
+            privateLightToDark.startTransition(transitionDurationMs)
+        } else {
+            background = lightToDark
+            lightToDark.startTransition(transitionDurationMs)
+        }
     }
 
     fun transitionToDarkFromNoBorder() {
-        background = darkToNoBorder
+        if (isPrivateModeEnabled) {
-        darkToNoBorder.reverseTransition(transitionDurationMs)
+            background = privateDarkToNoBorder
+            privateDarkToNoBorder.reverseTransition(transitionDurationMs)
+        } else {
+            background = darkToNoBorder
+            darkToNoBorder.reverseTransition(transitionDurationMs)
+        }
     }
 
     fun transitionToDarkNoBorder() {
-        background = darkToNoBorder
+        if (isPrivateModeEnabled) {
-        darkToNoBorder.startTransition(transitionDurationMs)
+            background = privateDarkToNoBorder
+            privateDarkToNoBorder.startTransition(transitionDurationMs)
+        } else {
+            background = darkToNoBorder
+            darkToNoBorder.startTransition(transitionDurationMs)
+        }
     }
 
     companion object {

app/src/main/java/org/mozilla/fenix/search/toolbar/ToolbarComponent.kt

@@ -5,6 +5,11 @@
 package org.mozilla.fenix.search.toolbar
 
 import android.view.ViewGroup
+import androidx.core.content.ContextCompat
+import kotlinx.android.synthetic.main.component_search.*
+import mozilla.components.browser.toolbar.BrowserToolbar
+import org.mozilla.fenix.DefaultThemeManager
+import org.mozilla.fenix.R
 import org.mozilla.fenix.mvi.Action
 import org.mozilla.fenix.mvi.ActionBusFactory
 import org.mozilla.fenix.mvi.Change
@@ -31,6 +36,16 @@ class ToolbarComponent(
     override fun initView() = ToolbarUIView(container, actionEmitter, changesObservable)
     init {
         render(reducer)
+        applyTheme()
+    }
+
+    fun getView(): BrowserToolbar = uiView.toolbar
+
+    private fun applyTheme() {
+        getView().textColor = ContextCompat.getColor(container.context,
+            DefaultThemeManager.resolveAttribute(R.attr.awesomeBarTitleTextColor, container.context))
+        getView().hintColor = ContextCompat.getColor(container.context,
+            DefaultThemeManager.resolveAttribute(R.attr.awesomeBarDescriptionTextColor, container.context))
     }
 }
 

app/src/main/java/org/mozilla/fenix/search/toolbar/ToolbarIntegration.kt

@@ -16,6 +16,7 @@ import mozilla.components.browser.toolbar.BrowserToolbar
 import mozilla.components.concept.storage.HistoryStorage
 import mozilla.components.feature.toolbar.ToolbarAutocompleteFeature
 import mozilla.components.feature.toolbar.ToolbarFeature
+import org.mozilla.fenix.DefaultThemeManager
 import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.application
 import org.mozilla.fenix.ext.components
@@ -33,7 +34,9 @@ class ToolbarIntegration(
         toolbar.setMenuBuilder(toolbarMenu.menuBuilder)
 
         val home = BrowserToolbar.Button(
-            context.resources.getDrawable(R.drawable.ic_home, context.application.theme),
+            context.resources
+                .getDrawable(DefaultThemeManager.resolveAttribute(R.attr.browserToolbarHomeIcon, context),
+                    context.application.theme),
             context.getString(R.string.browser_home_button),
             visible = { sessionManager.runWithSession(sessionId) { it.isCustomTabSession().not() } }
         ) {

app/src/main/java/org/mozilla/fenix/search/toolbar/ToolbarMenu.kt

@@ -10,6 +10,7 @@ import mozilla.components.browser.menu.item.BrowserMenuDivider
 import mozilla.components.browser.menu.item.BrowserMenuImageText
 import mozilla.components.browser.menu.item.BrowserMenuItemToolbar
 import mozilla.components.browser.menu.item.BrowserMenuSwitch
+import org.mozilla.fenix.DefaultThemeManager
 import org.mozilla.fenix.R
 
 class ToolbarMenu(
@@ -37,7 +38,7 @@ class ToolbarMenu(
     val menuToolbar by lazy {
         val back = BrowserMenuItemToolbar.Button(
             mozilla.components.ui.icons.R.drawable.mozac_ic_back,
-            iconTintColorResource = R.color.icons,
+            iconTintColorResource = DefaultThemeManager.resolveAttribute(R.attr.browserToolbarIcons, context),
             contentDescription = context.getString(R.string.browser_menu_back)
         ) {
             onItemTapped.invoke(Item.Back)
@@ -45,7 +46,7 @@ class ToolbarMenu(
 
         val forward = BrowserMenuItemToolbar.Button(
             mozilla.components.ui.icons.R.drawable.mozac_ic_forward,
-            iconTintColorResource = R.color.icons,
+            iconTintColorResource = DefaultThemeManager.resolveAttribute(R.attr.browserToolbarIcons, context),
             contentDescription = context.getString(R.string.browser_menu_forward)
         ) {
             onItemTapped.invoke(Item.Forward)
@@ -53,7 +54,7 @@ class ToolbarMenu(
 
         val refresh = BrowserMenuItemToolbar.Button(
             mozilla.components.ui.icons.R.drawable.mozac_ic_refresh,
-            iconTintColorResource = R.color.icons,
+            iconTintColorResource = DefaultThemeManager.resolveAttribute(R.attr.browserToolbarIcons, context),
             contentDescription = context.getString(R.string.browser_menu_refresh)
         ) {
             onItemTapped.invoke(Item.Reload)
@@ -68,7 +69,7 @@ class ToolbarMenu(
                 context.getString(R.string.browser_menu_help),
                 R.drawable.ic_help,
                 context.getString(R.string.browser_menu_help),
-                R.color.icons
+                DefaultThemeManager.resolveAttribute(R.attr.browserToolbarIcons, context)
             ) {
                 onItemTapped.invoke(Item.Help)
             },
@@ -77,7 +78,7 @@ class ToolbarMenu(
                 context.getString(R.string.browser_menu_settings),
                 R.drawable.ic_settings,
                 context.getString(R.string.browser_menu_settings),
-                R.color.icons
+                DefaultThemeManager.resolveAttribute(R.attr.browserToolbarIcons, context)
             ) {
                 onItemTapped.invoke(Item.Settings)
             },
@@ -86,7 +87,7 @@ class ToolbarMenu(
                 context.getString(R.string.browser_menu_library),
                 R.drawable.ic_library,
                 context.getString(R.string.browser_menu_library),
-                R.color.icons
+                DefaultThemeManager.resolveAttribute(R.attr.browserToolbarIcons, context)
             ) {
                 onItemTapped.invoke(Item.Library)
             },
@@ -102,7 +103,7 @@ class ToolbarMenu(
                 context.getString(R.string.browser_menu_find_in_page),
                 R.drawable.mozac_ic_search,
                 context.getString(R.string.browser_menu_find_in_page),
-                R.color.icons
+                DefaultThemeManager.resolveAttribute(R.attr.browserToolbarIcons, context)
             ) {
                 onItemTapped.invoke(Item.FindInPage)
             },
@@ -111,7 +112,7 @@ class ToolbarMenu(
                 context.getString(R.string.browser_menu_private_tab),
                 R.drawable.ic_private_browsing,
                 context.getString(R.string.browser_menu_private_tab),
-                R.color.icons
+                DefaultThemeManager.resolveAttribute(R.attr.browserToolbarIcons, context)
             ) {
                 onItemTapped.invoke(Item.NewPrivateTab)
             },
@@ -120,7 +121,7 @@ class ToolbarMenu(
                 context.getString(R.string.browser_menu_new_tab),
                 R.drawable.ic_new,
                 context.getString(R.string.browser_menu_new_tab),
-                R.color.icons
+                DefaultThemeManager.resolveAttribute(R.attr.browserToolbarIcons, context)
             ) {
                 onItemTapped.invoke(Item.NewTab)
             },
@@ -129,7 +130,7 @@ class ToolbarMenu(
                 context.getString(R.string.browser_menu_share),
                 R.drawable.mozac_ic_share,
                 context.getString(R.string.browser_menu_share),
-                R.color.icons
+                DefaultThemeManager.resolveAttribute(R.attr.browserToolbarIcons, context)
             ) {
                 onItemTapped.invoke(Item.Share)
             },
@@ -138,7 +139,7 @@ class ToolbarMenu(
                 context.getString(R.string.browser_menu_report_issue),
                 R.drawable.ic_report_issues,
                 context.getString(R.string.browser_menu_report_issue),
-                R.color.icons
+                DefaultThemeManager.resolveAttribute(R.attr.browserToolbarIcons, context)
             ) {
                 onItemTapped.invoke(Item.ReportIssue)
             },

app/src/main/res/drawable/home_background_gradient.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape>
+            <gradient
+                    android:angle="270"
+                    android:startColor="?attr/homeBackgroundTopGradient"
+                    android:endColor="?attr/homeBackgroundBottomGradient"
+                    android:type="linear" />
+        </shape>
+    </item>
+</selector>

app/src/main/res/drawable/home_search_background_private.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/searchPrivateBackground"/>
+
+    <stroke android:width="1dp"
+            android:color="@color/searchStrokePrivate"/>
+
+    <corners android:radius="8dp"/>
+</shape>

app/src/main/res/drawable/home_search_background_private_dark.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/searchDarkPrivateBackground"/>
+
+    <stroke android:width="1dp"
+        android:color="@color/searchStrokePrivate"/>
+
+    <corners android:radius="8dp"/>
+</shape>

app/src/main/res/drawable/home_search_background_private_dark_no_border.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/searchDarkPrivateBackgroundAlternative"/>
+
+    <corners android:bottomRightRadius="8dp"
+        android:bottomLeftRadius="8dp"
+        android:topLeftRadius="8dp"
+        android:topRightRadius="8dp"/>
+</shape>

app/src/main/res/drawable/ic_link.xml

@@ -1,3 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="20dp"
     android:height="20dp"

app/src/main/res/drawable/private_browsing_button_background.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+        android:color="?android:attr/colorControlHighlight">
+    <item android:id="@android:id/mask">
+        <shape>
+            <solid android:color="@color/private_browsing_primary" />
+            <corners android:radius="32dp" />
+        </shape>
+    </item>
+    <item>
+        <shape>
+            <solid android:color="@color/private_browsing_primary" />
+            <corners android:radius="32dp" />
+        </shape>
+    </item>
+</ripple>

app/src/main/res/drawable/private_browsing_button_white_background.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+        android:color="?android:attr/colorControlHighlight">
+    <item android:id="@android:id/mask">
+        <shape>
+            <solid android:color="#000000" />
+            <corners android:radius="32dp" />
+        </shape>
+    </item>
+    <item>
+        <shape>
+            <solid android:color="@color/offwhite" />
+            <corners android:radius="32dp" />
+        </shape>
+    </item>
+</ripple>

app/src/main/res/drawable/rounded_button.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+       android:shape="oval">
+
+    <corners android:radius="60dp"/>
+    <solid android:color="@color/private_browsing_primary" />
+</shape>

app/src/main/res/layout/component_awesomebar.xml

@@ -15,7 +15,7 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintBottom_toTopOf="@id/pill_wrapper"
-        mozac:awesomeBarTitleTextColor="#212121"
+        mozac:awesomeBarTitleTextColor="?attr/awesomeBarTitleTextColor"
-        mozac:awesomeBarDescriptionTextColor="#6b6b6b"
+        mozac:awesomeBarDescriptionTextColor="?attr/awesomeBarDescriptionTextColor"
-        mozac:awesomeBarChipTextColor="#ffffff"
+        mozac:awesomeBarChipTextColor="@color/offwhite"
-        mozac:awesomeBarChipBackgroundColor="#444444" />
+        mozac:awesomeBarChipBackgroundColor="@color/photonBlue40" />

app/src/main/res/layout/component_search.xml

@@ -10,6 +10,6 @@
     android:clickable="true"
     android:focusable="true"
     android:focusableInTouchMode="true"
-    app:browserToolbarInsecureColor="@color/icons"
+    app:browserToolbarInsecureColor="?attr/browserToolbarIcons"
-    app:browserToolbarMenuColor="@color/icons"
+    app:browserToolbarMenuColor="?attr/browserToolbarIcons"
-    app:browserToolbarSecureColor="@color/icons" />
+    app:browserToolbarSecureColor="?attr/browserToolbarIcons" />

app/src/main/res/layout/fragment_browser.xml

@@ -26,10 +26,11 @@
             android:layout_height="wrap_content"
             android:padding="4dp"
             android:visibility="gone"
+            android:background="@color/private_browsing_top_gradient"
             mozac:awesomeBarChipBackgroundColor="#444444"
             mozac:awesomeBarChipTextColor="#ffffff"
-            mozac:awesomeBarDescriptionTextColor="#dddddd"
+            mozac:awesomeBarDescriptionTextColor="?attr/awesomeBarDescriptionTextColor"
-            mozac:awesomeBarTitleTextColor="#ffffff" />
+            mozac:awesomeBarTitleTextColor="?attr/awesomeBarTitleTextColor" />
     </FrameLayout>
 
     <mozilla.components.feature.findinpage.view.FindInPageBar
@@ -38,8 +39,8 @@
             android:layout_height="56dp"
             android:layout_gravity="bottom"
             android:background="@color/offwhite"
-            mozac:findInPageResultCountTextColor="@color/colorPrimary"
+            mozac:findInPageResultCountTextColor="?android:attr/colorPrimary"
-            mozac:findInPageButtonsTint="@color/colorPrimary"
+            mozac:findInPageButtonsTint="?android:attr/colorPrimary"
             android:visibility="gone"
             app:layout_behavior="org.mozilla.fenix.components.FindInPageBarBehavior" />
 

app/src/main/res/layout/fragment_home.xml

@@ -8,6 +8,7 @@
     android:id="@+id/homeLayout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:background="?attr/homeBackgroundGradient"
     app:layoutDescription="@xml/home_scene"
     tools:context=".home.HomeFragment">
 
@@ -18,6 +19,7 @@
         android:layout_marginTop="16dp"
         android:background="?android:attr/selectableItemBackgroundBorderless"
         android:src="@drawable/ic_menu"
+        android:tint="?attr/menuButtonTint"
         android:contentDescription="@string/content_description_menu"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
@@ -26,7 +28,7 @@
         android:id="@+id/privateBrowsingButton"
         android:layout_width="@dimen/glyph_button_height"
         android:layout_height="@dimen/glyph_button_height"
-        android:background="?android:attr/selectableItemBackgroundBorderless"
+        android:background="?attr/privateBrowsingButtonBackground"
         android:src="@drawable/ic_private_browsing"
         android:contentDescription="@string/content_description_private_browsing_button"
         app:layout_constraintEnd_toStartOf="@id/menuButton"
@@ -38,7 +40,7 @@
         android:layout_height="wrap_content"
         android:layout_marginStart="16dp"
         android:layout_marginTop="42dp"
-        android:src="@drawable/ic_logo_wordmark"
+        android:src="?attr/fenixLogo"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/menuButton" />
 
@@ -50,7 +52,7 @@
             android:layout_marginTop="64dp"
             android:layout_marginStart="16dp"
             android:elevation="@dimen/toolbar_elevation"
-            android:background="@drawable/home_search_background_light"
+            android:background="?attr/toolbarWrapperBackground"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/wordmark">
@@ -68,7 +70,7 @@
                 android:focusable="true"
                 android:gravity="center_vertical"
                 android:text="@string/search_hint"
-                android:textColor="@color/searchText"
+                android:textColor="?attr/toolbarTextColor"
                 android:textSize="14sp" />
     </org.mozilla.fenix.home.SearchView>
 

app/src/main/res/layout/fragment_search.xml

@@ -5,11 +5,11 @@
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
-    xmlns:mozac="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".search.SearchFragment"
-    android:id="@+id/search_layout">
+    android:id="@+id/search_layout"
+    android:background="?attr/searchBackground">
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/toolbar_wrapper"
@@ -18,7 +18,7 @@
         android:layout_marginStart="16dp"
         android:layout_marginTop="24dp"
         android:layout_marginEnd="16dp"
-        android:background="@drawable/home_search_background_dark_no_border"
+        android:background="?attr/toolbarWrapperBackground"
         android:outlineProvider="paddedBounds"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
@@ -26,7 +26,7 @@
 
     <LinearLayout
         android:id="@+id/pill_wrapper"
-        android:background="@color/offwhite"
+        android:background="?attr/pillWrapperBackground"
         android:elevation="10dp"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
@@ -42,13 +42,21 @@
 
         <Button
             style="@style/search_pill"
+            android:id="@+id/search_scan_button"
             android:text="@string/search_scan_button"
             android:drawableStart="@drawable/ic_qr"
-            android:layout_marginEnd="8dp"/>
+            android:layout_marginEnd="8dp"
+            android:textColor="?attr/searchShortcutsTextColor"
+            android:background="?attr/pillWrapperBackground"
+            android:drawableTint="?attr/searchShortcutsTextColor"/>
 
         <Button
             style="@style/search_pill"
+            android:id="@+id/search_shortcuts_button"
             android:text="@string/search_shortcuts_button"
-            android:drawableStart="@drawable/ic_shortcuts" />
+            android:drawableStart="@drawable/ic_shortcuts"
+            android:textColor="?attr/searchShortcutsTextColor"
+            android:background="?attr/pillWrapperBackground"
+            android:drawableTint="?attr/searchShortcutsTextColor"/>
     </LinearLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/layout_url_backround.xml

@@ -11,5 +11,5 @@
         android:layout_width="wrap_content"
         android:layout_height="40dp"
         android:layout_gravity="center_vertical"
-        android:background="@drawable/url_background" />
+        android:background="?attr/toolbarWrapperBackground"/>
 </FrameLayout>

app/src/main/res/values-v23/styles.xml

@@ -3,9 +3,36 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <resources>
-    <style name="LightAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="LightTheme" parent="LightThemeBase">
-        <!-- style the statusbar -->
+        <!-- Style the status bar -->
+        <!-- We have to pull in the changes from v23/styles.xml to make
+            sure we also get them in 27+ -->
         <item name="android:statusBarColor">@android:color/transparent</item>
         <item name="android:windowLightStatusBar">true</item>
+
+        <!-- Style the navigation bar -->
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+    </style>
+
+    <style name="PrivateTheme" parent="PrivateThemeBase">
+        <!-- Style the status bar -->
+        <!-- We have to pull in the changes from v23/styles.xml to make
+            sure we also get them in 27+ -->
+        <item name="android:statusBarColor">@color/private_browsing_top_gradient</item>
+        <item name="android:windowLightStatusBar">false</item>
+
+        <!-- Style the navigation bar -->
+        <item name="android:navigationBarColor">@color/private_browsing_bottom_gradient</item>
+    </style>
+
+    <style name="SettingsTheme" parent="SettingsThemeBase">
+        <!-- Style the status bar -->
+        <!-- We have to pull in the changes from v23/styles.xml to make
+            sure we also get them in 27+ -->
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:windowLightStatusBar">true</item>
+
+        <!-- Style the navigation bar -->
+        <item name="android:navigationBarColor">@android:color/transparent</item>
     </style>
 </resources>

app/src/main/res/values-v27/styles.xml

@@ -3,16 +3,39 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <resources>
-    <style name="LightAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="PrivateTheme" parent="PrivateThemeBase">
-        <!-- style the statusbar -->
+        <!-- Style the status bar -->
+        <!-- We have to pull in the changes from v23/styles.xml to make
+            sure we also get them in 27+ -->
+        <item name="android:statusBarColor">@color/private_browsing_top_gradient</item>
+        <item name="android:windowLightStatusBar">false</item>
+
+        <!-- Style the navigation bar -->
+        <item name="android:navigationBarDividerColor">@android:color/transparent</item>
+        <item name="android:windowLightNavigationBar">false</item>
+    </style>
+
+    <style name="LightTheme" parent="LightThemeBase">
+        <!-- Style the status bar -->
         <!-- We have to pull in the changes from v23/styles.xml to make
             sure we also get them in 27+ -->
         <item name="android:statusBarColor">@android:color/transparent</item>
         <item name="android:windowLightStatusBar">true</item>
 
         <!-- Style the navigation bar -->
-        <item name="android:navigationBarColor">@android:color/transparent</item>
+        <item name="android:navigationBarDividerColor">@android:color/transparent</item>
-        <item name="android:navigationBarDividerColor">@android:color/black</item>
+        <item name="android:windowLightNavigationBar">true</item>
+    </style>
+
+    <style name="SettingsTheme" parent="SettingsThemeBase">
+        <!-- Style the status bar -->
+        <!-- We have to pull in the changes from v23/styles.xml to make
+            sure we also get them in 27+ -->
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:windowLightStatusBar">true</item>
+
+        <!-- Style the navigation bar -->
+        <item name="android:navigationBarDividerColor">@android:color/transparent</item>
         <item name="android:windowLightNavigationBar">true</item>
     </style>
 </resources>

app/src/main/res/values/attrs.xml

@@ -7,4 +7,28 @@
         <attr name="listItemTitle" format="reference" />
         <attr name="listItemIcon" format="reference" />
     </declare-styleable>
+
+    <attr name="searchBarColor" format="reference"/>
+    <attr name="fenixPrimary" format="reference"/>
+
+    <!-- Home fragment -->
+    <attr name="homeBackgroundTopGradient" format="reference"/>
+    <attr name="homeBackgroundBottomGradient" format="reference"/>
+    <attr name="homeBackgroundGradient" format="reference"/>
+    <attr name="privateBrowsingButtonBackground" format="reference"/>
+    <attr name="privateBrowsingButtonTint" format="reference"/>
+    <attr name="fenixLogo" format="reference"/>
+    <attr name="menuButtonTint" format="reference"/>
+    <attr name="toolbarWrapperBackground" format="reference"/>
+    <attr name="toolbarTextColor" format="reference"/>
+
+    <!-- Search fragment -->
+    <attr name="searchBackground" format="reference"/>
+    <attr name="searchShortcutsTextColor" format="reference"/>
+    <attr name="pillWrapperBackground" format="reference"/>
+
+    <!-- Browser fragment -->
+    <attr name="browserToolbarBackground" format="reference"/>
+    <attr name="browserToolbarIcons" format="reference"/>
+    <attr name="browserToolbarHomeIcon" format="reference"/>
 </resources>

app/src/main/res/values/colors.xml

@@ -7,10 +7,16 @@
     <color name="colorPrimaryDark">#202340</color>
     <color name="colorAccent">#D81B60</color>
 
+    <color name="awesomeBarTitleColor">#212121</color>
+    <color name="awesomeBarDescriptionColor">#6b6b6b</color>
     <color name="searchDarkBackground">#F2F2F5</color>
     <color name="searchDarkBackgroundAlternative">#E9E9ED</color>
+    <color name="searchPrivateBackground">#4f4e75</color>
+    <color name="searchDarkPrivateBackground">#42416b</color>
+    <color name="searchDarkPrivateBackgroundAlternative">#393863</color>
     <color name="searchStroke">#c5c8d7</color>
     <color name="searchStrokeAlternative">#0A202340</color>
+    <color name="searchStrokePrivate">#2d2e5f</color>
     <color name="searchText">#0C0C0D</color>
     <color name="offwhite">#f9f9fa</color>
     <color name="url_box_view">#E9E9ED</color>
@@ -20,6 +26,10 @@
     <color name="session_list_empty_fg">#544CD9</color>
     <color name="session_list_header">#6D6D6E</color>
 
+    <color name="private_browsing_primary">#ad3bff</color>
+    <color name="private_browsing_top_gradient">#242251</color>
+    <color name="private_browsing_bottom_gradient">#393862</color>
+
     <color name="searchPillBackground">#FAFAFC</color>
     <color name="searchPillPrimary">#202340</color>
 

app/src/main/res/values/preference_keys.xml

@@ -16,4 +16,6 @@
     <string name="pref_key_about" translatable="false">pref_key_about</string>
     <string name="pref_key_account" translatable="false">pref_key_account</string>
     <string name="pref_key_sign_in" translatable="false">pref_key_sign_in</string>
+    <string name="pref_key_private_mode" translatable="false">pref_key_private_mode</string>
+    <string name="pref_key_theme" translatable="false">pref_key_theme</string>
 </resources>

app/src/main/res/values/strings.xml

@@ -13,6 +13,16 @@
     <!-- Content description (not visible, for screen readers etc.): "Private Browsing" menu button. -->
     <string name="content_description_private_browsing_button">Enable Private Browsing</string>
 
+    <!-- Private browsing -->
+    <!-- Title for private session option -->
+    <string name="private_browsing_title">Private Session</string>
+    <!-- Explanation for private browsing displayed to users on home view when they first enable private mode -->
+    <string name="private_browsing_explanation">Fenix clears your search and browsing history when you close all
+        Private Sessions tabs. While this doesn\'t make you anonymous to websites or your internet service provider,
+        it makes it easier to keep what you do online private from anyone else who uses this device.</string>
+    <!-- Delete session button to erase your history in a private session -->
+    <string name="private_browsing_delete_session">Delete Session</string>
+
     <!-- Browser Menu -->
     <string name="browser_menu_back">Back</string>
     <string name="browser_menu_forward">Forward</string>

app/src/main/res/values/styles.xml

@@ -3,18 +3,95 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <resources xmlns:tools="http://schemas.android.com/tools">
-    <style name="LightAppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
+
-        <!-- Customize your theme here. -->
+    <style name="LightThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
-        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="android:statusBarColor">@android:color/black</item>
-        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>
-        <item name="colorAccent">@color/colorAccent</item>
+        <item name="android:colorPrimary">@color/offwhite</item>
+
+        <!-- Style the navigation bar -->
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+
+        <!-- Home fragment colors -->
+        <item name="homeBackgroundTopGradient">@color/offwhite</item>
+        <item name="homeBackgroundBottomGradient">@color/offwhite</item>
+        <item name="homeBackgroundGradient">@drawable/home_background_gradient</item>
+        <item name="privateBrowsingButtonBackground">@drawable/private_browsing_button_white_background</item>
+        <item name="privateBrowsingButtonTint">@color/offwhite</item>
+        <item name="fenixLogo">@drawable/ic_logo_wordmark</item>
+        <item name="menuButtonTint">@android:color/black</item>
+        <item name="toolbarWrapperBackground">@drawable/home_search_background_light</item>
+        <item name="toolbarTextColor">@color/searchText</item>
+
+        <!-- Search fragment colors -->
+        <item name="searchBackground">@color/offwhite</item>
+        <item name="searchShortcutsTextColor">@color/awesomeBarTitleColor</item>
+        <item name="pillWrapperBackground">@color/offwhite</item>
+        <item name="awesomeBarTitleTextColor">@color/awesomeBarTitleColor</item>
+        <item name="awesomeBarDescriptionTextColor">@color/awesomeBarDescriptionColor</item>
+
+        <!-- Browser fragment colors -->
+        <item name="browserToolbarBackground">@color/offwhite</item>
+        <item name="browserToolbarIcons">@color/icons</item>
+        <item name="browserToolbarHomeIcon">@drawable/ic_home</item>
     </style>
 
-    <style name="SettingsAppTheme" parent="Theme.MaterialComponents.Light">
+    <style name="LightTheme" parent="LightThemeBase">
+
+    </style>
+
+    <style name="PrivateThemeBase" parent="Theme.AppCompat.NoActionBar">
+        <item name="android:statusBarColor">@color/private_browsing_top_gradient</item>
+        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>
+        <item name="android:textColorHighlight">@color/private_browsing_primary</item>
+        <item name="android:colorPrimary">@color/private_browsing_primary</item>
+
+        <!-- Style the navigation bar -->
+        <item name="android:navigationBarColor">@color/private_browsing_bottom_gradient</item>
+
+        <!-- Home fragment colors -->
+        <item name="homeBackgroundTopGradient">@color/private_browsing_top_gradient</item>
+        <item name="homeBackgroundBottomGradient">@color/private_browsing_bottom_gradient</item>
+        <item name="homeBackgroundGradient">@drawable/home_background_gradient</item>
+        <item name="privateBrowsingButtonBackground">@drawable/private_browsing_button_background</item>
+        <item name="privateBrowsingButtonTint">@color/offwhite</item>
+        <item name="fenixLogo">@drawable/ic_logo_wordmark_white</item>
+        <item name="menuButtonTint">@color/offwhite</item>
+        <item name="toolbarWrapperBackground">@drawable/home_search_background_private</item>
+        <item name="toolbarTextColor">@color/offwhite</item>
+
+        <!-- Search fragment colors -->
+        <item name="searchBackground">@color/private_browsing_bottom_gradient</item>
+        <item name="searchShortcutsTextColor">@color/offwhite</item>
+        <item name="pillWrapperBackground">@color/private_browsing_top_gradient</item>
+        <item name="awesomeBarTitleTextColor">@color/offwhite</item>
+        <item name="awesomeBarDescriptionTextColor">@color/photonGrey40</item>
+
+        <!-- Browser fragment colors -->
+        <item name="browserToolbarBackground">@color/private_browsing_bottom_gradient</item>
+        <item name="browserToolbarIcons">@color/offwhite</item>
+        <item name="browserToolbarHomeIcon">@drawable/ic_home_white</item>
+    </style>
+
+    <style name="PrivateTheme" parent="PrivateThemeBase">
+
+    </style>
+
+    <!-- Fade animation for theme switching -->
+    <style name="WindowAnimationTransition">
+        <item name="android:windowEnterAnimation">@android:anim/fade_in</item>
+        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
+    </style>
+
+    <style name="SettingsThemeBase" parent="Theme.MaterialComponents.Light">
         <item name="colorPrimary">@color/offwhite</item>
         <item name="colorPrimaryDark">@color/offwhite</item>
         <item name="colorAccent">@color/icons</item>
-        <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+    </style>
+
+    <style name="SettingsTheme" parent="SettingsThemeBase">
+
     </style>
 
     <style name="search_pill" parent="Widget.AppCompat.Button.Borderless">