Add "Midnight Dusk" and "Hot Pink" themes (#5161)

* Organize and clarify themes file

Increases clarification with better commenting, should make it easier to add or modify current themes.

* Make AMOLED its own theme category

* Tweak ripples for AMOLED

* Add "Midnight Dusk" theme

Ports it from jobobby04/TachiyomiSY.

Co-Authored-By: CrepeTF <70870719+CrepeTF@users.noreply.github.com>

* Add "Hot Pink" theme

Ports it from jobobby04/TachiyomiSY.

Co-Authored-By: OncePunchedMan <64155117+OncePunchedMan@users.noreply.github.com>

* Make AMOLED a base theme

* Final tweaks

Rename "Toolbar.Light" to "Custom.PopupTheme"
Changes placing of backgroundDusk

Removes HotPink and MidnightDusk custom Toolbars, I believe they are unnecessary.

* Rename a Midnight Dusk color

* Make AMOLED independent from Dark as a theme

Co-authored-by: CrepeTF <70870719+CrepeTF@users.noreply.github.com>
Co-authored-by: OncePunchedMan <64155117+OncePunchedMan@users.noreply.github.com>

app/src/main/java/eu/kanade/tachiyomi/data/preference/PreferenceValues.kt

@@ -24,7 +24,9 @@ object PreferenceValues {
     enum class DarkThemeVariant {
         default,
         blue,
+        midnightdusk,
         amoled,
+        hotpink,
     }
 
     /* ktlint-enable experimental:enum-entry-name-case */

app/src/main/java/eu/kanade/tachiyomi/ui/base/activity/BaseThemedActivity.kt

@@ -25,7 +25,9 @@ abstract class BaseThemedActivity : AppCompatActivity() {
             when (preferences.themeDark().get()) {
                 DarkThemeVariant.default -> R.style.Theme_Tachiyomi_Dark
                 DarkThemeVariant.blue -> R.style.Theme_Tachiyomi_Dark_Blue
-                DarkThemeVariant.amoled -> R.style.Theme_Tachiyomi_Dark_Amoled
+                DarkThemeVariant.midnightdusk -> R.style.Theme_Tachiyomi_Dark_MidnightDusk
+                DarkThemeVariant.amoled -> R.style.Theme_Tachiyomi_Amoled
+                DarkThemeVariant.hotpink -> R.style.Theme_Tachiyomi_Amoled_HotPink
             }
         } else {
             when (preferences.themeLight().get()) {

app/src/main/java/eu/kanade/tachiyomi/ui/setting/SettingsGeneralController.kt

@@ -141,12 +141,16 @@ class SettingsGeneralController : SettingsController() {
                 entriesRes = arrayOf(
                     R.string.theme_dark_default,
                     R.string.theme_dark_blue,
-                    R.string.theme_dark_amoled
+                    R.string.theme_dark_midnightdusk,
+                    R.string.theme_dark_amoled,
+                    R.string.theme_dark_amoled_hotpink
                 )
                 entryValues = arrayOf(
                     Values.DarkThemeVariant.default.name,
                     Values.DarkThemeVariant.blue.name,
-                    Values.DarkThemeVariant.amoled.name
+                    Values.DarkThemeVariant.midnightdusk.name,
+                    Values.DarkThemeVariant.amoled.name,
+                    Values.DarkThemeVariant.hotpink.name
                 )
                 defaultValue = Values.DarkThemeVariant.default.name
                 summary = "%s"

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

@@ -8,8 +8,11 @@
     <!-- Dark Application Colors -->
     <color name="colorDarkPrimary">#242529</color>
     <color name="colorDarkPrimaryDark">#202125</color>
+
+    <!-- AMOLED Application Colors -->
     <color name="colorAmoledPrimary">@color/md_black_1000</color>
 
+    <!-- Splash Color -->
     <color name="splashBackgroundColor">@color/colorPrimary</color>
 
     <!-- Light Theme -->
@@ -38,6 +41,38 @@
     <color name="dialogDark">@color/colorDarkPrimary</color>
     <color name="selectorColorDark">@color/md_blue_A200_50</color>
 
+    <!-- Midnight Dusk Theme -->
+    <color name="colorAccentDusk">#F02475</color>
+    <color name="textColorPrimaryDusk">@color/md_white_1000</color>
+    <color name="textColorSecondaryDusk">@color/md_white_1000_70</color>
+    <color name="textColorHintDusk">@color/md_white_1000_50</color>
+    <color name="dividerDusk">#12ffffff</color>
+    <color name="rippleSecondaryColorDusk">#0FF02475</color>
+    <color name="backgroundDusk">#16151D</color>
+    <color name="dialogDusk">#201F27</color>
+    <color name="selectorColorDusk">#80F02475</color>
+
+    <!-- AMOLED Theme -->
+    <color name="colorAccentAmoled">#3399FF</color>
+    <color name="textColorPrimaryAmoled">@color/md_white_1000</color>
+    <color name="textColorSecondaryAmoled">@color/md_white_1000_70</color>
+    <color name="textColorHintAmoled">@color/md_white_1000_50</color>
+    <color name="dividerAmoled">@android:color/transparent</color>
+    <color name="rippleColorAmoled">@color/md_white_1000_8</color>
+    <color name="rippleSecondaryColorAmoled">#0A3399FF</color>
+    <color name="rippleToolbarColorAmoled">@color/rippleColorAmoled</color>
+    <color name="backgroundAmoled">@color/colorAmoledPrimary</color>
+    <color name="dialogAmoled">@color/colorAmoledPrimary</color>
+    <color name="selectorColorAmoled">@color/md_blue_A200_50</color>
+
+    <!-- Hot Pink Theme -->
+    <color name="colorAccentPink">#FF3399</color>
+    <color name="textColorPrimaryPink">@color/md_white_1000</color>
+    <color name="textColorSecondaryPink">@color/md_white_1000_70</color>
+    <color name="textColorHintPink">@color/md_white_1000_50</color>
+    <color name="rippleSecondaryColorPink">#0AFF3399</color>
+    <color name="selectorColorPink">#80FF69B4</color>
+
     <!-- Reader Theme -->
     <color name="readerColorDarkPrimary">@color/colorDarkPrimary</color>
     <color name="pageNumberBackgroundLight">@color/md_grey_50_75</color>
@@ -45,12 +80,14 @@
 
     <color name="filterColorLight">#FFC107</color>
     <color name="filterColorDark">#FFEB3B</color>
+    <color name="filterColorAmoled">#FFEB3B</color>
 
     <!-- Text Colors -->
     <color name="md_black_1000_87">#DE000000</color>
     <color name="md_black_1000_54">#8A000000</color>
     <color name="md_black_1000_38">#61000000</color>
     <color name="md_black_1000_12">#1F000000</color>
+    <color name="md_black_1000_8">#14000000</color>
     <color name="md_black_1000_6">#0F000000</color>
 
     <color name="md_white_1000">#FFFFFFFF</color>
@@ -59,6 +96,7 @@
     <color name="md_white_1000_50">#80FFFFFF</color>
     <color name="md_white_1000_20">#33FFFFFF</color>
     <color name="md_white_1000_12">#1FFFFFFF</color>
+    <color name="md_white_1000_8">#14FFFFFF</color>
     <color name="md_white_1000_6">#0FFFFFFF</color>
 
     <!-- Material Design Colors -->

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

@@ -159,7 +159,9 @@
     <string name="pref_theme_dark">Dark theme</string>
     <string name="theme_dark_default">Default</string>
     <string name="theme_dark_blue">Dark blue</string>
+    <string name="theme_dark_midnightdusk">Midnight dusk</string>
     <string name="theme_dark_amoled">AMOLED black</string>
+    <string name="theme_dark_amoled_hotpink">Hot pink</string>
     <string name="pref_start_screen">Start screen</string>
     <string name="pref_language">Language</string>
     <string name="system_default">Default</string>

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

@@ -6,11 +6,7 @@
     <!--========-->
     <style name="Theme.Toolbar" parent="@style/ThemeOverlay.MaterialComponents.ActionBar" />
 
-    <style name="Theme.Toolbar.Light" parent="Theme.Toolbar.Custom.Dark">
+    <style name="Theme.Toolbar.Custom.Light" parent="@style/ThemeOverlay.MaterialComponents.ActionBar">
-        <item name="popupTheme">@style/ThemeOverlay.MaterialComponents.Light</item>
-    </style>
-
-    <style name="Theme.Toolbar.Custom" parent="@style/ThemeOverlay.MaterialComponents.ActionBar">
         <item name="android:colorControlHighlight">?attr/rippleToolbarColor</item>
     </style>
 
@@ -18,6 +14,14 @@
         <item name="android:colorControlHighlight">?attr/rippleToolbarColor</item>
     </style>
 
+    <style name="Theme.Toolbar.Custom.Amoled" parent="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
+        <item name="android:colorControlHighlight">?attr/rippleToolbarColor</item>
+    </style>
+
+    <style name="Theme.Toolbar.Custom.PopupTheme" parent="Theme.Toolbar.Custom.Dark">
+        <item name="popupTheme">@style/ThemeOverlay.MaterialComponents.Light</item>
+    </style>
+
     <style name="Theme.Toolbar.Navigation" parent="Widget.AppCompat.Toolbar.Button.Navigation">
         <item name="tint">?attr/colorOnPrimary</item>
     </style>
@@ -68,6 +72,10 @@
         <item name="colorAccent">@color/colorAccentDark</item>
     </style>
 
+    <style name="Theme.AlertDialog.Amoled" parent="Theme.AlertDialog">
+        <item name="colorAccent">@color/colorAccentAmoled</item>
+    </style>
+
 
     <!--===========-->
     <!--BottomSheet-->

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

@@ -4,16 +4,16 @@
     <!--============-->
     <!-- Base Theme -->
     <!--============-->
-    <style name="Theme"/>
 
-    <!--==============-->
+    <!--== Theme ==-->
-    <!-- Light Themes -->
+    <style name="Theme" />
-    <!--=======-======-->
+
+    <!--== Theme base ==-->
     <style name="Theme.Base" parent="Theme.MaterialComponents.Light.NoActionBar">
         <!-- AppBar -->
         <item name="windowActionBar">false</item>
         <item name="windowNoTitle">true</item>
-
+        <!-- Disallow 'Force dark theme' -->
         <item name="android:forceDarkAllowed" tools:targetApi="Q">false</item>
 
         <!-- Theme colors -->
@@ -60,7 +60,7 @@
         <item name="actionModeStyle">@style/Theme.ActionMode</item>
         <item name="actionModeCloseButtonStyle">@style/Theme.ActionMode.CloseButton</item>
         <item name="actionModeCloseDrawable">@drawable/ic_close_24dp</item>
-        <item name="actionBarTheme">@style/Theme.Toolbar.Custom</item>
+        <item name="actionBarTheme">@style/Theme.Toolbar.Custom.Light</item>
         <item name="actionBarPopupTheme">@style/ThemeOverlay.MaterialComponents</item>
         <item name="toolbarNavigationButtonStyle">@style/Theme.Toolbar.Navigation</item>
         <item name="preferenceTheme">@style/PreferenceThemeCustom</item>
@@ -93,24 +93,41 @@
         <item name="colorFilterActive">@color/filterColorLight</item>
     </style>
 
-    <!--===========-->
+    <!--==============-->
-    <!-- Main Theme-->
+    <!-- Light Themes -->
-    <!--===========-->
+    <!--==============-->
+
+    <!--== Light base ==-->
     <style name="Base.Theme.Tachiyomi.Light" parent="Theme.Base">
+        <!-- Base background/text colors -->
         <item name="android:statusBarColor">?attr/colorPrimary</item>
         <item name="android:windowLightStatusBar">true</item>
+        <item name="background">@color/dialogLight</item>
     </style>
+
+    <!--== Light theme ==-->
     <style name="Theme.Tachiyomi.Light" parent="Base.Theme.Tachiyomi.Light" />
 
+    <!--== Light Blue theme ==-->
     <style name="Theme.Tachiyomi.Light.Blue">
+        <!-- Theme colors -->
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorOnPrimary">@color/textColorPrimaryDark</item>
         <item name="colorAccentOnPrimary">@color/textColorPrimaryDark</item>
         <item name="colorPrimaryVariant">@color/colorPrimaryDark</item>
         <item name="colorFilterActive">@color/filterColorDark</item>
+
+        <!-- Base background/text colors -->
+        <item name="background">@color/colorPrimary</item>
+
+        <!-- Ripples -->
         <item name="rippleSecondaryColor">@color/md_white_1000_6</item>
         <item name="rippleToolbarColor">@color/md_white_1000_12</item>
-        <item name="actionBarTheme">@style/Theme.Toolbar.Light</item>
+
+        <!-- Themes -->
+        <item name="actionBarTheme">@style/Theme.Toolbar.Custom.PopupTheme</item>
+
+        <!-- Status/Navigation bar -->
         <item name="android:windowLightStatusBar" tools:targetApi="m">false</item>
         <item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">false</item>
     </style>
@@ -118,6 +135,8 @@
     <!--=============-->
     <!-- Dark Themes -->
     <!--=============-->
+
+    <!--== Dark base ==-->
     <style name="Theme.Base.Dark" parent="Theme.MaterialComponents.NoActionBar">
         <!-- Theme colors -->
         <item name="colorPrimary">@color/colorDarkPrimary</item>
@@ -144,6 +163,7 @@
         <item name="android:textColorSecondaryInverse">@color/textColorSecondaryLight</item>
         <item name="android:textColorHintInverse">@color/textColorHintLight</item>
         <item name="android:colorEdgeEffect">?attr/colorAccent</item>
+        <item name="background">@color/colorDarkPrimaryDark</item>
 
         <item name="android:divider">@color/dividerDark</item>
         <item name="android:listDivider">@drawable/line_divider</item>
@@ -196,81 +216,219 @@
         <item name="colorFilterActive">@color/filterColorDark</item>
     </style>
 
+    <!--== Dark theme ==-->
     <style name="Theme.Tachiyomi.Dark" parent="Theme.Base.Dark" />
 
+    <!--== Dark Blue theme ==-->
     <style name="Theme.Tachiyomi.Dark.Blue">
+        <!-- Theme colors -->
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorAccentOnPrimary">@color/textColorPrimaryDark</item>
         <item name="colorPrimaryVariant">@color/colorPrimary</item>
+
+        <!-- Base background/text colors -->
+        <item name="background">@color/colorPrimary</item>
+
+        <!-- Ripples -->
         <item name="rippleSecondaryColor">@color/md_black_1000_6</item>
         <item name="rippleToolbarColor">@color/md_black_1000_12</item>
     </style>
 
-    <style name="Theme.Tachiyomi.Dark.Amoled">
+    <!--== Midnight Dusk theme ==-->
-        <item name="colorPrimary">@color/colorAmoledPrimary</item>
+    <style name="Theme.Tachiyomi.Dark.MidnightDusk" parent="Theme.Base.Dark">
-        <item name="colorPrimaryVariant">@color/colorAmoledPrimary</item>
+        <!-- Theme colors -->
-        <item name="colorSurface">@color/colorAmoledPrimary</item>
+        <item name="colorPrimary">@color/dialogDusk</item>
+        <item name="colorOnPrimary">@color/textColorPrimaryDusk</item>
+        <item name="colorAccentOnPrimary">@color/colorAccentDusk</item>
+        <item name="colorPrimaryVariant">@color/dialogDusk</item>
+        <item name="colorSecondary">@color/colorAccentDusk</item>
+        <item name="colorOnSecondary">@color/textColorPrimaryDusk</item>
+        <item name="colorSurface">@color/dialogDusk</item>
+        <item name="colorOnSurface">@color/textColorPrimaryDusk</item>
+        <item name="colorOnBackground">@color/textColorPrimaryDusk</item>
+        <item name="colorAccent">@color/colorAccentDusk</item>
 
-        <item name="android:colorBackground">@color/colorAmoledPrimary</item>
+        <!-- Base background/text colors -->
+        <item name="android:colorBackground">@color/backgroundDusk</item>
+        <item name="background">@color/backgroundDusk</item>
 
-        <!-- Some ROMs make black navbars white (e.g. OxygenOS) -->
+        <!-- Ripples -->
-        <item name="android:navigationBarColor">#000001</item>
+        <item name="rippleSecondaryColor">@color/rippleSecondaryColorDusk</item>
 
-        <!-- Custom Attributes-->
+        <!-- Custom Attributes -->
         <item name="colorLibrarySelection">@color/selectorColorDark</item>
         <item name="colorLibrarySelectionActive">@color/selectorColorDark</item>
     </style>
 
-    <!--==============-->
+    <!--===============-->
-    <!-- Reader Theme -->
+    <!-- AMOLED Themes -->
-    <!--==============-->
+    <!--===============-->
-    <style name="Theme.Base.Reader.Dark" parent="Theme.Base.Dark">
-        <item name="colorPrimary">@color/readerColorDarkPrimary</item>
-        <item name="colorOnPrimary">@color/textColorPrimaryDark</item>
-        <item name="colorPrimaryVariant">@color/readerColorDarkPrimary</item>
-        <item name="colorSurface">@color/md_black_1000</item>
 
-        <item name="android:colorBackground">@color/md_black_1000</item>
+    <!--== AMOLED base ==-->
-        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
+    <style name="Theme.Base.Amoled" parent="Theme.MaterialComponents.NoActionBar">
-        <item name="android:navigationBarColor">?attr/colorPrimaryVariant</item>
+        <!-- Theme colors -->
+        <item name="colorPrimary">@color/colorAmoledPrimary</item>
+        <item name="colorOnPrimary">@color/textColorPrimaryAmoled</item>
+        <item name="colorAccentOnPrimary">@color/colorAccentAmoled</item>
+        <item name="colorPrimaryVariant">@color/colorAmoledPrimary</item>
+        <item name="colorSecondary">@color/colorAccentAmoled</item>
+        <item name="colorOnSecondary">@color/textColorPrimaryAmoled</item>
+        <item name="colorSurface">@color/dialogAmoled</item>
+        <item name="colorOnSurface">@color/textColorPrimaryAmoled</item>
+        <item name="colorOnBackground">@color/textColorPrimaryAmoled</item>
+        <item name="colorAccent">@color/colorAccentAmoled</item>
 
-        <item name="actionBarTheme">@style/Theme.Toolbar.Custom.Dark</item>
+        <!-- Handles RTL text -->
+        <item name="android:textAlignment">gravity</item>
+        <item name="android:textDirection">locale</item>
+
+        <!-- Base background/text colors -->
+        <item name="android:colorBackground">@color/colorAmoledPrimary</item>
+        <item name="android:textColorPrimary">@color/textColorPrimaryAmoled</item>
+        <item name="android:textColorSecondary">@color/textColorSecondaryAmoled</item>
+        <item name="android:textColorHint">@color/textColorHintAmoled</item>
+        <item name="android:textColorPrimaryInverse">@color/textColorPrimaryLight</item>
+        <item name="android:textColorSecondaryInverse">@color/textColorSecondaryLight</item>
+        <item name="android:textColorHintInverse">@color/textColorHintLight</item>
+        <item name="android:colorEdgeEffect">?attr/colorAccent</item>
+        <item name="background">@color/colorAmoledPrimary</item>
+
+        <item name="android:divider">@color/dividerAmoled</item>
+        <item name="android:listDivider">@drawable/line_divider</item>
+
+        <!-- Ripples -->
+        <item name="rippleColor">@color/rippleColorAmoled</item>
+        <item name="rippleSecondaryColor">@color/rippleSecondaryColorAmoled</item>
+        <item name="rippleToolbarColor">@color/rippleToolbarColorAmoled</item>
+
+        <!-- Themes -->
+        <item name="android:statusBarColor">?attr/colorPrimary</item>
+        <item name="android:navigationBarDividerColor" tools:targetApi="o_mr1">@null</item>
+        <item name="android:enforceNavigationBarContrast" tools:targetApi="Q">false</item>
+        <item name="windowActionModeOverlay">true</item>
+        <item name="elevationOverlayEnabled">false</item>
+        <item name="actionModeStyle">@style/Theme.ActionMode</item>
+        <item name="actionModeCloseButtonStyle">@style/Theme.ActionMode.CloseButton</item>
+        <item name="actionModeCloseDrawable">@drawable/ic_close_24dp</item>
+        <item name="actionBarTheme">@style/Theme.Toolbar.Custom.Amoled</item>
         <item name="actionBarPopupTheme">@style/ThemeOverlay.MaterialComponents</item>
-        <item name="switchStyle">@style/Theme.Widget.BasicSwitch</item>
+        <item name="toolbarNavigationButtonStyle">@style/Theme.Toolbar.Navigation</item>
+        <item name="preferenceTheme">@style/PreferenceThemeCustom</item>
+        <item name="dialogTheme">@style/Theme.AlertDialog.Amoled</item>
+        <item name="materialAlertDialogTheme">@style/Theme.AlertDialog.Amoled</item>
         <item name="bottomSheetDialogTheme">@style/Theme.BottomSheet</item>
+        <item name="chipStyle">@style/Theme.Widget.Chip</item>
+        <item name="buttonStyle">@style/Theme.Widget.Button</item>
+        <item name="snackbarStyle">@style/Theme.Widget.Snackbar</item>
+        <item name="snackbarButtonStyle">@style/Theme.Widget.Button</item>
+        <item name="snackbarTextViewStyle">@style/Theme.Widget.Snackbar.TextView</item>
+        <item name="textAppearanceButton">@style/TextAppearance.Widget.Button</item>
+        <item name="textInputStyle">@style/Theme.Widget.TextInputLayout.OutlinedBox</item>
+        <item name="android:itemTextAppearance">@style/TextAppearance.Widget.Menu</item>
+        <item name="swipeRefreshLayoutProgressSpinnerBackgroundColor">?attr/colorAccent</item>
+        <item name="circularProgressIndicatorStyle">@style/Theme.Widget.CircularProgressIndicator</item>
+        <item name="linearProgressIndicatorStyle">@style/Theme.Widget.LinearProgressIndicator</item>
+
+        <!-- Material Dialogs -->
+        <item name="md_background_color">?attr/colorSurface</item>
+        <item name="md_color_title">?attr/colorOnSurface</item>
+        <item name="md_color_content">?attr/colorOnSurface</item>
+        <item name="md_color_button_text">?attr/colorAccent</item>
+        <item name="md_button_casing">literal</item>
+        <item name="md_corner_radius">@dimen/dialog_radius</item>
+
+        <!-- Custom Attributes-->
+        <item name="colorLibrarySelection">@color/selectorColorAmoled</item>
+        <item name="colorLibrarySelectionActive">@color/selectorColorAmoled</item>
+        <item name="colorFilterActive">@color/filterColorAmoled</item>
+
+        <!-- Some ROMs make black navbars white (e.g. OxygenOS) -->
+        <item name="android:navigationBarColor">#000001</item>
     </style>
 
+    <!--== AMOLED theme ==-->
+    <style name="Theme.Tachiyomi.Amoled" parent="Theme.Base.Amoled" />
+
+    <!--== Hot Pink theme ==-->
+    <style name="Theme.Tachiyomi.Amoled.HotPink">
+        <!-- Theme colors -->
+        <item name="colorOnPrimary">@color/textColorPrimaryPink</item>
+        <item name="colorAccentOnPrimary">@color/colorAccentPink</item>
+        <item name="colorSecondary">@color/colorAccentPink</item>
+        <item name="colorOnSecondary">@color/textColorPrimaryPink</item>
+        <item name="colorOnSurface">@color/textColorPrimaryPink</item>
+        <item name="colorOnBackground">@color/textColorPrimaryPink</item>
+        <item name="colorAccent">@color/colorAccentPink</item>
+
+        <!-- Ripples -->
+        <item name="rippleSecondaryColor">@color/rippleSecondaryColorPink</item>
+    </style>
+
+    <!--===============-->
+    <!-- Reader Themes -->
+    <!--===============-->
+
+    <!--== Light Reader base ==-->
     <style name="Theme.Base.Reader.Light" parent="Theme.Base">
+        <!-- Theme colors -->
         <item name="colorPrimary">@color/readerColorDarkPrimary</item>
         <item name="colorOnPrimary">@color/textColorPrimaryDark</item>
         <item name="colorPrimaryVariant">@color/readerColorDarkPrimary</item>
         <item name="colorSurface">@color/md_white_1000</item>
 
+        <!-- Base background/text colors -->
         <item name="android:colorBackground">@color/md_white_1000</item>
         <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
         <item name="android:navigationBarColor">?attr/colorPrimaryVariant</item>
 
+        <!-- Themes -->
         <item name="actionBarTheme">@style/Theme.Toolbar.Custom.Dark</item>
         <item name="actionBarPopupTheme">@style/ThemeOverlay.MaterialComponents</item>
         <item name="switchStyle">@style/Theme.Widget.BasicSwitch</item>
         <item name="bottomSheetDialogTheme">@style/Theme.BottomSheet</item>
     </style>
 
+    <!--== Light Reader ==-->
+    <style name="Theme.Reader.Light" parent="Theme.Base.Reader.Light" />
+
+    <!--== Dark Reader base ==-->
+    <style name="Theme.Base.Reader.Dark" parent="Theme.Base.Dark">
+        <!-- Theme colors -->
+        <item name="colorPrimary">@color/readerColorDarkPrimary</item>
+        <item name="colorOnPrimary">@color/textColorPrimaryDark</item>
+        <item name="colorPrimaryVariant">@color/readerColorDarkPrimary</item>
+        <item name="colorSurface">@color/md_black_1000</item>
+
+        <!-- Base background/text colors -->
+        <item name="android:colorBackground">@color/md_black_1000</item>
+        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
+        <item name="android:navigationBarColor">?attr/colorPrimaryVariant</item>
+
+        <!-- Themes -->
+        <item name="actionBarTheme">@style/Theme.Toolbar.Custom.Dark</item>
+        <item name="actionBarPopupTheme">@style/ThemeOverlay.MaterialComponents</item>
+        <item name="switchStyle">@style/Theme.Widget.BasicSwitch</item>
+        <item name="bottomSheetDialogTheme">@style/Theme.BottomSheet</item>
+    </style>
+
+    <!--== Dark Reader ==-->
     <style name="Theme.Reader.Dark" parent="Theme.Base.Reader.Dark" />
 
+    <!--== Dark Grey Reader ==-->
     <style name="Theme.Reader.Dark.Grey" parent="Theme.Base.Reader.Dark">
         <item name="android:colorBackground">@color/backgroundDark</item>
     </style>
 
-    <style name="Theme.Reader.Light" parent="Theme.Base.Reader.Light" />
-
-
     <!--===============-->
     <!-- Launch Screen -->
     <!--===============-->
+
+    <!--== Splash theme ==-->
     <style name="Theme.Splash" parent="Theme.Tachiyomi.Light.Blue">
+        <!-- Theme colors -->
         <item name="colorBackgroundSplash">@color/colorPrimary</item>
 
+        <!-- Base background/text colors -->
         <item name="android:windowBackground">@drawable/splash_background</item>
         <item name="android:statusBarColor">?attr/colorBackgroundSplash</item>
         <item name="android:navigationBarColor">?attr/colorBackgroundSplash</item>