For #208 - Dark/Night Theme

CHANGELOG.md

@@ -8,5 +8,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - #916 - Added the ability to save and delete bookmarks
 - #356 - Adds the ability to delete history
+- #208 - Added normal browsing dark mode (advised to use attrs from now on for most referenced colors)
 ### Changed
 ### Removed

app/src/main/AndroidManifest.xml

@@ -20,7 +20,7 @@
             android:roundIcon="@mipmap/ic_launcher_round"
             android:supportsRtl="true"
             android:name=".FenixApplication"
-            android:theme="@style/LightTheme"
+            android:theme="@style/NormalTheme"
             android:usesCleartextTraffic="true"
             tools:ignore="UnusedAttribute">
         <activity android:name=".HomeActivity"

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

@@ -27,7 +27,7 @@ class DefaultBrowsingModeManager(private val homeActivity: HomeActivity) : Brows
     private fun updateTheme(mode: BrowsingModeManager.Mode) {
         homeActivity.themeManager.apply {
             val newTheme = when (mode) {
-                BrowsingModeManager.Mode.Normal -> ThemeManager.Theme.Light
+                BrowsingModeManager.Mode.Normal -> ThemeManager.Theme.Normal
                 BrowsingModeManager.Mode.Private -> ThemeManager.Theme.Private
             }
             setTheme(newTheme)

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

@@ -6,6 +6,8 @@ package org.mozilla.fenix
 
 import android.annotation.SuppressLint
 import android.app.Application
+import androidx.appcompat.app.AppCompatDelegate
+import androidx.preference.PreferenceManager
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.GlobalScope
 import kotlinx.coroutines.launch
@@ -20,6 +22,7 @@ import mozilla.components.support.ktx.android.content.isMainProcess
 import mozilla.components.support.ktx.android.content.runOnlyInMainProcess
 import mozilla.components.support.rustlog.RustLog
 import org.mozilla.fenix.components.Components
+import org.mozilla.fenix.utils.Settings
 import java.io.File
 
 @SuppressLint("Registered")
@@ -30,6 +33,7 @@ open class FenixApplication : Application() {
 
     override fun onCreate() {
         super.onCreate()
+        setDayNightTheme()
         val megazordEnabled = setupMegazord()
         setupLogging(megazordEnabled)
         setupCrashReporting()
@@ -138,4 +142,45 @@ open class FenixApplication : Application() {
             components.core.sessionManager.onLowMemory()
         }
     }
+
+    private fun setDayNightTheme() {
+        when {
+            Settings.getInstance(this).shouldUseLightTheme -> {
+                AppCompatDelegate.setDefaultNightMode(
+                    AppCompatDelegate.MODE_NIGHT_NO
+                )
+            }
+            Settings.getInstance(this).shouldUseDarkTheme -> {
+                AppCompatDelegate.setDefaultNightMode(
+                    AppCompatDelegate.MODE_NIGHT_YES
+                )
+            }
+            Settings.getInstance(this).shouldUseAutoBatteryTheme -> {
+                AppCompatDelegate.setDefaultNightMode(
+                    AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY
+                )
+            }
+            Settings.getInstance(this).shouldFollowDeviceTheme -> {
+                AppCompatDelegate.setDefaultNightMode(
+                    AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM
+                )
+            }
+            // First run of app no default set, set the default to Follow System for 28+ and Normal Mode otherwise
+            else -> {
+                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.P) {
+                    AppCompatDelegate.setDefaultNightMode(
+                        AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM
+                    )
+                    PreferenceManager.getDefaultSharedPreferences(this).edit()
+                        .putBoolean(getString(R.string.pref_key_follow_device_theme), true).apply()
+                } else {
+                    AppCompatDelegate.setDefaultNightMode(
+                        AppCompatDelegate.MODE_NIGHT_NO
+                    )
+                    PreferenceManager.getDefaultSharedPreferences(this).edit()
+                        .putBoolean(getString(R.string.pref_key_light_theme), true).apply()
+                }
+            }
+        }
+    }
 }

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

@@ -6,6 +6,7 @@ package org.mozilla.fenix
 
 import android.app.Activity
 import android.content.Context
+import android.content.res.Configuration
 import android.util.TypedValue
 import android.view.View
 import android.view.Window
@@ -13,7 +14,7 @@ import androidx.core.content.ContextCompat
 
 interface ThemeManager {
     enum class Theme {
-        Light, Private
+        Normal, Private
     }
 
     val currentTheme: Theme
@@ -22,7 +23,7 @@ interface ThemeManager {
 
 fun Activity.setTheme(theme: ThemeManager.Theme) {
     val themeCode = when (theme) {
-        ThemeManager.Theme.Light -> R.style.LightTheme
+        ThemeManager.Theme.Normal -> R.style.NormalTheme
         ThemeManager.Theme.Private -> R.style.PrivateTheme
     }
 
@@ -31,7 +32,7 @@ fun Activity.setTheme(theme: ThemeManager.Theme) {
 
 fun ThemeManager.Theme.isPrivate(): Boolean = this == ThemeManager.Theme.Private
 
-private var temporaryThemeManagerStorage = ThemeManager.Theme.Light
+private var temporaryThemeManagerStorage = ThemeManager.Theme.Normal
 class DefaultThemeManager : ThemeManager {
     var onThemeChange: ((ThemeManager.Theme) -> Unit)? = null
 
@@ -77,9 +78,29 @@ class DefaultThemeManager : ThemeManager {
             }
 
             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.Normal -> {
+                    val currentNightMode =
+                        context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
+                    when (currentNightMode) {
+                        Configuration.UI_MODE_NIGHT_NO -> {
+                            window.decorView.systemUiVisibility =
+                                window.decorView.systemUiVisibility or
+                                        View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR or
+                                        View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
+                        }
+                        Configuration.UI_MODE_NIGHT_YES -> {
+                            window.decorView.systemUiVisibility =
+                                window.decorView.systemUiVisibility and
+                                        View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv() and
+                                        View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR.inv()
+                        }
+                        Configuration.UI_MODE_NIGHT_UNDEFINED -> {
+                            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

app/src/main/java/org/mozilla/fenix/components/toolbar/ToolbarUIView.kt

@@ -8,7 +8,6 @@ import android.graphics.drawable.BitmapDrawable
 import android.view.LayoutInflater
 import android.view.ViewGroup
 import android.widget.ImageView
-import androidx.core.content.ContextCompat
 import io.reactivex.Observable
 import io.reactivex.Observer
 import io.reactivex.functions.Consumer
@@ -55,9 +54,7 @@ class ToolbarUIView(
             browserActionMargin = resources.pxToDp(browserActionMarginDp)
             urlBoxView = urlBackground
 
-            textColor = ContextCompat.getColor(context, R.color.search_text)
             hint = context.getString(R.string.search_hint)
-            hintColor = ContextCompat.getColor(context, R.color.search_text)
 
             setOnEditListener(object : mozilla.components.concept.toolbar.Toolbar.OnEditListener {
                 override fun onCancelEditing(): Boolean {

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

@@ -15,7 +15,7 @@ class SearchView(context: Context, attrs: AttributeSet) : FrameLayout(context, a
     var isPrivateModeEnabled = false
 
     private val lightDrawable =
-        resources.getDrawable(R.drawable.home_search_background_light, context.theme)
+        resources.getDrawable(R.drawable.home_search_background_normal, context.theme)
     private val privateLightDrawable =
         resources.getDrawable(R.drawable.home_search_background_private, context.theme)
     private val darkDrawable =

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

@@ -4,13 +4,16 @@
 
 package org.mozilla.fenix.home
 
+import android.graphics.PorterDuff
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.content.ContextCompat
 import com.google.android.material.bottomsheet.BottomSheetDialogFragment
 import kotlinx.android.extensions.LayoutContainer
 import kotlinx.android.synthetic.main.session_bottom_sheet.view.*
+import org.mozilla.fenix.DefaultThemeManager
 import org.mozilla.fenix.utils.ItsNotBrokenSnack
 import org.mozilla.fenix.R
 import org.mozilla.fenix.home.sessions.ArchivedSession
@@ -41,6 +44,14 @@ class SessionBottomSheetFragment : BottomSheetDialogFragment(), LayoutContainer
         view.current_session_card_tab_list.text = getTabTitles()
         view.archive_session_button.apply {
             visibility = if (sessionType is SessionType.Current) View.VISIBLE else View.GONE
+            val drawable = ContextCompat.getDrawable(context!!, R.drawable.ic_archive)
+            drawable?.setColorFilter(
+                ContextCompat.getColor(
+                    context!!,
+                    DefaultThemeManager.resolveAttribute(R.attr.iconColor, context!!)
+                ), PorterDuff.Mode.SRC_IN
+            )
+            setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null)
             setOnClickListener {
                 sessionType?.also {
                     if (it is SessionType.Current) {
@@ -52,6 +63,28 @@ class SessionBottomSheetFragment : BottomSheetDialogFragment(), LayoutContainer
             }
         }
 
+        view.delete_session_button.apply {
+            val drawable = ContextCompat.getDrawable(context!!, R.drawable.ic_delete)
+            drawable?.setColorFilter(
+                ContextCompat.getColor(
+                    context!!,
+                    DefaultThemeManager.resolveAttribute(R.attr.deleteColor, context!!)
+                ), PorterDuff.Mode.SRC_IN
+            )
+            setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null)
+        }
+
+        view.send_and_share_session_button.apply {
+            val drawable = ContextCompat.getDrawable(context!!, R.drawable.ic_share)
+            drawable?.setColorFilter(
+                ContextCompat.getColor(
+                    context!!,
+                    DefaultThemeManager.resolveAttribute(R.attr.iconColor, context!!)
+                ), PorterDuff.Mode.SRC_IN
+            )
+            setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null)
+        }
+
         view.send_and_share_session_button.setOnClickListener {
             ItsNotBrokenSnack(context!!).showSnackbar(issueNumber = "244")
         }

app/src/main/java/org/mozilla/fenix/home/tabs/TabsUIView.kt

@@ -54,8 +54,9 @@ class TabsUIView(
                 actionEmitter.onNext(TabsAction.MenuTapped)
             }
 
+            // Using a color here is fine for now because private browsing does not have this button
             save_session_button_text.apply {
-                val color = ContextCompat.getColor(context, R.color.photonWhite)
+                val color = ContextCompat.getColor(context, R.color.save_session_button_text_color)
                 val drawable = ContextCompat.getDrawable(context, R.drawable.ic_archive)
                 drawable?.setTint(color)
                 this.setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null)

app/src/main/java/org/mozilla/fenix/library/bookmarks/BookmarkItemMenu.kt

@@ -7,6 +7,7 @@ package org.mozilla.fenix.library.bookmarks
 import android.content.Context
 import mozilla.components.browser.menu.BrowserMenuBuilder
 import mozilla.components.browser.menu.item.SimpleBrowserMenuItem
+import org.mozilla.fenix.DefaultThemeManager
 import org.mozilla.fenix.R
 
 class BookmarkItemMenu(
@@ -46,8 +47,12 @@ class BookmarkItemMenu(
             SimpleBrowserMenuItem(context.getString(R.string.bookmark_menu_open_in_private_tab_button)) {
                 onItemTapped.invoke(BookmarkItemMenu.Item.OpenInPrivateTab)
             },
-            SimpleBrowserMenuItem(context.getString(R.string.bookmark_menu_delete_button),
-                textColorResource = R.color.photonRed60
+            SimpleBrowserMenuItem(
+                context.getString(R.string.bookmark_menu_delete_button),
+                textColorResource = DefaultThemeManager.resolveAttribute(
+                    R.attr.deleteColor,
+                    context
+                )
             ) {
                 onItemTapped.invoke(BookmarkItemMenu.Item.Delete)
             }

app/src/main/java/org/mozilla/fenix/library/history/HistoryItemMenu.kt

@@ -7,6 +7,7 @@ package org.mozilla.fenix.library.history
 import android.content.Context
 import mozilla.components.browser.menu.BrowserMenuBuilder
 import mozilla.components.browser.menu.item.SimpleBrowserMenuItem
+import org.mozilla.fenix.DefaultThemeManager
 import org.mozilla.fenix.R
 
 class HistoryItemMenu(
@@ -23,7 +24,7 @@ class HistoryItemMenu(
         listOf(
             SimpleBrowserMenuItem(
                 context.getString(R.string.history_delete_item),
-                textColorResource = R.color.photonRed60
+                textColorResource = DefaultThemeManager.resolveAttribute(R.attr.deleteColor, context)
             ) {
                 onItemTapped.invoke(Item.Delete)
             }

app/src/main/java/org/mozilla/fenix/search/awesomebar/AwesomeBarUIView.kt

@@ -4,6 +4,7 @@ package org.mozilla.fenix.search.awesomebar
    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/. */
 
+import android.graphics.PorterDuff
 import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.core.content.ContextCompat
@@ -19,6 +20,7 @@ import mozilla.components.feature.awesomebar.provider.SessionSuggestionProvider
 import mozilla.components.feature.search.SearchUseCases
 import mozilla.components.feature.session.SessionUseCases
 import mozilla.components.support.ktx.android.graphics.drawable.toBitmap
+import org.mozilla.fenix.DefaultThemeManager
 import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.components
 import org.mozilla.fenix.mvi.UIView
@@ -76,7 +78,12 @@ class AwesomeBarUIView(
 
     private val shortcutSearchUseCase = object : SearchUseCases.SearchUseCase {
         override fun invoke(searchTerms: String, searchEngine: SearchEngine?) {
-            actionEmitter.onNext(AwesomeBarAction.SearchTermsTapped(searchTerms, state?.suggestionEngine))
+            actionEmitter.onNext(
+                AwesomeBarAction.SearchTermsTapped(
+                    searchTerms,
+                    state?.suggestionEngine
+                )
+            )
         }
     }
 
@@ -87,7 +94,7 @@ class AwesomeBarUIView(
                 loadUrlUseCase,
                 getDrawable(R.drawable.ic_link)!!.toBitmap(),
                 getString(R.string.awesomebar_clipboard_title)
-                )
+            )
 
             sessionProvider =
                 SessionSuggestionProvider(
@@ -105,11 +112,17 @@ class AwesomeBarUIView(
 
             if (Settings.getInstance(container.context).showSearchSuggestions()) {
                 val draw = getDrawable(R.drawable.ic_search)
-                draw?.setTint(ContextCompat.getColor(this, R.color.search_text))
-
+                draw?.setColorFilter(
+                    ContextCompat.getColor(
+                        this,
+                        DefaultThemeManager.resolveAttribute(R.attr.searchShortcutsTextColor, this)
+                    ), PorterDuff.Mode.SRC_IN
+                )
                 defaultSearchSuggestionProvider =
                     SearchSuggestionProvider(
-                        searchEngine = components.search.searchEngineManager.getDefaultSearchEngine(this),
+                        searchEngine = components.search.searchEngineManager.getDefaultSearchEngine(
+                            this
+                        ),
                         searchUseCase = searchUseCase,
                         fetchClient = components.core.client,
                         mode = SearchSuggestionProvider.Mode.MULTIPLE_SUGGESTIONS,
@@ -119,11 +132,12 @@ class AwesomeBarUIView(
             }
 
             shortcutsEnginePickerProvider =
-                    ShortcutsSuggestionProvider(
-                        components.search.searchEngineManager,
-                        this,
-                        shortcutEngineManager::selectShortcutEngine,
-                        shortcutEngineManager::selectShortcutEngineSettings)
+                ShortcutsSuggestionProvider(
+                    components.search.searchEngineManager,
+                    this,
+                    shortcutEngineManager::selectShortcutEngine,
+                    shortcutEngineManager::selectShortcutEngineSettings
+                )
 
             shortcutEngineManager.shortcutsEnginePickerProvider = shortcutsEnginePickerProvider
         }
@@ -148,16 +162,21 @@ class AwesomeBarUIView(
     private fun setShortcutEngine(engine: SearchEngine) {
         with(container.context) {
             val draw = getDrawable(R.drawable.ic_search)
-            draw?.setTint(androidx.core.content.ContextCompat.getColor(this, R.color.search_text))
+            draw?.setColorFilter(
+                ContextCompat.getColor(
+                    this,
+                    DefaultThemeManager.resolveAttribute(R.attr.searchShortcutsTextColor, this)
+                ), PorterDuff.Mode.SRC_IN
+            )
 
             searchSuggestionFromShortcutProvider =
-                    SearchSuggestionProvider(
-                        components.search.searchEngineManager.getDefaultSearchEngine(this, engine.name),
-                        shortcutSearchUseCase,
-                        components.core.client,
-                        mode = SearchSuggestionProvider.Mode.MULTIPLE_SUGGESTIONS,
-                        icon = draw?.toBitmap()
-                    )
+                SearchSuggestionProvider(
+                    components.search.searchEngineManager.getDefaultSearchEngine(this, engine.name),
+                    shortcutSearchUseCase,
+                    components.core.client,
+                    mode = SearchSuggestionProvider.Mode.MULTIPLE_SUGGESTIONS,
+                    icon = draw?.toBitmap()
+                )
         }
     }
 

app/src/main/java/org/mozilla/fenix/settings/SettingsFragment.kt

@@ -43,6 +43,7 @@ import org.mozilla.fenix.R.string.pref_key_language
 import org.mozilla.fenix.R.string.pref_key_data_choices
 import org.mozilla.fenix.R.string.pref_key_about
 import org.mozilla.fenix.R.string.pref_key_sign_in
+import org.mozilla.fenix.R.string.pref_key_theme
 import org.mozilla.fenix.R.string.pref_key_account
 import org.mozilla.fenix.R.string.pref_key_account_category
 import org.mozilla.fenix.R.string.pref_key_search_engine_settings
@@ -77,6 +78,12 @@ class SettingsFragment : PreferenceFragmentCompat(), CoroutineScope, AccountObse
             requireComponents.search.searchEngineManager.getDefaultSearchEngine(it).name
         }
 
+        val themesPreference =
+            findPreference<Preference>(getString(R.string.pref_key_theme))
+        themesPreference?.summary = context?.let {
+            org.mozilla.fenix.utils.Settings.getInstance(it).themeSettingString
+        }
+
         val aboutPreference = findPreference<Preference>(getString(R.string.pref_key_about))
         val appName = getString(R.string.app_name)
         aboutPreference?.title = getString(R.string.preferences_about, appName)
@@ -122,6 +129,9 @@ class SettingsFragment : PreferenceFragmentCompat(), CoroutineScope, AccountObse
             resources.getString(pref_key_account) -> {
                 navigateToAccountSettings()
             }
+            resources.getString(pref_key_theme) -> {
+                navigateToThemeSettings()
+            }
         }
         return super.onPreferenceTreeClick(preference)
     }
@@ -210,6 +220,11 @@ class SettingsFragment : PreferenceFragmentCompat(), CoroutineScope, AccountObse
         Navigation.findNavController(view!!).navigate(directions)
     }
 
+    private fun navigateToThemeSettings() {
+        val directions = SettingsFragmentDirections.actionSettingsFragmentToThemeFragment()
+        Navigation.findNavController(view!!).navigate(directions)
+    }
+
     private fun navigateToSitePermissions() {
         val directions =
             SettingsFragmentDirections.actionSettingsFragmentToSitePermissionsFragment()

app/src/main/java/org/mozilla/fenix/settings/ThemeFragment.kt

@@ -0,0 +1,100 @@
+/* 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.settings
+
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import androidx.appcompat.app.AppCompatDelegate
+import androidx.preference.PreferenceFragmentCompat
+import org.mozilla.fenix.R
+
+class ThemeFragment : PreferenceFragmentCompat() {
+    private lateinit var radioLightTheme: RadioButtonPreference
+    private lateinit var radioDarkTheme: RadioButtonPreference
+    private lateinit var radioAutoBatteryTheme: RadioButtonPreference
+    private lateinit var radioFollowDeviceTheme: RadioButtonPreference
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        (activity as AppCompatActivity).title = getString(R.string.preferences_theme)
+        (activity as AppCompatActivity).supportActionBar?.show()
+    }
+
+    override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
+        setPreferencesFromResource(R.xml.theme_preferences, rootKey)
+    }
+
+    override fun onResume() {
+        super.onResume()
+        setupPreferences()
+    }
+
+    private fun setupPreferences() {
+        bindFollowDeviceTheme()
+        bindDarkTheme()
+        bindLightTheme()
+        bindAutoBatteryTheme()
+        setupRadioGroups()
+    }
+
+    private fun setupRadioGroups() {
+        radioLightTheme.addToRadioGroup(radioDarkTheme)
+        radioLightTheme.addToRadioGroup(radioAutoBatteryTheme)
+
+        radioDarkTheme.addToRadioGroup(radioLightTheme)
+        radioDarkTheme.addToRadioGroup(radioAutoBatteryTheme)
+
+        radioAutoBatteryTheme.addToRadioGroup(radioLightTheme)
+        radioAutoBatteryTheme.addToRadioGroup(radioDarkTheme)
+
+        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.P) {
+            radioLightTheme.addToRadioGroup(radioFollowDeviceTheme)
+            radioDarkTheme.addToRadioGroup(radioFollowDeviceTheme)
+            radioAutoBatteryTheme.addToRadioGroup(radioFollowDeviceTheme)
+
+            radioFollowDeviceTheme.addToRadioGroup(radioDarkTheme)
+            radioFollowDeviceTheme.addToRadioGroup(radioLightTheme)
+            radioFollowDeviceTheme.addToRadioGroup(radioAutoBatteryTheme)
+        }
+    }
+
+    private fun bindLightTheme() {
+        val keyLightTheme = getString(R.string.pref_key_light_theme)
+        radioLightTheme = requireNotNull(findPreference(keyLightTheme))
+        radioLightTheme.onClickListener {
+            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
+            activity?.recreate()
+        }
+    }
+
+    private fun bindAutoBatteryTheme() {
+        val keyBatteryTheme = getString(R.string.pref_key_auto_battery_theme)
+        radioAutoBatteryTheme = requireNotNull(findPreference(keyBatteryTheme))
+        radioAutoBatteryTheme.onClickListener {
+            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY)
+            activity?.recreate()
+        }
+    }
+
+    private fun bindDarkTheme() {
+        val keyDarkTheme = getString(R.string.pref_key_dark_theme)
+        radioDarkTheme = requireNotNull(findPreference(keyDarkTheme))
+        radioDarkTheme.onClickListener {
+            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
+            activity?.recreate()
+        }
+    }
+
+    private fun bindFollowDeviceTheme() {
+        val keyDeviceTheme = getString(R.string.pref_key_follow_device_theme)
+        radioFollowDeviceTheme = requireNotNull(findPreference(keyDeviceTheme))
+        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.P) {
+            radioFollowDeviceTheme.onClickListener {
+                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
+                activity?.recreate()
+            }
+        }
+    }
+}

app/src/main/java/org/mozilla/fenix/utils/Settings.kt

@@ -56,6 +56,39 @@ class Settings private constructor(context: Context) {
     val shouldRecommendedSettingsBeActivated: Boolean
         get() = preferences.getBoolean(appContext.getPreferenceKey(R.string.pref_key_recommended_settings), true)
 
+    val shouldUseLightTheme: Boolean
+        get() = preferences.getBoolean(
+            appContext.getPreferenceKey(R.string.pref_key_light_theme),
+            false
+        )
+
+    val shouldUseDarkTheme: Boolean
+        get() = preferences.getBoolean(
+            appContext.getPreferenceKey(R.string.pref_key_dark_theme),
+            false
+        )
+
+    val shouldFollowDeviceTheme: Boolean
+        get() = preferences.getBoolean(
+            appContext.getPreferenceKey(R.string.pref_key_follow_device_theme),
+            false
+        )
+
+    val shouldUseAutoBatteryTheme: Boolean
+        get() = preferences.getBoolean(
+            appContext.getPreferenceKey(R.string.pref_key_auto_battery_theme),
+            false
+        )
+
+    val themeSettingString: String
+        get() = when {
+            shouldFollowDeviceTheme -> appContext.getString(R.string.preference_follow_device_theme)
+            shouldUseAutoBatteryTheme -> appContext.getString(R.string.preference_auto_battery_theme)
+            shouldUseDarkTheme -> appContext.getString(R.string.preference_dark_theme)
+            shouldUseLightTheme -> appContext.getString(R.string.preference_light_theme)
+            else -> appContext.getString(R.string.preference_light_theme)
+        }
+
     private val autoBounceQuickActionSheetCount: Int
         get() = (preferences.getInt(appContext.getPreferenceKey(R.string.pref_key_bounce_quick_action), 0))
 

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

@@ -3,10 +3,10 @@
    - 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="#FFFFFF"/>
+    <solid android:color="@color/searchBackground_normal_theme"/>
 
     <stroke android:width="1dp"
-            android:color="@color/search_stroke"/>
+            android:color="@color/search_stroke_normal"/>
 
     <corners android:radius="8dp"/>
 </shape>

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

@@ -0,0 +1,13 @@
+<?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/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="?attr/iconColor"
+        android:pathData="M21.568,3.557C21.9357,3.9222 21.9558,4.5105 21.614,4.9L12.864,14.935C12.6852,15.1396 12.4296,15.2609 12.158,15.27L12.125,15.27C11.8649,15.2698 11.6156,15.1661 11.432,14.982L10.143,13.693C9.9508,13.5011 9.8468,13.238 9.8559,12.9666C9.865,12.6951 9.9863,12.4396 10.191,12.261L20.23,3.511C20.6191,3.1733 21.203,3.1934 21.568,3.557ZM7.125,15.5C8.1561,15.5002 9.0805,16.1355 9.4505,17.0979C9.8204,18.0603 9.5595,19.1512 8.794,19.842C8.787,19.849 8.786,19.858 8.778,19.865C7.528,21.115 5.247,21.745 2.747,21.745C2.4018,21.745 2.122,21.4652 2.122,21.12C2.1242,20.8914 2.2522,20.6826 2.455,20.577L2.485,20.561C2.495,20.557 2.504,20.546 2.515,20.546C3.833,19.968 4.263,18.747 4.715,17.331C4.719,17.318 4.731,17.312 4.737,17.3C5.0446,16.236 6.0174,15.5027 7.125,15.5Z" />
+</vector>

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

@@ -7,6 +7,6 @@
     <shape android:shape="rectangle">
         <corners android:radius="2dp"/>
         <size android:height="2dp" android:width="24dp" />
-        <solid android:color="#5215141A" />
+        <solid android:color="?attr/quickActionPullTabColor" />
     </shape>
 </inset>

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

@@ -9,5 +9,5 @@
     android:viewportHeight="24">
   <path
       android:pathData="M17.5,17c-2.1,0 -3.5,-2.5 -5.5,-2.5S8.4,17 6.5,17C3.9,17 2,14.6 2,10.4 2,7.8 2.8,7 6.1,7s4.3,1.4 5.9,1.4c1.6,0 2.6,-1.4 5.9,-1.4 3.3,0 4.1,0.8 4.1,3.4 0,4.2 -1.9,6.6 -4.5,6.6zM7.7,10.2c-2,0.1 -2.9,1.3 -2.9,1.6 0,0.3 1.3,1.1 2.7,1.1 1.3,0 2.9,-0.5 2.9,-0.9 0,-0.5 -0.8,-1.9 -2.7,-1.8zM16.3,10.2c-1.9,-0.1 -2.7,1.3 -2.7,1.8 0,0.4 1.5,0.9 2.9,0.9s2.7,-0.8 2.7,-1.1c-0.1,-0.3 -0.9,-1.5 -2.9,-1.6z"
-      android:fillColor="#0C0C0D" />
+      android:fillColor="?attr/privateBrowsingButtonTint" />
 </vector>

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

@@ -1,4 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?><!-- This Source Code Form is subject to the terms of the Mozilla Public
+<?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/. -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
@@ -7,7 +8,6 @@
     android:viewportWidth="24"
     android:viewportHeight="24">
     <path
-        android:fillColor="#0C0C0D"
-        android:fillType="evenOdd"
-        android:pathData="M12,22a1,1 0,0 1,-1 -1v-3.083a5.966,5.966 0,0 1,-2.477 -1.026l-2.18,2.18a1,1 0,0 1,-1.414 -1.414l2.18,-2.18A5.967,5.967 0,0 1,6.083 13H3a1,1 0,1 1,0 -2h3.083a5.968,5.968 0,0 1,1.026 -2.477l-2.18,-2.18A1,1 0,0 1,6.343 4.93l2.18,2.18A5.968,5.968 0,0 1,11 6.083V3a1,1 0,1 1,2 0v3.083a5.967,5.967 0,0 1,2.476 1.026l2.18,-2.18a1,1 0,1 1,1.415 1.414l-2.18,2.18A5.966,5.966 0,0 1,17.917 11H21a1,1 0,1 1,0 2h-3.083a5.966,5.966 0,0 1,-1.026 2.476l2.18,2.18a1,1 0,0 1,-1.414 1.415l-2.18,-2.18A5.966,5.966 0,0 1,13 17.917V21a1,1 0,0 1,-1 1zM8,12a4,4 0,1 1,8 0,4 4,0 0,1 -8,0z" />
+        android:fillColor="?attr/iconColor"
+        android:pathData="M20.75,11C21.3023,11 21.75,11.4477 21.75,12C21.75,12.5523 21.3023,13 20.75,13L17.91,13C17.7599,13.8907 17.4094,14.7356 16.885,15.471L18.894,17.48C19.273,17.8724 19.2676,18.4961 18.8818,18.8818C18.4961,19.2676 17.8724,19.273 17.48,18.894L15.471,16.885C14.7356,17.4094 13.8907,17.7599 13,17.91L13,20.75C13,21.3023 12.5523,21.75 12,21.75C11.4477,21.75 11,21.3023 11,20.75L11,17.91C10.0912,17.7564 9.2303,17.3943 8.485,16.852C8.445,16.9354 8.3935,17.0129 8.332,17.082L6.52,18.894C6.2689,19.154 5.8971,19.2582 5.5475,19.1667C5.1979,19.0752 4.9248,18.8021 4.8333,18.4525C4.7418,18.1029 4.846,17.7311 5.106,17.48L6.918,15.668C6.9871,15.6065 7.0646,15.555 7.148,15.515C6.6057,14.7697 6.2436,13.9088 6.09,13L3.25,13C2.6977,13 2.25,12.5523 2.25,12C2.25,11.4477 2.6977,11 3.25,11L6.09,11C6.2401,10.1093 6.5906,9.2644 7.115,8.529L5.106,6.52C4.727,6.1276 4.7324,5.5039 5.1182,5.1182C5.5039,4.7324 6.1276,4.727 6.52,5.106L8.529,7.115C9.2644,6.5906 10.1093,6.2401 11,6.09L11,3.25C11,2.6977 11.4477,2.25 12,2.25C12.5523,2.25 13,2.6977 13,3.25L13,6.09C13.8907,6.2401 14.7356,6.5906 15.471,7.115L17.48,5.106C17.8724,4.727 18.4961,4.7324 18.8818,5.1182C19.2676,5.5039 19.273,6.1276 18.894,6.52L16.885,8.529C17.4094,9.2644 17.7599,10.1093 17.91,11L20.75,11ZM8,12C8,13.0609 8.4214,14.0783 9.1716,14.8284C9.9217,15.5786 10.9391,16 12,16C14.2091,16 16,14.2091 16,12C16,9.7909 14.2091,8 12,8C9.7909,8 8,9.7909 8,12Z" />
 </vector>

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

@@ -12,7 +12,7 @@
     </item>
     <item>
         <shape>
-            <solid android:color="?attr/pillWrapperBackground" />
+            <solid android:color="?attr/sessionBackgroundColor" />
             <corners android:radius="8dp" />
         </shape>
     </item>

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

@@ -48,6 +48,7 @@
         android:layout_margin="10dp"
         android:contentDescription="@string/bookmark_menu_content_description"
         android:src="@drawable/ic_menu"
+        android:tint="?attr/iconColor"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toTopOf="parent" />

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

@@ -2,19 +2,16 @@
 <!-- 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/. -->
-<mozilla.components.browser.awesomebar.BrowserAwesomeBar
-        xmlns:android="http://schemas.android.com/apk/res/android"
-        xmlns:app="http://schemas.android.com/apk/res-auto"
-        xmlns:mozac="http://schemas.android.com/apk/res-auto"
-        android:id="@+id/awesomeBar"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:padding="4dp"
-        app:layout_constraintTop_toBottomOf="@id/toolbar_wrapper"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@id/pill_wrapper"
-        mozac:awesomeBarTitleTextColor="?attr/awesomeBarTitleTextColor"
-        mozac:awesomeBarDescriptionTextColor="?attr/awesomeBarDescriptionTextColor"
-        mozac:awesomeBarChipTextColor="@color/off_white"
-        mozac:awesomeBarChipBackgroundColor="@color/photonBlue40"/>
+<mozilla.components.browser.awesomebar.BrowserAwesomeBar xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:mozac="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/awesomeBar"
+    android:layout_width="0dp"
+    android:layout_height="0dp"
+    android:padding="4dp"
+    app:layout_constraintBottom_toTopOf="@id/pill_wrapper"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toBottomOf="@id/toolbar_wrapper"
+    mozac:awesomeBarDescriptionTextColor="?attr/awesomeBarDescriptionTextColor"
+    mozac:awesomeBarTitleTextColor="?attr/awesomeBarTitleTextColor" />

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

@@ -28,7 +28,7 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="@string/history_delete_all"
-                android:textColor="@color/photonRed60"
+                android:textColor="?attr/deleteColor"
                 android:drawablePadding="8dp"
                 android:textSize="16sp"
                 android:gravity="center"

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

@@ -75,13 +75,14 @@
             android:layout_height="wrap_content"
             android:layout_gravity="center"
             android:clickable="false"
+            android:drawableTint="@color/save_session_button_text_color"
             android:drawableStart="@drawable/ic_archive"
             android:drawablePadding="8dp"
             android:focusable="false"
             android:gravity="center"
             android:textStyle="bold"
             android:text="@string/session_save"
-            android:textColor="@color/photonWhite" />
+            android:textColor="@color/save_session_button_text_color" />
     </FrameLayout>
 
     <FrameLayout

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

@@ -21,7 +21,7 @@
         android:id="@+id/nestedScrollQuickAction"
         android:layout_width="match_parent"
         android:layout_height="80dp"
-        android:background="?attr/toolbarColor"
+        android:background="?attr/quickActionBackgroundColor"
         android:clipToPadding="true"
         app:behavior_hideable="true"
         app:behavior_peekHeight="15dp"

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

@@ -27,7 +27,7 @@
             android:layout_marginTop="6dp"
             android:lineSpacingExtra="8sp"
             android:singleLine="false"
-            android:textColor="@color/light_mode_text_color"
+            android:textColor="@color/text_color_normal_theme"
             android:textSize="24sp"
             android:textStyle="bold"
             app:layout_constraintEnd_toEndOf="parent"
@@ -42,7 +42,7 @@
             android:buttonTint="@color/crash_page_accent"
             android:checked="true"
             android:text="@string/tab_crash_send_report"
-            android:textColor="@color/light_mode_text_color"
+            android:textColor="@color/text_color_normal_theme"
             android:textSize="15sp"
             app:layout_constraintBottom_toTopOf="@id/close_tab_button"
             app:layout_constraintEnd_toEndOf="parent"
@@ -78,7 +78,7 @@
             android:backgroundTint="@color/crash_page_off_accent"
             android:text="@string/tab_crash_close"
             android:fontFamily="Sharp Sans"
-            android:textColor="@color/light_mode_text_color"
+            android:textColor="@color/text_color_normal_theme"
             android:textStyle="bold"
             android:textAllCaps="false"
             android:textSize="14sp"

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

@@ -9,7 +9,7 @@
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="?attr/toolbarColor">
+    android:background="?attr/quickActionBackgroundColor">
 
     <androidx.appcompat.widget.AppCompatImageButton
         android:id="@+id/quick_action_sheet_handle"
@@ -25,7 +25,7 @@
         android:layout_gravity="bottom"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?attr/toolbarColor">
+        android:background="?attr/quickActionBackgroundColor">
 
         <androidx.appcompat.widget.AppCompatTextView
             android:id="@+id/quick_action_share"

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

@@ -15,7 +15,8 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_margin="16dp"
-        android:background="?android:attr/colorBackground"
+        app:cardBackgroundColor="?attr/sessionBackgroundColor"
+        android:background="?attr/sessionBackgroundColor"
         android:elevation="5dp"
         android:padding="10dp"
         app:cardCornerRadius="10dp">
@@ -45,6 +46,7 @@
                 android:layout_marginBottom="8dp"
                 android:text="@string/tabs_header_title"
                 android:textAppearance="@style/HeaderTextStyle"
+                android:textColor="?attr/toolbarTextColor"
                 app:layout_constraintStart_toEndOf="@id/current_session_image"
                 app:layout_constraintTop_toTopOf="parent" />
 
@@ -58,6 +60,7 @@
                 android:fadingEdgeLength="48dp"
                 android:requiresFadingEdge="vertical"
                 android:textAppearance="@style/TextAppearance.MaterialComponents.Caption"
+                android:textColor="?attr/secondaryTextColor"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintHorizontal_bias="0"
@@ -73,15 +76,15 @@
         android:id="@+id/delete_session_button"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?android:attr/colorBackground"
+        android:background="?attr/sessionBackgroundColor"
         android:drawableStart="@drawable/ic_delete"
         android:drawablePadding="14dp"
-        android:drawableTint="@color/photonRed60"
+        android:drawableTint="?attr/deleteColor"
         android:paddingStart="20dp"
         android:paddingTop="12dp"
         android:paddingBottom="12dp"
         android:text="@string/current_session_delete"
-        android:textColor="@color/photonRed60"
+        android:textColor="?attr/deleteColor"
         android:textSize="16sp"
         tools:targetApi="m" />
 
@@ -94,29 +97,31 @@
         android:id="@+id/archive_session_button"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?android:attr/colorBackground"
+        android:background="?attr/sessionBackgroundColor"
         android:drawableStart="@drawable/ic_archive"
         android:drawablePadding="14dp"
+        android:drawableTint="?attr/iconColor"
         android:paddingStart="20dp"
         android:paddingTop="12dp"
         android:paddingBottom="12dp"
         android:text="@string/current_session_save"
-        android:textColor="@color/light_mode_bottom_sheet_text_color"
-        android:textSize="16sp" />
+        android:textColor="?attr/toolbarTextColor"
+        android:textSize="16sp"
+        tools:targetApi="m" />
 
     <TextView
         android:id="@+id/send_and_share_session_button"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?android:attr/colorBackground"
+        android:background="?attr/sessionBackgroundColor"
         android:drawableStart="@drawable/ic_share"
         android:drawablePadding="14dp"
-        android:drawableTint="@color/icons_light_mode"
+        android:drawableTint="?attr/iconColor"
         android:paddingStart="20dp"
         android:paddingTop="12dp"
         android:paddingBottom="12dp"
         android:text="@string/current_session_share"
-        android:textColor="@color/light_mode_bottom_sheet_text_color"
-        android:textSize="16sp" />
-
+        android:textColor="?attr/toolbarTextColor"
+        android:textSize="16sp"
+        tools:targetApi="m" />
 </LinearLayout>

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

@@ -6,9 +6,9 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="96dp"
+    app:cardBackgroundColor="@color/sessionBackgroundColor_normal_theme"
     android:layout_marginTop="8dp"
     android:layout_marginBottom="8dp"
-    android:background="@android:color/white"
     app:cardCornerRadius="10dp"
     app:cardElevation="5dp">
 
@@ -35,7 +35,7 @@
             android:layout_marginEnd="12dp"
             android:layout_marginBottom="5dp"
             android:textAppearance="@style/Header14TextStyle"
-            android:textColor="@color/photonInk80"
+            android:textColor="?attr/primaryTextColor"
             android:textSize="16sp"
             app:layout_constraintEnd_toStartOf="@id/session_card_overflow_button"
             app:layout_constraintStart_toEndOf="@+id/session_card_thumbnail"
@@ -45,6 +45,7 @@
             android:id="@+id/session_card_titles"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
+            android:textColor="?attr/secondaryTextColor"
             android:textAppearance="@style/TextAppearance.MaterialComponents.Caption"
             app:layout_constraintEnd_toEndOf="@id/session_card_timestamp"
             app:layout_constraintStart_toStartOf="@id/session_card_timestamp"
@@ -54,6 +55,7 @@
             android:id="@+id/session_card_extras"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:textColor="?attr/secondaryTextColor"
             android:textAppearance="@style/TextAppearance.MaterialComponents.Caption"
             app:layout_constraintStart_toStartOf="@id/session_card_titles"
             app:layout_constraintTop_toBottomOf="@+id/session_card_titles" />

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

@@ -8,6 +8,7 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginBottom="8dp"
+    app:cardBackgroundColor="?attr/sessionBackgroundColor"
     android:clipToPadding="false"
     app:cardCornerRadius="@dimen/tab_corner_radius"
     app:cardElevation="5dp">
@@ -34,7 +35,7 @@
             android:ellipsize="none"
             android:requiresFadingEdge="horizontal"
             android:singleLine="true"
-            android:textColor="?attr/toolbarTextColor"
+            android:textColor="?attr/primaryTextColor"
             android:textSize="16sp"
             app:layout_constraintEnd_toStartOf="@id/close_tab_button"
             app:layout_constraintHorizontal_bias="0"

app/src/main/res/navigation/nav_graph.xml

@@ -137,6 +137,9 @@
         <action
             android:id="@+id/action_settingsFragment_to_aboutFragment"
             app:destination="@id/aboutFragment" />
+        <action
+            android:id="@+id/action_settingsFragment_to_themeFragment"
+            app:destination="@id/themeFragment" />
     </fragment>
     <fragment android:id="@+id/dataChoicesFragment" android:name="org.mozilla.fenix.settings.DataChoicesFragment"
               android:label="DataChoicesFragment"/>
@@ -175,4 +178,8 @@
         <action android:id="@+id/action_crashReporterFragment_to_homeFragment" app:destination="@id/homeFragment"/>
         <argument android:name="crashIntent" app:argType="android.content.Intent"/>
     </fragment>
+    <fragment
+        android:id="@+id/themeFragment"
+        android:name="org.mozilla.fenix.settings.ThemeFragment"
+        android:label="ThemeFragment" />
 </navigation>

app/src/main/res/values-night/bools.xml

@@ -0,0 +1,7 @@
+<?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/. -->
+<resources>
+    <bool name="theme_is_light">false</bool>
+</resources>

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

@@ -0,0 +1,77 @@
+<?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/. -->
+<resources>
+    <color name="secondary_text_color_normal_theme">@color/secondaryTextColor_dark_theme</color>
+    <color name="icons_normal_theme">@color/off_white</color>
+    <color name="disabled_icons_normal_theme">@color/disabled_icons_dark_mode</color>
+    <color name="status_bar_color_normal_theme">@color/background_dark_theme</color>
+    <color name="colorPrimary_normal_theme">@color/background_dark_theme</color>
+    <color name="windowBackground_normal_theme">@color/background_dark_theme</color>
+    <color name="text_color_normal_theme">@color/off_white</color>
+    <color name="toolbar_normal_theme">@color/foreground_dark_theme</color>
+    <color name="toggle_activated_normal_theme">#A374F7</color>
+    <color name="colorSwitchThumbNormal_normal_theme">@color/off_white</color>
+
+    <color name="navigationBarColorHome_normal_theme">@android:color/transparent</color>
+    <color name="navigationBarColorBrowser_normal_theme">@android:color/transparent</color>
+
+    <!-- Browser -->
+    <color name="browserToolbarBackground_normal_theme">@color/background_dark_theme</color>
+
+    <!-- home -->
+    <color name="history_header_normal_theme">@color/off_white</color>
+    <color name="history_title_normal_theme">@color/off_white</color>
+    <color name="history_url_normal_theme">@color/off_white</color>
+    <color name="homeBackgroundTopGradient_normal_theme">@color/background_dark_theme</color>
+    <color name="homeBackgroundBottomGradient_normal_theme">@color/background_dark_theme</color>
+    <color name="menu_button_tint_normal_theme">@color/home_buttons_dark_theme</color>
+    <color name="privateBrowsingButtonTint_normal_theme">@color/home_buttons_dark_theme</color>
+
+    <!-- Colors for SearchView on homescreen -->
+    <color name="searchBackground_normal_theme">@color/foreground_dark_theme</color>
+    <color name="search_stroke_normal">#27262F</color>
+    <color name="search_dark_background">@color/foreground_dark_theme</color>
+    <color name="search_dark_background_alternative">@color/foreground_dark_theme</color>
+
+    <!-- Color of divider between searchView and tabs -->
+    <color name="homeDividerColor_normal_theme">@color/foreground_dark_theme</color>
+
+    <!-- Session Colors -->
+    <color name="sessionBackgroundColor_normal_theme">@color/foreground_dark_theme</color>
+    <color name="session_border_color">#592ACB</color>
+    <color name="save_session_button_color">#EFEFF2</color>
+    <color name="save_session_button_text_color">#1E1338</color>
+    <color name="delete_session_button_background">#e5e5ea</color>
+    <color name="delete_color">#EB5D63</color>
+    <color name="session_list_empty_bg">@color/foreground_dark_theme</color>
+    <color name="session_list_empty_fg">@color/off_white</color>
+    <color name="session_list_header">@color/off_white</color>
+    <color name="session_time_stamp_text_color">@color/off_white</color>
+
+    <color name="bottom_sheet_text_color_normal_theme">@color/off_white</color>
+    <color name="history_delete_button_background">#E3E3E6</color>
+
+    <!-- Library -->
+    <color name="library_list_item_text_color_light_mode">@color/off_white</color>
+
+    <!-- Search Fragment -->
+    <color name="suggestionBackground_normal_theme">#A374F7</color>
+    <color name="search_text">@color/off_white</color>
+    <color name="url_box_view">@color/foreground_dark_theme</color>
+
+    <!-- Search Pill -->
+    <color name="pillWrapperBackground_normal_theme">@color/background_dark_theme</color>
+    <color name="search_pill_background">@color/background_dark_theme</color>
+    <color name="search_pill_selected_background">@color/off_white</color>
+    <color name="search_pill_primary">#202340</color>
+
+    <!-- Awesome Bar -->
+    <color name="awesome_bar_title_color">@color/off_white</color>
+    <color name="awesome_bar_description_color">@color/secondaryTextColor_dark_theme</color>
+
+    <!-- Quick Action Sheet -->
+    <color name="quick_action_pull_tab">@color/secondaryTextColor_dark_theme</color>
+    <color name="quick_action_background_normal_theme">@color/background_dark_theme</color>
+</resources>

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

@@ -3,12 +3,12 @@
    - 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="LightTheme" parent="LightThemeBase">
+    <style name="NormalTheme" parent="NormalThemeBase">
         <!-- 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>
+        <item name="android:windowLightStatusBar">@bool/theme_is_light</item>
 
         <!-- Style the navigation bar -->
         <item name="android:navigationBarColor">@android:color/transparent</item>

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

@@ -15,15 +15,15 @@
         <item name="android:windowLightNavigationBar">false</item>
     </style>
 
-    <style name="LightTheme" parent="LightThemeBase">
+    <style name="NormalTheme" parent="NormalThemeBase">
         <!-- 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>
+        <item name="android:windowLightStatusBar">@bool/theme_is_light</item>
 
         <!-- Style the navigation bar -->
         <item name="android:navigationBarDividerColor">@android:color/transparent</item>
-        <item name="android:windowLightNavigationBar">true</item>
+        <item name="android:windowLightNavigationBar">@bool/theme_is_light</item>
     </style>
 </resources>

app/src/main/res/values-v28/bools.xml

@@ -0,0 +1,7 @@
+<?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/. -->
+<resources>
+    <bool name="API28">true</bool>
+</resources>

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

@@ -13,6 +13,8 @@
     <attr name="iconColor" format="reference" />
     <attr name="disabledIconColor" format="reference" />
     <attr name="toolbarColor" format="reference" />
+    <attr name="primaryTextColor" format="reference" />
+    <attr name="secondaryTextColor" format="reference" />
 
     <!-- Home fragment -->
     <attr name="homeBackgroundTopGradient" format="reference" />
@@ -28,6 +30,7 @@
     <attr name="homeDividerColor" format="reference" />
     <attr name="sessionBackgroundColor" format="reference" />
     <attr name="sessionBorderColor" format="reference" />
+    <attr name="deleteColor" format="reference" />
 
     <!-- Search fragment -->
     <attr name="searchBackground" format="reference"/>
@@ -43,6 +46,7 @@
     <attr name="browserToolbarMenuIcons" format="reference" />
     <attr name="navigationBarColorBrowser" format="reference" />
     <attr name="quickActionPullTabColor" format="reference" />
+    <attr name="quickActionBackgroundColor" format="reference" />
 
     <!-- History Fragment -->
     <attr name="historyURLColor" format="reference" />

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

@@ -0,0 +1,8 @@
+<?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/. -->
+<resources>
+    <bool name="theme_is_light">true</bool>
+    <bool name="API28">false</bool>
+</resources>

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

@@ -3,57 +3,92 @@
    - 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>
+    <!-- normal colors file-->
     <color name="color_primary">#544CD9</color>
     <color name="color_primary_dark">#202340</color>
     <color name="color_accent">#D81B60</color>
 
-    <color name="history_delete_button_background">#F2F2F5</color>
+    <color name="off_white">#f9f9fa</color>
+    <color name="secondary_text_color_normal_theme">#6b6b6b</color>
+    <color name="text_color_normal_theme">#20123A</color>
+
+    <!-- Bookmarks -->
     <color name="bookmark_favicon_background">#DFDFE3</color>
-    <color name="light_mode_text_color">#20123A</color>
 
+    <!-- Specific colors for dark theme -->
+    <color name="background_dark_theme">#1C1B22</color>
+    <color name="foreground_dark_theme">#32313C</color>
+    <color name="home_buttons_dark_theme">#A2A1A5</color>
+    <color name="secondaryTextColor_dark_theme">#A4A3AA</color>
+
+    <!-- Normal Theme -->
+    <color name="history_header_normal_theme">#696A6A</color>
+    <color name="history_title_normal_theme">@color/text_color_normal_theme</color>
+    <color name="history_url_normal_theme">#696A6A</color>
+    <color name="icons_normal_theme">#20123A</color>
+    <color name="disabled_icons_normal_theme">#8020233E</color>
+    <color name="status_bar_color_normal_theme">@color/off_white</color>
+    <color name="colorPrimary_normal_theme">@color/off_white</color>
+    <color name="windowBackground_normal_theme">@color/off_white</color>
+    <color name="toolbar_normal_theme">@color/off_white</color>
+    <color name="toggle_activated_normal_theme">#2E0EC1</color>
+    <color name="colorSwitchThumbNormal_normal_theme">@color/off_white</color>
+    <color name="navigationBarColorHome_normal_theme">@android:color/transparent</color>
+    <color name="navigationBarColorBrowser_normal_theme">@android:color/transparent</color>
+    <color name="homeBackgroundTopGradient_normal_theme">@color/off_white</color>
+    <color name="homeBackgroundBottomGradient_normal_theme">@color/off_white</color>
+    <color name="privateBrowsingButtonTint_normal_theme">@color/menu_button_tint_normal_theme</color>
+    <color name="browserToolbarBackground_normal_theme">@color/off_white</color>
+
+    <color name="searchBackground_normal_theme">@color/off_white</color>
+    <color name="search_stroke_normal">#c5c8d7</color>
+    <color name="search_stroke_alternative">#0A202340</color>
+
+    <color name="homeDividerColor_normal_theme">@color/photonGrey30</color>
+    <color name="sessionBackgroundColor_normal_theme">@color/photonWhite</color>
+    <color name="session_border_color">#592ACB</color>
+    <color name="save_session_button_color">#352F65</color>
+    <color name="save_session_button_text_color">@color/off_white</color>
+    <color name="bottom_sheet_text_color_normal_theme">#232749</color>
+    <color name="history_delete_button_background">#F2F2F5</color>
+    <color name="pillWrapperBackground_normal_theme">@color/off_white</color>
+    <color name="suggestionBackground_normal_theme">@color/photonBlue50</color>
+    <color name="library_list_item_text_color_light_mode">#202340</color>
+    <color name="session_list_empty_bg">#1A665BFD</color>
+    <color name="session_list_empty_fg">#544CD9</color>
+    <color name="session_list_header">#6D6D6E</color>
+    <color name="session_time_stamp_text_color">@color/photonInk80</color>
+    <color name="delete_session_button_background">#e5e5ea</color>
+    <color name="delete_color">@color/photonRed60</color>
+    <color name="search_pill_background">#FAFAFC</color>
+    <color name="search_pill_selected_background">#2f2c61</color>
+    <color name="search_pill_primary">#202340</color>
     <color name="awesome_bar_title_color">#212121</color>
     <color name="awesome_bar_description_color">#6b6b6b</color>
+    <color name="search_text">#0C0C0D</color>
+    <color name="url_box_view">#E9E9ED</color>
+    <color name="menu_button_tint_normal_theme">#20123A</color>
     <color name="search_dark_background">#F2F2F5</color>
     <color name="search_dark_background_alternative">#E9E9ED</color>
+
+    <!-- Private Theme -->
     <color name="search_private_background">#4f4e75</color>
     <color name="search_dark_private_background">#42416b</color>
     <color name="search_dark_private_background_alternative">#393863</color>
-    <color name="search_stroke">#c5c8d7</color>
-    <color name="search_stroke_alternative">#0A202340</color>
     <color name="search_stroke_private">#2d2e5f</color>
-    <color name="search_text">#0C0C0D</color>
-    <color name="off_white">#f9f9fa</color>
-    <color name="url_box_view">#E9E9ED</color>
-    <color name="session_border_color">#592ACB</color>
-    <color name="save_session_button_color">#352F65</color>
-    <color name="light_mode_bottom_sheet_text_color">#232749</color>
-
-    <color name="icons_light_mode">#20123A</color>
-    <color name="disabled_icons_light_mode">#8020233E</color>
-
     <color name="icons_dark_mode">@color/off_white</color>
     <color name="disabled_icons_dark_mode">#80F9F9FA</color>
-
-    <color name="toolbar_light_mode">@color/off_white</color>
     <color name="toolbar_dark_mode">@color/private_browsing_top_gradient</color>
-
-    <color name="session_list_empty_bg">#1A665BFD</color>
-    <color name="session_list_empty_fg">#544CD9</color>
-    <color name="session_list_header">#6D6D6E</color>
     <color name="session_list_private_header">#4a4671</color>
-    <color name="delete_session_button_background">#e5e5ea</color>
-
-    <color name="toggle_activated_light_mode">#2E0EC1</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="search_pill_background">#FAFAFC</color>
-    <color name="search_pill_selected_background">#2f2c61</color>
     <color name="search_pill_private_selected_background">#080639</color>
-    <color name="search_pill_primary">#202340</color>
+    <color name="history_header_private_theme">@color/photonGrey40</color>
+    <color name="history_title_private_theme">@color/off_white</color>
+    <color name="history_url_private_theme">@color/photonGrey40</color>
 
+    <!-- Library Colors -->
     <color name="library_sessions_icon_background">#B9F0FD</color>
     <color name="library_sessions_icon">#0E214A</color>
 
@@ -72,17 +107,11 @@
     <color name="library_reading_list_icon_background">#FCE98F</color>
     <color name="library_reading_list_icon">#8A201F</color>
 
-    <color name="history_header_light_theme">#696A6A</color>
-    <color name="history_title_light_theme">@color/light_mode_text_color</color>
-    <color name="history_url_light_theme">#696A6A</color>
-
-    <color name="history_header_private_theme">@color/photonGrey40</color>
-    <color name="history_title_private_theme">@color/off_white</color>
-    <color name="history_url_private_theme">@color/photonGrey40</color>
-
+    <!-- Crash Page Colors -->
     <color name="crash_page_accent">#312a65</color>
     <color name="crash_page_off_accent">#efeff2</color>
 
+    <!-- Quick Action Colors -->
     <color name="quick_action_share_icon">#174291</color>
     <color name="quick_action_share_icon_background">#b9f0fd</color>
 
@@ -90,6 +119,6 @@
     <color name="quick_action_read_icon_background">#fce98f</color>
 
     <color name="quick_action_pull_tab">#2915141A</color>
-
-    <color name="library_list_item_text_color_light_mode">#202340</color>
+    <color name="quick_action_background_normal_theme">@color/toolbar_normal_theme</color>
+    <color name="quick_action_background_private_theme">@color/toolbar_dark_mode</color>
 </resources>

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

@@ -49,4 +49,9 @@
     <string name="pref_key_phone_feature_notification" translatable="false">pref_key_phone_feature_notification</string>
     <string name="pref_key_category_phone_feature" translatable="false">pref_key_category_phone_feature</string>
 
+    <!-- Theme Settings -->
+    <string name="pref_key_light_theme" translatable="false">pref_key_light_theme</string>
+    <string name="pref_key_dark_theme" translatable="false">pref_key_dark_theme</string>
+    <string name="pref_key_auto_battery_theme" translatable="false">pref_key_auto_battery_theme</string>
+    <string name="pref_key_follow_device_theme" translatable="false">pref_key_follow_device_theme</string>
 </resources>

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

@@ -119,6 +119,8 @@
     <string name="preferences_category_account">Account</string>
     <!-- Preference shown on banner to sign into account -->
     <string name="preferences_sign_in">Sign in</string>
+    <!-- Preference for changing default theme to dark or light mode -->
+    <string name="preferences_theme">Theme</string>
     <!-- Preference description for banner about signing in -->
     <string name="preferences_sign_in_description">Sync bookmarks, history, and more with your Firefox Account</string>
     <!-- Preference shown instead of account display name while account profile information isn't available yet. -->
@@ -168,6 +170,16 @@
     <!-- Preference switch for app health report. -->
     <string name="preferences_fenix_health_report">Fenix health report</string>
 
+    <!-- Theme Preferences -->
+    <!-- Preference for using light theme -->
+    <string name="preference_light_theme">Light</string>
+    <!-- Preference for using dark theme -->
+    <string name="preference_dark_theme">Dark</string>
+    <!-- Preference for using using dark or light theme automatically set by battery -->
+    <string name="preference_auto_battery_theme">Set by Battery Saver</string>
+    <!-- Preference for using following device theme -->
+    <string name="preference_follow_device_theme">Follow device theme</string>
+
     <!-- Quick Action Sheet -->
     <!-- Option in Quick Action Sheet in the browser to share the current page -->
     <string name="quick_action_share">Share</string>

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

@@ -4,68 +4,77 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <resources>
 
-    <style name="LightThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
-        <item name="android:statusBarColor">@color/off_white</item>
+    <style name="NormalThemeBase" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="android:statusBarColor">@color/status_bar_color_normal_theme</item>
         <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>
-        <item name="android:colorPrimary">@color/off_white</item>
-        <item name="android:windowBackground">@color/off_white</item>
-        <item name="iconColor">@color/icons_light_mode</item>
-        <item name="disabledIconColor">@color/disabled_icons_light_mode</item>
-        <item name="toolbarColor">@color/toolbar_light_mode</item>
-        <item name="colorPrimary">@color/off_white</item>
+        <item name="android:colorPrimary">@color/colorPrimary_normal_theme</item>
+        <item name="android:windowBackground">@color/windowBackground_normal_theme</item>
+        <item name="iconColor">@color/icons_normal_theme</item>
+        <item name="disabledIconColor">@color/disabled_icons_normal_theme</item>
+        <item name="toolbarColor">@color/toolbar_normal_theme</item>
+        <item name="colorPrimary">@color/color_primary</item>
         <item name="colorAccent">@color/session_border_color</item>
+        <item name="primaryTextColor">@color/text_color_normal_theme</item>
+        <item name="secondaryTextColor">@color/secondary_text_color_normal_theme</item>
+        <item name="colorPrimaryDark">@color/background_dark_theme</item>
+
 
         <!-- Toggle colors activated and off -->
-        <item name="colorControlActivated">@color/toggle_activated_light_mode</item>
-        <item name="colorSwitchThumbNormal">@color/off_white</item>
+        <item name="colorControlActivated">@color/toggle_activated_normal_theme</item>
+        <item name="colorSwitchThumbNormal">@color/colorSwitchThumbNormal_normal_theme</item>
 
         <!-- Color of overscroll glow -->
-        <item name="android:colorEdgeEffect">@color/toggle_activated_light_mode</item>
+        <item name="android:colorEdgeEffect">@color/toggle_activated_normal_theme</item>
 
         <!-- Style the navigation bar -->
-        <item name="navigationBarColorHome">@android:color/transparent</item>
-        <item name="navigationBarColorBrowser">@android:color/transparent</item>
+        <item name="navigationBarColorHome">@color/navigationBarColorHome_normal_theme</item>
+        <item name="navigationBarColorBrowser">@color/navigationBarColorBrowser_normal_theme</item>
 
         <!-- Home fragment colors -->
-        <item name="homeBackgroundTopGradient">@color/off_white</item>
-        <item name="homeBackgroundBottomGradient">@color/off_white</item>
+        <item name="homeBackgroundTopGradient">@color/homeBackgroundTopGradient_normal_theme</item>
+        <item name="homeBackgroundBottomGradient">@color/homeBackgroundBottomGradient_normal_theme
+        </item>
         <item name="homeBackgroundGradient">@drawable/home_background_gradient</item>
-        <item name="privateBrowsingButtonBackground">?android:attr/selectableItemBackgroundBorderless</item>
-        <item name="privateBrowsingButtonTint">@color/off_white</item>
+        <item name="privateBrowsingButtonBackground">
+            ?android:attr/selectableItemBackgroundBorderless
+        </item>
+        <item name="privateBrowsingButtonTint">@color/privateBrowsingButtonTint_normal_theme</item>
         <item name="fenixLogo">@drawable/ic_logo_wordmark</item>
-        <item name="menuButtonTint">@color/light_mode_text_color</item>
-        <item name="toolbarWrapperBackground">@drawable/home_search_background_light</item>
-        <item name="toolbarTextColor">@color/light_mode_text_color</item>
-        <item name="homeDividerColor">@color/photonGrey30</item>
-        <item name="sessionBackgroundColor">@color/photonWhite</item>
+        <item name="menuButtonTint">@color/menu_button_tint_normal_theme</item>
+        <item name="toolbarWrapperBackground">@drawable/home_search_background_normal</item>
+        <item name="toolbarTextColor">@color/text_color_normal_theme</item>
+        <item name="homeDividerColor">@color/homeDividerColor_normal_theme</item>
+        <item name="sessionBackgroundColor">@color/sessionBackgroundColor_normal_theme</item>
         <item name="sessionBorderColor">@color/session_border_color</item>
+        <item name="deleteColor">@color/delete_color</item>
 
         <!-- Search fragment colors -->
-        <item name="searchBackground">@color/off_white</item>
+        <item name="searchBackground">@color/searchBackground_normal_theme</item>
         <item name="searchShortcutsTextColor">@color/awesome_bar_title_color</item>
-        <item name="pillWrapperBackground">@color/off_white</item>
+        <item name="pillWrapperBackground">@color/pillWrapperBackground_normal_theme</item>
         <item name="pillWrapperSelectedBackground">@color/search_pill_selected_background</item>
         <item name="awesomeBarTitleTextColor">@color/awesome_bar_title_color</item>
         <item name="awesomeBarDescriptionTextColor">@color/awesome_bar_description_color</item>
-        <item name="suggestionBackground">@color/photonBlue50</item>
+        <item name="suggestionBackground">@color/suggestionBackground_normal_theme</item>
 
         <!-- Browser fragment colors -->
         <item name="browserUrlBarBackground">@drawable/home_search_background_dark</item>
-        <item name="browserToolbarBackground">@color/off_white</item>
-        <item name="browserToolbarIcons">@color/icons_light_mode</item>
-        <item name="browserToolbarMenuIcons">@color/icons_light_mode</item>
+        <item name="browserToolbarBackground">@color/browserToolbarBackground_normal_theme</item>
+        <item name="browserToolbarIcons">@color/icons_normal_theme</item>
+        <item name="browserToolbarMenuIcons">@color/icons_normal_theme</item>
         <item name="quickActionPullTabColor">@color/quick_action_pull_tab</item>
+        <item name="quickActionBackgroundColor">@color/quick_action_background_normal_theme</item>
 
         <!-- History fragment colors -->
-        <item name="historyTitleColor">@color/history_title_light_theme</item>
-        <item name="historyURLColor">@color/history_url_light_theme</item>
-        <item name="historyHeader">@color/history_header_light_theme</item>
+        <item name="historyTitleColor">@color/history_title_normal_theme</item>
+        <item name="historyURLColor">@color/history_url_normal_theme</item>
+        <item name="historyHeader">@color/history_header_normal_theme</item>
 
         <!-- Library Fragment -->
         <item name="libraryListItemTextColor">@color/library_list_item_text_color_light_mode</item>
     </style>
 
-    <style name="LightTheme" parent="LightThemeBase">
+    <style name="NormalTheme" parent="NormalThemeBase">
 
     </style>
 
@@ -80,6 +89,8 @@
         <item name="toolbarColor">@color/toolbar_dark_mode</item>
         <item name="colorPrimary">@color/private_browsing_primary</item>
         <item name="colorAccent">@color/private_browsing_primary</item>
+        <item name="primaryTextColor">@color/off_white</item>
+        <item name="secondaryTextColor">@color/photonGrey40</item>
 
         <!-- Style the navigation bar -->
         <item name="navigationBarColorHome">@color/private_browsing_bottom_gradient</item>
@@ -98,7 +109,7 @@
         <item name="homeDividerColor">@color/search_private_background</item>
         <item name="sessionBackgroundColor">@color/session_list_private_header</item>
         <item name="sessionBorderColor">@color/private_browsing_primary</item>
-        <item name="quickActionPullTabColor">@color/off_white</item>
+        <item name="deleteColor">@color/photonRed60</item>
 
         <!-- Search fragment colors -->
         <item name="searchBackground">@color/private_browsing_bottom_gradient</item>
@@ -114,6 +125,8 @@
         <item name="browserToolbarBackground">@color/private_browsing_top_gradient</item>
         <item name="browserToolbarIcons">@color/icons_dark_mode</item>
         <item name="browserToolbarMenuIcons">@color/icons_dark_mode</item>
+        <item name="quickActionPullTabColor">@color/off_white</item>
+        <item name="quickActionBackgroundColor">@color/quick_action_background_private_theme</item>
 
         <!-- History fragment colors -->
         <item name="historyTitleColor">@color/history_title_private_theme</item>
@@ -169,7 +182,7 @@
 
     <style name="CurrentSessionBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
         <item name="bottomSheetStyle">@style/CurrentSessionBottomSheetStyle</item>
-        <item name="android:textColor">@color/light_mode_text_color</item>
+        <item name="android:textColor">@color/text_color_normal_theme</item>
 
         <!-- This doesn't seem to work see https://issuetracker.google.com/issues/120426520 -->
         <item name="scrimBackground">@drawable/session_sheet_background</item>
@@ -177,7 +190,7 @@
 
     <style name="CurrentSessionBottomSheetStyle" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
         <item name="android:background">@android:color/transparent</item>
-        <item name="android:textColor">@color/light_mode_text_color</item>
+        <item name="android:textColor">@color/text_color_normal_theme</item>
 
         <!-- This doesn't seem to work see https://issuetracker.google.com/issues/120426520 -->
         <item name="scrimBackground">@drawable/session_sheet_background</item>

app/src/main/res/xml/preferences.xml

@@ -42,6 +42,11 @@
             android:key="@string/pref_key_credit_cards_addresses"
             android:title="@string/preferences_credit_cards_addresses" />
 
+        <androidx.preference.Preference
+            android:icon="@drawable/ic_customize"
+            android:key="@string/pref_key_theme"
+            android:title="@string/preferences_theme" />
+
         <org.mozilla.fenix.settings.DefaultBrowserPreference
             android:key="@string/pref_key_make_default_browser"
             android:title="@string/preferences_set_as_default_browser" />

app/src/main/res/xml/theme_preferences.xml

@@ -0,0 +1,28 @@
+<?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/. -->
+<androidx.preference.PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <org.mozilla.fenix.settings.RadioButtonPreference
+        android:defaultValue="false"
+        android:key="@string/pref_key_light_theme"
+        android:title="@string/preference_light_theme" />
+
+    <org.mozilla.fenix.settings.RadioButtonPreference
+        android:defaultValue="false"
+        android:key="@string/pref_key_dark_theme"
+        android:title="@string/preference_dark_theme" />
+
+    <org.mozilla.fenix.settings.RadioButtonPreference
+        android:defaultValue="false"
+        android:key="@string/pref_key_auto_battery_theme"
+        android:title="@string/preference_auto_battery_theme" />
+
+    <org.mozilla.fenix.settings.RadioButtonPreference
+        android:defaultValue="false"
+        android:key="@string/pref_key_follow_device_theme"
+        android:title="@string/preference_follow_device_theme"
+        app:isPreferenceVisible="@bool/API28" />
+</androidx.preference.PreferenceScreen>