From: Soren Stoutner <soren@stoutner.com>
Date: Wed, 14 Jun 2017 01:24:32 +0000 (-0700)
Subject: Create a dark theme for `AboutActivity`.
X-Git-Tag: v2.4~9
X-Git-Url: https://gitweb.stoutner.com/?a=commitdiff_plain;h=e3ed631a52f5e8eac2d5c938b2d475ed6c9362bb;p=PrivacyBrowserAndroid.git

Create a dark theme for `AboutActivity`.
---

diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 300e3045..cca1063f 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -162,7 +162,6 @@
         <activity
             android:name=".activities.AboutActivity"
             android:label="@string/about_privacy_browser"
-            android:theme="@style/PrivacyBrowserLight.SecondaryActivity"
             android:parentActivityName=".activities.MainWebViewActivity"
             android:configChanges="orientation|screenSize"
             android:screenOrientation="fullUser"
diff --git a/app/src/main/java/com/stoutner/privacybrowser/activities/AboutActivity.java b/app/src/main/java/com/stoutner/privacybrowser/activities/AboutActivity.java
index 2251736b..8244774e 100644
--- a/app/src/main/java/com/stoutner/privacybrowser/activities/AboutActivity.java
+++ b/app/src/main/java/com/stoutner/privacybrowser/activities/AboutActivity.java
@@ -35,8 +35,22 @@ import com.stoutner.privacybrowser.R;
 public class AboutActivity extends AppCompatActivity {
     @Override
     protected void onCreate(Bundle savedInstanceState) {
+        // Set the theme.
+        if (MainWebViewActivity.darkTheme) {
+            setTheme(R.style.PrivacyBrowserDark_SecondaryActivity);
+        } else {
+            setTheme(R.style.PrivacyBrowserLight_SecondaryActivity);
+        }
+
+        // Run the default commands.
         super.onCreate(savedInstanceState);
-        setContentView(R.layout.about_coordinatorlayout);
+
+        // Set the content view according to the theme.
+        if (MainWebViewActivity.darkTheme) {
+            setContentView(R.layout.about_coordinatorlayout_dark);
+        } else {
+            setContentView(R.layout.about_coordinatorlayout_light);
+        }
 
         // We need to use the SupportActionBar from android.support.v7.app.ActionBar until the minimum API is >= 21.
         Toolbar aboutAppBar = (Toolbar) findViewById(R.id.about_toolbar);
diff --git a/app/src/main/java/com/stoutner/privacybrowser/activities/MainWebViewActivity.java b/app/src/main/java/com/stoutner/privacybrowser/activities/MainWebViewActivity.java
index b8266726..e7286522 100644
--- a/app/src/main/java/com/stoutner/privacybrowser/activities/MainWebViewActivity.java
+++ b/app/src/main/java/com/stoutner/privacybrowser/activities/MainWebViewActivity.java
@@ -122,6 +122,9 @@ import java.util.Set;
 public class MainWebViewActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener, CreateHomeScreenShortcutDialog.CreateHomeScreenSchortcutListener,
         SslCertificateErrorDialog.SslCertificateErrorListener, DownloadFileDialog.DownloadFileListener, DownloadImageDialog.DownloadImageListener, UrlHistoryDialog.UrlHistoryListener {
 
+    // `darkTheme` is public static so it can be accessed from `AboutActivity`.  It is also used in `onCreate()`, `applyAppSettings()`, and `applyDomainSettings()`.
+    public static boolean darkTheme;
+
     // `favoriteIconBitmap` is public static so it can be accessed from `CreateHomeScreenShortcutDialog`, `BookmarksActivity`, `CreateBookmarkDialog`, `CreateBookmarkFolderDialog`, `EditBookmarkDialog`, `EditBookmarkFolderDialog`, `ViewSslCertificateDialog`.
     // It is also used in `onCreate()`, `onCreateHomeScreenShortcutCreate()`, and `applyDomainSettings`.
     public static Bitmap favoriteIconBitmap;
@@ -292,9 +295,6 @@ public class MainWebViewActivity extends AppCompatActivity implements Navigation
     // `mainWebViewRelativeLayout` is used in `onCreate()` and `onNavigationItemSelected()`.
     private RelativeLayout mainWebViewRelativeLayout;
 
-    // `darkTheme` is used in `onCreate()`, `applyAppSettings()`, and `applyDomainSettings()`.
-    private boolean darkTheme;
-
     @Override
     // Remove Android Studio's warning about the dangers of using SetJavaScriptEnabled.  The whole premise of Privacy Browser is built around an understanding of these dangers.
     @SuppressLint("SetJavaScriptEnabled")
@@ -317,7 +317,7 @@ public class MainWebViewActivity extends AppCompatActivity implements Navigation
         // Run the default commands.
         super.onCreate(savedInstanceState);
 
-        // Set the content view according to the theme..
+        // Set the content view according to the theme.
         if (darkTheme) {
             setContentView(R.layout.main_drawerlayout_dark);
         } else {
diff --git a/app/src/main/java/com/stoutner/privacybrowser/fragments/AboutTabFragment.java b/app/src/main/java/com/stoutner/privacybrowser/fragments/AboutTabFragment.java
index 59891f00..ffac619f 100644
--- a/app/src/main/java/com/stoutner/privacybrowser/fragments/AboutTabFragment.java
+++ b/app/src/main/java/com/stoutner/privacybrowser/fragments/AboutTabFragment.java
@@ -22,6 +22,8 @@ package com.stoutner.privacybrowser.fragments;
 import android.annotation.SuppressLint;
 import android.content.pm.PackageManager;
 import android.content.pm.Signature;
+import android.graphics.ColorMatrixColorFilter;
+import android.graphics.Paint;
 import android.os.Build;
 import android.os.Bundle;
 import android.support.v4.app.Fragment;
@@ -36,6 +38,7 @@ import android.widget.TextView;
 
 import com.stoutner.privacybrowser.BuildConfig;
 import com.stoutner.privacybrowser.R;
+import com.stoutner.privacybrowser.activities.MainWebViewActivity;
 
 import java.io.ByteArrayInputStream;
 import java.io.InputStream;
@@ -74,9 +77,12 @@ public class AboutTabFragment extends Fragment {
 
         // Load the tabs.  Tab numbers start at 0.
         if (tabNumber == 0) {  // Load the about tab.
-            // Setting false at the end of inflater.inflate does not attach the inflated layout as a child of container.
-            // The fragment will take care of attaching the root automatically.
-            tabLayout = inflater.inflate(R.layout.about_tab_version, container, false);
+            // Inflate the layout according to the theme.  Setting false at the end of inflater.inflate does not attach the inflated layout as a child of container.  The fragment will take care of attaching the root automatically.
+            if (MainWebViewActivity.darkTheme) {
+                tabLayout = inflater.inflate(R.layout.about_tab_version_dark, container, false);
+            } else {
+                tabLayout = inflater.inflate(R.layout.about_tab_version_light, container, false);
+            }
 
             // Get handles for the `TextViews`.
             TextView versionNumberTextView = (TextView) tabLayout.findViewById(R.id.about_version_number);
@@ -158,8 +164,17 @@ public class AboutTabFragment extends Fragment {
             SpannableStringBuilder webKitStringBuilder = new SpannableStringBuilder(webKitLabel + webKit);
             SpannableStringBuilder chromeStringBuilder = new SpannableStringBuilder(chromeLabel + chrome);
 
-            // Create a blue `ForegroundColorSpan`.  We have to use the deprecated `getColor()` until API >= 23.
-            @SuppressWarnings("deprecation") ForegroundColorSpan blueColorSpan = new ForegroundColorSpan(getResources().getColor(R.color.blue_700));
+            // Create the `blueColorSpan` variable.
+            ForegroundColorSpan blueColorSpan;
+
+            // Set `blueColorSpan` according to the theme.  We have to use the deprecated `getColor()` until API >= 23.
+            if (MainWebViewActivity.darkTheme) {
+                //noinspection deprecation
+                blueColorSpan = new ForegroundColorSpan(getResources().getColor(R.color.blue_400));
+            } else {
+                //noinspection deprecation
+                blueColorSpan = new ForegroundColorSpan(getResources().getColor(R.color.blue_700));
+            }
 
             // Setup the spans to display the device information in blue.  `SPAN_INCLUSIVE_INCLUSIVE` allows the span to grow in either direction.
             brandStringBuilder.setSpan(blueColorSpan, brandLabel.length(), brandStringBuilder.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);
@@ -273,11 +288,35 @@ public class AboutTabFragment extends Fragment {
                 // Do nothing if `PackageManager` says Privacy Browser isn't installed.
             }
         } else { // load a WebView for all the other tabs.  Tab numbers start at 0.
-            // Setting false at the end of inflater.inflate does not attach the inflated layout as a child of container.
-            // The fragment will take care of attaching the root automatically.
+            // Setting false at the end of inflater.inflate does not attach the inflated layout as a child of container.  The fragment will take care of attaching the root automatically.
             tabLayout = inflater.inflate(R.layout.bare_webview, container, false);
+
+            // Get a handle for `tabWebView`.
             WebView tabWebView = (WebView) tabLayout;
 
+            // Filter the colors if `darkTheme` is `true`.
+            if (MainWebViewActivity.darkTheme) {
+                // Initialize `darkPaint`.
+                Paint darkPaint = new Paint();
+
+                // Setup a float array that inverts and tempers the colors (no hard whites or blacks).
+                float[] darkFilterFloatArray = {
+                        -.8f, 0, 0, 0, 255,  // Red.
+                        0, -.8f, 0, 0, 255,  // Green.
+                        0, 0, -.8f, 0, 255,  // Blue.
+                        0, 0, 0, .8f, 0      // Alpha.
+                };
+
+                // Set `darkPaint` to use `darkFilterFloatArray`.
+                darkPaint.setColorFilter(new ColorMatrixColorFilter(darkFilterFloatArray));
+
+                // Apply `darkPaint` to `tabWebView`.
+                tabWebView.setLayerType(View.LAYER_TYPE_HARDWARE, darkPaint);
+            } else {
+                // Reset `tabWebView` to use the normal colors.
+                tabWebView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
+            }
+
             switch (tabNumber) {
                 case 1:
                     tabWebView.loadUrl("file:///android_asset/" + getString(R.string.android_asset_path) + "/about_permissions.html");
diff --git a/app/src/main/res/layout/about_coordinatorlayout.xml b/app/src/main/res/layout/about_coordinatorlayout.xml
deleted file mode 100644
index b8ddd1d8..00000000
--- a/app/src/main/res/layout/about_coordinatorlayout.xml
+++ /dev/null
@@ -1,74 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!--
-  Copyright © 2016-2017 Soren Stoutner <soren@stoutner.com>.
-
-  This file is part of Privacy Browser <https://www.stoutner.com/privacy-browser>.
-
-  Privacy Browser is free software: you can redistribute it and/or modify
-  it under the terms of the GNU General Public License as published by
-  the Free Software Foundation, either version 3 of the License, or
-  (at your option) any later version.
-
-  Privacy Browser is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  GNU General Public License for more details.
-
-  You should have received a copy of the GNU General Public License
-  along with Privacy Browser.  If not, see <http://www.gnu.org/licenses/>. -->
-
-<!-- android:fitsSystemWindows="true" moves the AppBar below the status bar.
-  When it is specified the theme should include <item name="android:windowTranslucentStatus">true</item>
-  to make the status bar a transparent, darkened overlay. -->
-<android.support.design.widget.CoordinatorLayout
-    android:id="@+id/about_coordinatorlayout"
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_height="match_parent"
-    android:layout_width="match_parent"
-    android:fitsSystemWindows="true" >
-
-    <!-- the LinearLayout with orientation="vertical" moves the ViewPager below the AppBarLayout. -->
-    <LinearLayout
-        android:layout_height="match_parent"
-        android:layout_width="match_parent"
-        android:orientation="vertical" >
-
-        <!-- We need to set android:background="@color/blue_700" here or any space to the right of the TabLayout on large devices will be white. -->
-        <android.support.design.widget.AppBarLayout
-            android:id="@+id/about_appbarlayout"
-            android:layout_height="wrap_content"
-            android:layout_width="match_parent"
-            android:background="@color/blue_700"
-            android:theme="@style/PrivacyBrowserAppBarOverlayLight" >
-
-            <!-- android:theme="@style/PrivacyBrowser.DarkAppBar" makes the text and icons in the AppBar white. -->
-            <android.support.v7.widget.Toolbar
-                android:id="@+id/about_toolbar"
-                android:layout_height="wrap_content"
-                android:layout_width="match_parent"
-                android:background="@color/blue_700"
-                android:theme="@style/DarkAppBar"
-                app:popupTheme="@style/PrivacyBrowserPopupOverlayLight" />
-
-            <android.support.design.widget.TabLayout
-                android:id="@+id/about_tablayout"
-                xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
-                android:layout_height="wrap_content"
-                android:layout_width="match_parent"
-                android.support.design:tabBackground="@color/blue_700"
-                android.support.design:tabTextColor="@color/blue_100"
-                android.support.design:tabSelectedTextColor="@color/white"
-                android.support.design:tabIndicatorColor="@color/white"
-                android.support.design:tabMode="scrollable" />
-        </android.support.design.widget.AppBarLayout>
-
-        <!-- android:layout_weight="1" makes about_viewpager fill the rest of the screen. -->
-        <android.support.v4.view.ViewPager
-            android:id="@+id/about_viewpager"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            android:layout_weight="1" />
-    </LinearLayout>
-</android.support.design.widget.CoordinatorLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/about_coordinatorlayout_dark.xml b/app/src/main/res/layout/about_coordinatorlayout_dark.xml
new file mode 100644
index 00000000..e07db78f
--- /dev/null
+++ b/app/src/main/res/layout/about_coordinatorlayout_dark.xml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  Copyright © 2016-2017 Soren Stoutner <soren@stoutner.com>.
+
+  This file is part of Privacy Browser <https://www.stoutner.com/privacy-browser>.
+
+  Privacy Browser is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  Privacy Browser is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with Privacy Browser.  If not, see <http://www.gnu.org/licenses/>. -->
+
+<!-- android:fitsSystemWindows="true" moves the AppBar below the status bar.
+  When it is specified the theme should include <item name="android:windowTranslucentStatus">true</item>
+  to make the status bar a transparent, darkened overlay. -->
+<android.support.design.widget.CoordinatorLayout
+    android:id="@+id/about_coordinatorlayout"
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_height="match_parent"
+    android:layout_width="match_parent"
+    android:fitsSystemWindows="true" >
+
+    <!-- the LinearLayout with orientation="vertical" moves the ViewPager below the AppBarLayout. -->
+    <LinearLayout
+        android:layout_height="match_parent"
+        android:layout_width="match_parent"
+        android:orientation="vertical" >
+
+        <!-- We need to set android:background="@color/blue_700" here or any space to the right of the TabLayout on large devices will be white. -->
+        <android.support.design.widget.AppBarLayout
+            android:id="@+id/about_appbarlayout"
+            android:layout_height="wrap_content"
+            android:layout_width="match_parent" >
+
+            <!-- android:theme="@style/PrivacyBrowser.AppBarDark" makes the text and icons in the AppBar white. -->
+            <android.support.v7.widget.Toolbar
+                android:id="@+id/about_toolbar"
+                android:layout_height="wrap_content"
+                android:layout_width="match_parent"
+                android:background="?attr/colorPrimaryDark"
+                android:theme="@style/PrivacyBrowserAppBarDark" />
+
+            <android.support.design.widget.TabLayout
+                android:id="@+id/about_tablayout"
+                xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
+                android:layout_height="wrap_content"
+                android:layout_width="match_parent"
+                android.support.design:tabBackground="?attr/colorPrimaryDark"
+                android.support.design:tabTextColor="@color/blue_700"
+                android.support.design:tabSelectedTextColor="?android:attr/textColorPrimary"
+                android.support.design:tabIndicatorColor="?android:attr/textColorPrimary"
+                android.support.design:tabMode="scrollable" />
+        </android.support.design.widget.AppBarLayout>
+
+        <!-- android:layout_weight="1" makes about_viewpager fill the rest of the screen. -->
+        <android.support.v4.view.ViewPager
+            android:id="@+id/about_viewpager"
+            android:layout_width="match_parent"
+            android:layout_height="0dp"
+            android:layout_weight="1" />
+    </LinearLayout>
+</android.support.design.widget.CoordinatorLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/about_coordinatorlayout_light.xml b/app/src/main/res/layout/about_coordinatorlayout_light.xml
new file mode 100644
index 00000000..ce665c15
--- /dev/null
+++ b/app/src/main/res/layout/about_coordinatorlayout_light.xml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  Copyright © 2016-2017 Soren Stoutner <soren@stoutner.com>.
+
+  This file is part of Privacy Browser <https://www.stoutner.com/privacy-browser>.
+
+  Privacy Browser is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  Privacy Browser is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with Privacy Browser.  If not, see <http://www.gnu.org/licenses/>. -->
+
+<!-- android:fitsSystemWindows="true" moves the AppBar below the status bar.
+  When it is specified the theme should include <item name="android:windowTranslucentStatus">true</item>
+  to make the status bar a transparent, darkened overlay. -->
+<android.support.design.widget.CoordinatorLayout
+    android:id="@+id/about_coordinatorlayout"
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_height="match_parent"
+    android:layout_width="match_parent"
+    android:fitsSystemWindows="true" >
+
+    <!-- the LinearLayout with orientation="vertical" moves the ViewPager below the AppBarLayout. -->
+    <LinearLayout
+        android:layout_height="match_parent"
+        android:layout_width="match_parent"
+        android:orientation="vertical" >
+
+        <!-- We need to set android:background="@color/blue_700" here or any space to the right of the TabLayout on large devices will be white. -->
+        <android.support.design.widget.AppBarLayout
+            android:id="@+id/about_appbarlayout"
+            android:layout_height="wrap_content"
+            android:layout_width="match_parent" >
+
+            <!-- android:theme="@style/PrivacyBrowser.AppBarDark" makes the text and icons in the AppBar white. -->
+            <android.support.v7.widget.Toolbar
+                android:id="@+id/about_toolbar"
+                android:layout_height="wrap_content"
+                android:layout_width="match_parent"
+                android:background="?attr/colorPrimaryDark"
+                android:theme="@style/PrivacyBrowserAppBarWhiteText" />
+
+            <android.support.design.widget.TabLayout
+                android:id="@+id/about_tablayout"
+                xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
+                android:layout_height="wrap_content"
+                android:layout_width="match_parent"
+                android.support.design:tabBackground="?attr/colorPrimaryDark"
+                android.support.design:tabTextColor="@color/blue_100"
+                android.support.design:tabSelectedTextColor="@color/white"
+                android.support.design:tabIndicatorColor="@color/white"
+                android.support.design:tabMode="scrollable" />
+        </android.support.design.widget.AppBarLayout>
+
+        <!-- android:layout_weight="1" makes about_viewpager fill the rest of the screen. -->
+        <android.support.v4.view.ViewPager
+            android:id="@+id/about_viewpager"
+            android:layout_width="match_parent"
+            android:layout_height="0dp"
+            android:layout_weight="1" />
+    </LinearLayout>
+</android.support.design.widget.CoordinatorLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/about_tab_version.xml b/app/src/main/res/layout/about_tab_version.xml
deleted file mode 100644
index b64e7640..00000000
--- a/app/src/main/res/layout/about_tab_version.xml
+++ /dev/null
@@ -1,203 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!--
-  Copyright © 2016-2017 Soren Stoutner <soren@stoutner.com>.
-
-  This file is part of Privacy Browser <https://www.stoutner.com/privacy-browser>.
-
-  Privacy Browser is free software: you can redistribute it and/or modify
-  it under the terms of the GNU General Public License as published by
-  the Free Software Foundation, either version 3 of the License, or
-  (at your option) any later version.
-
-  Privacy Browser is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  GNU General Public License for more details.
-
-  You should have received a copy of the GNU General Public License
-  along with Privacy Browser.  If not, see <http://www.gnu.org/licenses/>. -->
-
-<!-- The `ScrollView` allows the `LinearLayout` to scroll if it exceeds the height of the page. -->
-<ScrollView
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_height="wrap_content"
-    android:layout_width="match_parent" >
-
-    <LinearLayout
-        android:layout_height="wrap_content"
-        android:layout_width="match_parent"
-        android:orientation="vertical"
-        android:padding="16dp" >
-
-        <!-- The `RelativeLayout` contains the header. -->
-        <RelativeLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content" >
-
-            <!--`tools:ignore="ContentDescription"` suppresses the lint warning about supplying a content description for the `ImageView`,
-              which isn't needed in this case because the `ImageView` is only decorative. -->
-            <ImageView
-                android:id="@+id/about_version_icon"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content"
-                android:src="@mipmap/privacy_browser"
-                android:paddingTop="10dp"
-                tools:ignore="ContentDescription" />
-
-            <TextView
-                android:id="@+id/about_version_privacy_browser_textview"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content"
-                android:text="@string/privacy_browser"
-                android:textStyle="bold"
-                android:textSize="22sp"
-                android:textColor="@color/blue_900"
-                android:layout_toEndOf="@id/about_version_icon" />
-
-            <TextView
-                android:id="@+id/about_version_number"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content"
-                android:textColor="@color/blue_700"
-                android:layout_below="@id/about_version_privacy_browser_textview"
-                android:layout_toEndOf="@id/about_version_icon" />
-        </RelativeLayout>
-
-        <!-- The purpose of this `LinearLayout` is to provide padding on the start of the `TextViews` to make them line up with `about_version_icon`.
-          Although we don't need it, we have to include `android:paddingEnd` to make lint happy. -->
-        <LinearLayout
-            android:layout_height="wrap_content"
-            android:layout_width="match_parent"
-            android:orientation="vertical"
-            android:paddingTop="16dp"
-            android:paddingStart="4dp"
-            android:paddingEnd="0dp" >
-
-            <!-- Hardware. -->
-            <TextView
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content"
-                android:text="@string/hardware"
-                android:textStyle="bold"
-                android:textSize="18sp"
-                android:textColor="@color/blue_900" />
-
-            <TextView
-                android:id="@+id/about_version_brand"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_manufacturer"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_model"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_device"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_bootloader"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_radio"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <!-- Software. -->
-            <TextView
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content"
-                android:text="@string/software"
-                android:textStyle="bold"
-                android:textSize="18sp"
-                android:textColor="@color/blue_900"
-                android:paddingTop="12dp" />
-
-            <TextView
-                android:id="@+id/about_version_android"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_build"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_securitypatch"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_webkit"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_chrome"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_orbot"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <!-- Package Signature. -->
-            <TextView
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content"
-                android:text="@string/package_signature"
-                android:textStyle="bold"
-                android:textSize="18sp"
-                android:textColor="@color/blue_900"
-                android:paddingTop="12dp" />
-
-            <TextView
-                android:id="@+id/about_version_certificate_issuer_dn"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_certificate_subject_dn"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_certificate_start_date"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_certificate_end_date"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_certificate_version"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_certificate_serial_number"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-
-            <TextView
-                android:id="@+id/about_version_certificate_signature_algorithm"
-                android:layout_height="wrap_content"
-                android:layout_width="wrap_content" />
-        </LinearLayout>
-    </LinearLayout>
-</ScrollView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/about_tab_version_dark.xml b/app/src/main/res/layout/about_tab_version_dark.xml
new file mode 100644
index 00000000..f5e206aa
--- /dev/null
+++ b/app/src/main/res/layout/about_tab_version_dark.xml
@@ -0,0 +1,203 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  Copyright © 2016-2017 Soren Stoutner <soren@stoutner.com>.
+
+  This file is part of Privacy Browser <https://www.stoutner.com/privacy-browser>.
+
+  Privacy Browser is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  Privacy Browser is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with Privacy Browser.  If not, see <http://www.gnu.org/licenses/>. -->
+
+<!-- The `ScrollView` allows the `LinearLayout` to scroll if it exceeds the height of the page. -->
+<ScrollView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_height="wrap_content"
+    android:layout_width="match_parent" >
+
+    <LinearLayout
+        android:layout_height="wrap_content"
+        android:layout_width="match_parent"
+        android:orientation="vertical"
+        android:padding="16dp" >
+
+        <!-- The `RelativeLayout` contains the header. -->
+        <RelativeLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content" >
+
+            <!--`tools:ignore="ContentDescription"` suppresses the lint warning about supplying a content description for the `ImageView`,
+              which isn't needed in this case because the `ImageView` is only decorative. -->
+            <ImageView
+                android:id="@+id/about_version_icon"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:src="@mipmap/privacy_browser"
+                android:paddingTop="10dp"
+                tools:ignore="ContentDescription" />
+
+            <TextView
+                android:id="@+id/about_version_privacy_browser_textview"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:text="@string/privacy_browser"
+                android:textStyle="bold"
+                android:textSize="22sp"
+                android:textColor="@color/blue_700"
+                android:layout_toEndOf="@id/about_version_icon" />
+
+            <TextView
+                android:id="@+id/about_version_number"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:textColor="@color/blue_400"
+                android:layout_below="@id/about_version_privacy_browser_textview"
+                android:layout_toEndOf="@id/about_version_icon" />
+        </RelativeLayout>
+
+        <!-- The purpose of this `LinearLayout` is to provide padding on the start of the `TextViews` to make them line up with `about_version_icon`.
+          Although we don't need it, we have to include `android:paddingEnd` to make lint happy. -->
+        <LinearLayout
+            android:layout_height="wrap_content"
+            android:layout_width="match_parent"
+            android:orientation="vertical"
+            android:paddingTop="16dp"
+            android:paddingStart="4dp"
+            android:paddingEnd="0dp" >
+
+            <!-- Hardware. -->
+            <TextView
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:text="@string/hardware"
+                android:textStyle="bold"
+                android:textSize="18sp"
+                android:textColor="@color/blue_700" />
+
+            <TextView
+                android:id="@+id/about_version_brand"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_manufacturer"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_model"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_device"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_bootloader"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_radio"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <!-- Software. -->
+            <TextView
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:text="@string/software"
+                android:textStyle="bold"
+                android:textSize="18sp"
+                android:textColor="@color/blue_700"
+                android:paddingTop="12dp" />
+
+            <TextView
+                android:id="@+id/about_version_android"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_build"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_securitypatch"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_webkit"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_chrome"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_orbot"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <!-- Package Signature. -->
+            <TextView
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:text="@string/package_signature"
+                android:textStyle="bold"
+                android:textSize="18sp"
+                android:textColor="@color/blue_700"
+                android:paddingTop="12dp" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_issuer_dn"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_subject_dn"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_start_date"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_end_date"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_version"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_serial_number"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_signature_algorithm"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+        </LinearLayout>
+    </LinearLayout>
+</ScrollView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/about_tab_version_light.xml b/app/src/main/res/layout/about_tab_version_light.xml
new file mode 100644
index 00000000..b64e7640
--- /dev/null
+++ b/app/src/main/res/layout/about_tab_version_light.xml
@@ -0,0 +1,203 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  Copyright © 2016-2017 Soren Stoutner <soren@stoutner.com>.
+
+  This file is part of Privacy Browser <https://www.stoutner.com/privacy-browser>.
+
+  Privacy Browser is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  Privacy Browser is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with Privacy Browser.  If not, see <http://www.gnu.org/licenses/>. -->
+
+<!-- The `ScrollView` allows the `LinearLayout` to scroll if it exceeds the height of the page. -->
+<ScrollView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_height="wrap_content"
+    android:layout_width="match_parent" >
+
+    <LinearLayout
+        android:layout_height="wrap_content"
+        android:layout_width="match_parent"
+        android:orientation="vertical"
+        android:padding="16dp" >
+
+        <!-- The `RelativeLayout` contains the header. -->
+        <RelativeLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content" >
+
+            <!--`tools:ignore="ContentDescription"` suppresses the lint warning about supplying a content description for the `ImageView`,
+              which isn't needed in this case because the `ImageView` is only decorative. -->
+            <ImageView
+                android:id="@+id/about_version_icon"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:src="@mipmap/privacy_browser"
+                android:paddingTop="10dp"
+                tools:ignore="ContentDescription" />
+
+            <TextView
+                android:id="@+id/about_version_privacy_browser_textview"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:text="@string/privacy_browser"
+                android:textStyle="bold"
+                android:textSize="22sp"
+                android:textColor="@color/blue_900"
+                android:layout_toEndOf="@id/about_version_icon" />
+
+            <TextView
+                android:id="@+id/about_version_number"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:textColor="@color/blue_700"
+                android:layout_below="@id/about_version_privacy_browser_textview"
+                android:layout_toEndOf="@id/about_version_icon" />
+        </RelativeLayout>
+
+        <!-- The purpose of this `LinearLayout` is to provide padding on the start of the `TextViews` to make them line up with `about_version_icon`.
+          Although we don't need it, we have to include `android:paddingEnd` to make lint happy. -->
+        <LinearLayout
+            android:layout_height="wrap_content"
+            android:layout_width="match_parent"
+            android:orientation="vertical"
+            android:paddingTop="16dp"
+            android:paddingStart="4dp"
+            android:paddingEnd="0dp" >
+
+            <!-- Hardware. -->
+            <TextView
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:text="@string/hardware"
+                android:textStyle="bold"
+                android:textSize="18sp"
+                android:textColor="@color/blue_900" />
+
+            <TextView
+                android:id="@+id/about_version_brand"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_manufacturer"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_model"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_device"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_bootloader"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_radio"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <!-- Software. -->
+            <TextView
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:text="@string/software"
+                android:textStyle="bold"
+                android:textSize="18sp"
+                android:textColor="@color/blue_900"
+                android:paddingTop="12dp" />
+
+            <TextView
+                android:id="@+id/about_version_android"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_build"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_securitypatch"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_webkit"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_chrome"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_orbot"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <!-- Package Signature. -->
+            <TextView
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content"
+                android:text="@string/package_signature"
+                android:textStyle="bold"
+                android:textSize="18sp"
+                android:textColor="@color/blue_900"
+                android:paddingTop="12dp" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_issuer_dn"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_subject_dn"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_start_date"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_end_date"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_version"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_serial_number"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+
+            <TextView
+                android:id="@+id/about_version_certificate_signature_algorithm"
+                android:layout_height="wrap_content"
+                android:layout_width="wrap_content" />
+        </LinearLayout>
+    </LinearLayout>
+</ScrollView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/bookmarks_coordinatorlayout.xml b/app/src/main/res/layout/bookmarks_coordinatorlayout.xml
index ee1e2ebc..1185cd84 100644
--- a/app/src/main/res/layout/bookmarks_coordinatorlayout.xml
+++ b/app/src/main/res/layout/bookmarks_coordinatorlayout.xml
@@ -38,7 +38,7 @@
             android:id="@+id/bookmarks_appbarlayout"
             android:layout_height="wrap_content"
             android:layout_width="match_parent"
-            android:theme="@style/PrivacyBrowserAppBarOverlayLight" >
+            android:theme="@style/PrivacyBrowserAppBarLight" >
 
             <!-- android:theme="@style/PrivacyBrowser.DarkAppBar" makes the text and icons in the AppBar white. -->
             <android.support.v7.widget.Toolbar
@@ -46,8 +46,8 @@
                 android:layout_height="wrap_content"
                 android:layout_width="match_parent"
                 android:background="@color/blue_700"
-                android:theme="@style/DarkAppBar"
-                app:popupTheme="@style/PrivacyBrowserPopupOverlayLight" />
+                android:theme="@style/PrivacyBrowserAppBarWhiteText"
+                app:popupTheme="@style/PrivacyBrowserPopupsLight" />
         </android.support.design.widget.AppBarLayout>
 
         <!-- `android:choiceMode="multipleChoiceModal"` allows the contextual action menu to select more than one item at a time.
diff --git a/app/src/main/res/layout/bookmarks_database_view_coordinatorlayout.xml b/app/src/main/res/layout/bookmarks_database_view_coordinatorlayout.xml
index ff19d9cb..b480d096 100644
--- a/app/src/main/res/layout/bookmarks_database_view_coordinatorlayout.xml
+++ b/app/src/main/res/layout/bookmarks_database_view_coordinatorlayout.xml
@@ -39,15 +39,15 @@
             android:id="@+id/bookmarks_database_view_appbarlayout"
             android:layout_height="wrap_content"
             android:layout_width="match_parent"
-            android:theme="@style/PrivacyBrowserAppBarOverlayLight" >
+            android:theme="@style/PrivacyBrowserAppBarLight" >
 
             <android.support.v7.widget.Toolbar
                 android:id="@+id/bookmarks_database_view_toolbar"
                 android:layout_height="wrap_content"
                 android:layout_width="match_parent"
                 android:background="@color/blue_700"
-                android:theme="@style/DarkAppBar"
-                app:popupTheme="@style/PrivacyBrowserPopupOverlayLight" />
+                android:theme="@style/PrivacyBrowserAppBarWhiteText"
+                app:popupTheme="@style/PrivacyBrowserPopupsLight" />
         </android.support.design.widget.AppBarLayout>
 
         <ListView
diff --git a/app/src/main/res/layout/domain_settings_coordinatorlayout.xml b/app/src/main/res/layout/domain_settings_coordinatorlayout.xml
index ab14206d..00c31dce 100644
--- a/app/src/main/res/layout/domain_settings_coordinatorlayout.xml
+++ b/app/src/main/res/layout/domain_settings_coordinatorlayout.xml
@@ -36,7 +36,7 @@
         <android.support.design.widget.AppBarLayout
             android:layout_height="wrap_content"
             android:layout_width="match_parent"
-            android:theme="@style/PrivacyBrowserAppBarOverlayLight" >
+            android:theme="@style/PrivacyBrowserAppBarLight" >
 
             <!-- `android:theme="@style/PrivacyBrowser.DarkAppBar"1 makes the text and icons in the `AppBar` white. -->
             <android.support.v7.widget.Toolbar
@@ -44,8 +44,8 @@
                 android:layout_height="wrap_content"
                 android:layout_width="match_parent"
                 android:background="@color/blue_700"
-                android:theme="@style/DarkAppBar"
-                app:popupTheme="@style/PrivacyBrowserPopupOverlayLight" />
+                android:theme="@style/PrivacyBrowserAppBarWhiteText"
+                app:popupTheme="@style/PrivacyBrowserPopupsLight" />
         </android.support.design.widget.AppBarLayout>
 
         <ScrollView
diff --git a/app/src/main/res/layout/domains_coordinatorlayout.xml b/app/src/main/res/layout/domains_coordinatorlayout.xml
index 4a6e2a4a..c39a0ece 100644
--- a/app/src/main/res/layout/domains_coordinatorlayout.xml
+++ b/app/src/main/res/layout/domains_coordinatorlayout.xml
@@ -35,7 +35,7 @@
         <android.support.design.widget.AppBarLayout
             android:layout_height="wrap_content"
             android:layout_width="match_parent"
-            android:theme="@style/PrivacyBrowserAppBarOverlayLight" >
+            android:theme="@style/PrivacyBrowserAppBarLight" >
 
             <!-- `android:theme="@style/PrivacyBrowser.DarkAppBar"` makes the text and icons in the `AppBar` white. -->
             <android.support.v7.widget.Toolbar
@@ -43,8 +43,8 @@
                 android:layout_height="wrap_content"
                 android:layout_width="match_parent"
                 android:background="@color/blue_700"
-                android:theme="@style/DarkAppBar"
-                app:popupTheme="@style/PrivacyBrowserPopupOverlayLight" />
+                android:theme="@style/PrivacyBrowserAppBarWhiteText"
+                app:popupTheme="@style/PrivacyBrowserPopupsLight" />
         </android.support.design.widget.AppBarLayout>
 
         <include layout="@layout/domains_list" />
diff --git a/app/src/main/res/layout/guide_coordinatorlayout.xml b/app/src/main/res/layout/guide_coordinatorlayout.xml
index 54f39617..233da963 100644
--- a/app/src/main/res/layout/guide_coordinatorlayout.xml
+++ b/app/src/main/res/layout/guide_coordinatorlayout.xml
@@ -41,7 +41,7 @@
             android:layout_height="wrap_content"
             android:layout_width="match_parent"
             android:background="@color/blue_700"
-            android:theme="@style/PrivacyBrowserAppBarOverlayLight" >
+            android:theme="@style/PrivacyBrowserAppBarLight" >
 
             <!-- android:theme="@style/PrivacyBrowser.DarkAppBar" makes the text and icons in the AppBar white. -->
             <android.support.v7.widget.Toolbar
@@ -49,8 +49,8 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:background="@color/blue_700"
-                android:theme="@style/DarkAppBar"
-                app:popupTheme="@style/PrivacyBrowserPopupOverlayLight" />
+                android:theme="@style/PrivacyBrowserAppBarWhiteText"
+                app:popupTheme="@style/PrivacyBrowserPopupsLight" />
 
             <android.support.design.widget.TabLayout
                 android:id="@+id/guide_tablayout"
diff --git a/app/src/main/res/layout/main_drawerlayout_light.xml b/app/src/main/res/layout/main_drawerlayout_light.xml
index 00048dc3..5d483496 100644
--- a/app/src/main/res/layout/main_drawerlayout_light.xml
+++ b/app/src/main/res/layout/main_drawerlayout_light.xml
@@ -49,7 +49,7 @@
                 android:id="@+id/app_bar_layout"
                 android:layout_height="wrap_content"
                 android:layout_width="match_parent"
-                android:theme="@style/PrivacyBrowserAppBarOverlayLight" >
+                android:theme="@style/PrivacyBrowserAppBarLight" >
 
                 <!-- The `FrameLayout` allows `appBar` and `find_on_page_app_bar` to occupy the same space. -->
                 <FrameLayout
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 72113ba1..ec44da43 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -48,6 +48,7 @@
 
     <color name="gray_100">#FFF5F5F5</color>
     <color name="gray_300">#FFE0E0E0</color>
+    <color name="gray_400">#FFBDBDBD</color>
     <color name="gray_500">#FF9E9E9E</color>
     <color name="gray_900">#FF212121</color>
 
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 5395eee0..5e76c6e4 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -36,9 +36,7 @@
         <item name="android:textColorHighlight">@color/blue_200</item>
         <item name="windowActionModeOverlay">true</item>
         <item name="android:actionModeBackground">@color/blue_700</item>
-        <item name="actionBarPopupTheme">@style/PrivacyBrowserPopupOverlayLight</item>
-        <item name="android:spinnerItemStyle">@style/spinnerItemStyle</item>
-        <item name="android:spinnerDropDownItemStyle">@style/spinnerDropDownItemStyle</item>
+        <item name="actionBarPopupTheme">@style/PrivacyBrowserPopupsLight</item>
     </style>
 
     <!-- `colorPrimaryDark` is the color of the status bar. -->
@@ -48,37 +46,19 @@
         <item name="colorAccent">@color/blue_700</item>
     </style>
 
-    <!-- `ThemeOverlay.AppCompat.Dark.ActionBar` makes the text and the icons in the AppBar white. -->
-    <style name="DarkAppBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
-
     <!-- `ThemeOverlay.AppCompat.ActionBar` makes the hamburger icons dark. -->
-    <style name="PrivacyBrowserAppBarOverlayLight" parent="ThemeOverlay.AppCompat.ActionBar" />
+    <style name="PrivacyBrowserAppBarLight" parent="ThemeOverlay.AppCompat.ActionBar" />
+
+    <!-- `ThemeOverlay.AppCompat.Dark.ActionBar` makes the text and the icons in the AppBar white. -->
+    <style name="PrivacyBrowserAppBarWhiteText" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
 
     <!-- `ThemeOverlay.AppCompat.Light` makes the popups have a light background with dark text. -->
-    <style name="PrivacyBrowserPopupOverlayLight" parent="ThemeOverlay.AppCompat.Light" />
+    <style name="PrivacyBrowserPopupsLight" parent="ThemeOverlay.AppCompat.Light" />
 
     <style name="LightAlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert" >
         <item name="colorAccent">@color/blue_700</item>
     </style>
 
-    <!-- This `Spinner` style is needed to fix a layout bug in Huawei devices running Android 7.0. -->
-    <style name="spinnerItemStyle" >
-        <item name="android:paddingStart">8dp</item>
-        <item name="android:textColor">@color/black</item>
-        <item name="android:textSize">18sp</item>
-    </style>
-
-    <!-- This `Spinner` style is needed to fix a layout bug in Huawei devices running Android 7.0. -->
-    <style name="spinnerDropDownItemStyle" >
-        <item name="android:paddingStart">16dp</item>
-        <item name="android:paddingEnd">16dp</item>
-        <item name="android:paddingTop">8dp</item>
-        <item name="android:paddingBottom">8dp</item>
-        <item name="android:textColor">@color/black</item>
-        <item name="android:textSize">18sp</item>
-    </style>
-
-
     <!-- Dark theme styles. -->
 
     <!-- `android:windowTranslucentStatus` makes the system status bar translucent.
@@ -90,10 +70,14 @@
         <item name="android:textColorHighlight">@color/blue_800</item>
     </style>
 
-    <!-- `ThemeOverlay.AppCompat.Dark.ActionBar` makes the hamburger icons light. -->
-    <!-- <style name="PrivacyBrowserAppBarOverlayDark" parent="ThemeOverlay.AppCompat.Dark.ActionBar" >
-        <item name="android:background">@color/gray_900</item>
-    </style> -->
+    <style name="PrivacyBrowserDark.SecondaryActivity" >
+        <item name="colorPrimaryDark">@color/blue_900</item>
+    </style>
+
+    <!-- `ThemeOverlay.AppCompat.Dark.ActionBar` makes the text and the icons in the AppBar white. -->
+    <style name="PrivacyBrowserAppBarDark" parent="ThemeOverlay.AppCompat.Dark.ActionBar" >
+        <item name="android:textColorPrimary">@color/gray_300</item>
+    </style>
 
     <!-- `ThemeOverlay.AppCompat.Dark` makes the popups have a dark background with light text. -->
     <!-- <style name="PrivacyBrowserPopupOverlayDark" parent="ThemeOverlay.AppCompat.Dark" /> -->