Add theme switcher and a simple black and white theme

readrops · Aug 25, 2024 · 692ae87 · 692ae87
1 parent b8f61b6
commit 692ae87
Show file tree

Hide file tree

Showing 15 changed files with 194 additions and 164 deletions.
diff --git a/app/src/main/java/com/readrops/app/MainActivity.kt b/app/src/main/java/com/readrops/app/MainActivity.kt
@@ -55,21 +55,21 @@ class MainActivity : ComponentActivity(), KoinComponent {
         val initialUseDarkTheme = runBlocking {
             useDarkTheme(preferences.theme.flow.first(), darkFlag)
         }
-        val initialUseAltColours = runBlocking {
-            preferences.themeUseAlt.flow.first()
+        val initialColourScheme = runBlocking {
+            preferences.theme.flow.first()
         }
 
         setContent {
             KoinAndroidContext {
                 val useDarkTheme by preferences.theme.flow
                     .map { mode -> useDarkTheme(mode, darkFlag) }
                     .collectAsState(initial = initialUseDarkTheme)
-                val useAltColours by preferences.themeUseAlt.flow
-                    .collectAsState(initial = initialUseAltColours)
+                val themeColourScheme by preferences.themeColourScheme.flow
+                    .collectAsState(initial = initialColourScheme)
 
                 ReadropsTheme(
                     useDarkTheme = useDarkTheme,
-                    useAltColours = useAltColours
+                    themeColourScheme = themeColourScheme
                 ) {
                     val navigationBarElevation = NavigationBarDefaults.Elevation
 

diff --git a/app/src/main/java/com/readrops/app/more/preferences/PreferencesScreen.kt b/app/src/main/java/com/readrops/app/more/preferences/PreferencesScreen.kt
@@ -99,10 +99,15 @@ class PreferencesScreen : AndroidScreen() {
                                 onValueChange = {}
                             )
 
-                            SwitchPreferenceWidget(
-                                preference = loadedState.themeUseAlt.second,
-                                isChecked = loadedState.themeUseAlt.first,
-                                title = stringResource(id = R.string.use_alternate_theme_colours)
+                            ListPreferenceWidget(
+                                preference = loadedState.themeColourScheme.second,
+                                selectedKey = loadedState.themeColourScheme.first,
+                                entries = mapOf(
+                                    "readrops" to stringResource(id = R.string.theme_readrops),
+                                    "blackwhite" to stringResource(id = R.string.theme_blackwhite),
+                                ),
+                                title = stringResource(id = R.string.theme_color_scheme),
+                                onValueChange = {}
                             )
 
                             ListPreferenceWidget(

diff --git a/app/src/main/java/com/readrops/app/more/preferences/PreferencesScreenModel.kt b/app/src/main/java/com/readrops/app/more/preferences/PreferencesScreenModel.kt
@@ -26,7 +26,7 @@ class PreferencesScreenModel(
                 preferences.hideReadFeeds.flow,
                 preferences.openLinksWith.flow,
                 preferences.timelineItemSize.flow,
-                preferences.themeUseAlt.flow
+                preferences.themeColourScheme.flow
             )
 
             combine(
@@ -39,7 +39,7 @@ class PreferencesScreenModel(
                     hideReadFeeds = (list[3] as Boolean) to preferences.hideReadFeeds,
                     openLinksWith = (list[4] as String) to preferences.openLinksWith,
                     timelineItemSize = (list[5] as String) to preferences.timelineItemSize,
-                    themeUseAlt = (list[6] as Boolean) to preferences.themeUseAlt
+                    themeColourScheme = (list[6] as String) to preferences.themeColourScheme
                 )
             }.collect { theme ->
                 mutableState.update { theme }
@@ -60,7 +60,7 @@ sealed class PreferencesScreenState {
         val hideReadFeeds: PreferenceState<Boolean>,
         val openLinksWith: PreferenceState<String>,
         val timelineItemSize: PreferenceState<String>,
-        val themeUseAlt: PreferenceState<Boolean>
+        val themeColourScheme: PreferenceState<String>
     ) : PreferencesScreenState()
 
 }
diff --git a/app/src/main/java/com/readrops/app/util/Preferences.kt b/app/src/main/java/com/readrops/app/util/Preferences.kt
@@ -26,15 +26,15 @@ class Preferences(
 ) {
 
     val theme = Preference(
-            dataStore = dataStore,
-            key = stringPreferencesKey("theme"),
-            default = "system"
-        )
+        dataStore = dataStore,
+        key = stringPreferencesKey("theme"),
+        default = "system"
+    )
 
-    val themeUseAlt = Preference(
+    val themeColourScheme = Preference(
         dataStore = dataStore,
-        key = booleanPreferencesKey("theme_use_alt"),
-        default = false
+        key = stringPreferencesKey("theme_color_scheme"),
+        default = "readrops"
     )
 
     val backgroundSynchronization = Preference(

diff --git a/app/src/main/java/com/readrops/app/util/theme/Color.kt b/app/src/main/java/com/readrops/app/util/theme/Color.kt
@@ -2,6 +2,7 @@ package com.readrops.app.util.theme
 
 import androidx.compose.ui.graphics.Color
 
+// Material Design Light
 val md_theme_light_primary = Color(0xFF0062A2)
 val md_theme_light_onPrimary = Color(0xFFFFFFFF)
 val md_theme_light_primaryContainer = Color(0xFFD1E4FF)
@@ -33,6 +34,7 @@ val md_theme_light_surfaceTint = Color(0xFF0062A2)
 val md_theme_light_outlineVariant = Color(0xFFC3C7CF)
 val md_theme_light_scrim = Color(0xFF000000)
 
+// Material Design Dark
 val md_theme_dark_primary = Color(0xFF9DCAFF)
 val md_theme_dark_onPrimary = Color(0xFF003257)
 val md_theme_dark_primaryContainer = Color(0xFF00497C)
@@ -64,75 +66,68 @@ val md_theme_dark_surfaceTint = Color(0xFF9DCAFF)
 val md_theme_dark_outlineVariant = Color(0xFF42474E)
 val md_theme_dark_scrim = Color(0xFF000000)
 
-val md_alt_theme_light_primary = Color(0xFF0062A2)
-val md_alt_theme_light_onPrimary = Color(0xFFFFFFFF)
-val md_alt_theme_light_primaryContainer = Color(0xFFD1E4FF)
-val md_alt_theme_light_onPrimaryContainer = Color(0xFF001D35)
-val md_alt_theme_light_secondary = Color(0xFFA43D00)
-val md_alt_theme_light_onSecondary = Color(0xFFFFFFFF)
-val md_alt_theme_light_secondaryContainer = Color(0xFFFFDBCD)
-val md_alt_theme_light_onSecondaryContainer = Color(0xFF360F00)
-val md_alt_theme_light_tertiary = Color(0xFF006D3D)
-val md_alt_theme_light_onTertiary = Color(0xFFFFFFFF)
-val md_alt_theme_light_tertiaryContainer = Color(0xFF97F7B7)
-val md_alt_theme_light_onTertiaryContainer = Color(0xFF00210F)
-val md_alt_theme_light_error = Color(0xFFBA1A1A)
-val md_alt_theme_light_errorContainer = Color(0xFFFFDAD6)
-val md_alt_theme_light_onError = Color(0xFFFFFFFF)
-val md_alt_theme_light_onErrorContainer = Color(0xFF410002)
-val md_alt_theme_light_background = Color(0xFFF8FDFF)
-val md_alt_theme_light_onBackground = Color(0xFF001F25)
-val md_alt_theme_light_surface = Color(0xFFF8FDFF)
-val md_alt_theme_light_onSurface = Color(0xFF001F25)
-//val md_alt_theme_light_surfaceVariant = Color(0xFFDFE2EB)
-val md_alt_theme_light_surfaceVariant = Color(0xFFF8FDFF)
-val md_alt_theme_light_onSurfaceVariant = Color(0xFF42474E)
-val md_alt_theme_light_outline = Color(0xFF73777F)
-val md_alt_theme_light_inverseOnSurface = Color(0xFFD6F6FF)
-val md_alt_theme_light_inverseSurface = Color(0xFF00363F)
-val md_alt_theme_light_inversePrimary = Color(0xFF9DCAFF)
-val md_alt_theme_light_shadow = Color(0xFF000000)
-val md_alt_theme_light_surfaceTint = Color(0xFF0062A2)
-val md_alt_theme_light_outlineVariant = Color(0xFFC3C7CF)
-val md_alt_theme_light_scrim = Color(0xFF000000)
+// Black & White Light
+val bw_theme_light_primary = Color(0xFF000000)
+val bw_theme_light_onPrimary = Color(0xFFFFFFFF)
+val bw_theme_light_primaryContainer = Color(0xFF262626)
+val bw_theme_light_onPrimaryContainer = Color(0xFFB1B1B1)
+val bw_theme_light_secondary = Color(0xFF5E5E5E)
+val bw_theme_light_onSecondary = Color(0xFFFFFFFF)
+val bw_theme_light_secondaryContainer = Color(0xFFE6E6E6)
+val bw_theme_light_onSecondaryContainer = Color(0xFF4A4A4A)
+val bw_theme_light_tertiary = Color(0xFF000000)
+val bw_theme_light_onTertiary = Color(0xFFFFFFFF)
+val bw_theme_light_tertiaryContainer = Color(0xFF262626)
+val bw_theme_light_onTertiaryContainer = Color(0xFFB1B1B1)
+val bw_theme_light_error = Color(0xFF5E5E5E)
+val bw_theme_light_onError = Color(0xFFFFFFFF)
+val bw_theme_light_errorContainer = Color(0xFFE6E6E6)
+val bw_theme_light_onErrorContainer = Color(0xFF000000)
+val bw_theme_light_background = Color(0xFFF9F9F9)
+val bw_theme_light_onBackground = Color(0xFF1B1B1B)
+val bw_theme_light_surface = Color(0xFFF9F9F9)
+val bw_theme_light_onSurface = Color(0xFF1B1B1B)
+val bw_theme_light_surfaceVariant = Color(0xFFFFFFFF)
+val bw_theme_light_onSurfaceVariant = Color(0xFF4C4546)
+val bw_theme_light_outline = Color(0xFF7E7576)
+val bw_theme_light_inverseOnSurface = Color(0xFFF1F1F1)
+val bw_theme_light_inverseSurface = Color(0xFF303030)
+val bw_theme_light_inversePrimary = Color(0xFFC6C6C6)
+val bw_theme_light_shadow = Color(0xFF4C4546)
+val bw_theme_light_surfaceTint = Color(0xFFF3F3F3)
+val bw_theme_light_outlineVariant = Color(0xFFF3F3F3)
+val bw_theme_light_scrim = Color(0xFF000000)
 
-val md_alt_theme_dark_primary = Color(0xFFFFB597)
-//val md_alt_theme_dark_primary = Color(0xFF9DCAFF)
-val md_alt_theme_dark_onPrimary = Color(0xFF003257) //
-//val md_alt_theme_dark_primaryContainer = Color(0xFF00497C)
-val md_alt_theme_dark_primaryContainer = Color(0xFF7D2D00)
-val md_alt_theme_dark_onPrimaryContainer = Color(0xFFD1E4FF)
-val md_alt_theme_dark_secondary = Color(0xFFFFB597)
-val md_alt_theme_dark_onSecondary = Color(0xFF581D00)
-val md_alt_theme_dark_secondaryContainer = Color(0xFF7D2D00)
-val md_alt_theme_dark_onSecondaryContainer = Color(0xFFFFDBCD)
-val md_alt_theme_dark_tertiary = Color(0xFF7BDA9C)
-val md_alt_theme_dark_onTertiary = Color(0xFF00391D)
-val md_alt_theme_dark_tertiaryContainer = Color(0xFF00522C)
-val md_alt_theme_dark_onTertiaryContainer = Color(0xFF97F7B7)
-val md_alt_theme_dark_error = Color(0xFFFFB4AB)
-val md_alt_theme_dark_errorContainer = Color(0xFF93000A)
-val md_alt_theme_dark_onError = Color(0xFF690005)
-val md_alt_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
-// val md_alt_theme_dark_background = Color(0xFF001F25)
-val md_alt_theme_dark_background = Color(0xFF000000)
-//val md_alt_theme_dark_onBackground = Color(0xFFA6EEFF)
-val md_alt_theme_dark_onBackground = Color(0xFFFFFFFF)
-// val md_alt_theme_dark_surface = Color(0xFF001F25)
-val md_alt_theme_dark_surface = Color(0xFF000000)
-//val md_alt_theme_dark_onSurface = Color(0xFFA6EEFF)
-val md_alt_theme_dark_onSurface = Color(0xFFFFFFFF)
-//val md_alt_theme_dark_surfaceVariant = Color(0xFF42474E)
-val md_alt_theme_dark_surfaceVariant = Color(0xFF000000)
-val md_alt_theme_dark_onSurfaceVariant = Color(0xFFC3C7CF)
-val md_alt_theme_dark_outline = Color(0xFF8D9199)
-val md_alt_theme_dark_inverseOnSurface = Color(0xFF001F25) //
-val md_alt_theme_dark_inverseSurface = Color(0xFFA6EEFF)
-//val md_alt_theme_dark_inversePrimary = Color(0xFF0062A2)
-val md_alt_theme_dark_inversePrimary = Color(0xFF7D2D00)
-val md_alt_theme_dark_shadow = Color(0xFF000000)
-val md_alt_theme_dark_surfaceTint = Color(0xFF9DCAFF)
-val md_alt_theme_dark_outlineVariant = Color(0xFF42474E)
-val md_alt_theme_dark_scrim = Color(0xFF000000)
+// Black & White Dark
+val bw_theme_dark_primary = Color(0xFFC6C6C6)
+val bw_theme_dark_onPrimary = Color(0xFF303030)
+val bw_theme_dark_onPrimaryContainer = Color(0xFF969696)
+val bw_theme_dark_primaryContainer = Color(0xFF000000)
+val bw_theme_dark_secondary = Color(0xFFC6C6C6)
+val bw_theme_dark_onSecondary = Color(0xFF303030)
+val bw_theme_dark_secondaryContainer = Color(0xFF3D3D3D)
+val bw_theme_dark_onSecondaryContainer = Color(0xFFD1D1D1)
+val bw_theme_dark_tertiary = Color(0xFFC6C6C6)
+val bw_theme_dark_onTertiary = Color(0xFF303030)
+val bw_theme_dark_tertiaryContainer = Color(0xFF000000)
+val bw_theme_dark_onTertiaryContainer = Color(0xFFFFFFFF)
+val bw_theme_dark_error = Color(0xFF5E5E5E)
+val bw_theme_dark_onError = Color(0xFF000000)
+val bw_theme_dark_errorContainer = Color(0xFF0A0A0A)
+val bw_theme_dark_onErrorContainer = Color(0xFFFFFFFF)
+val bw_theme_dark_background = Color(0xFF131313)
+val bw_theme_dark_onBackground = Color(0xFFFFFFFF)
+val bw_theme_dark_surface = Color(0xFF131313)
+val bw_theme_dark_onSurface = Color(0xFFE2E2E2)
+val bw_theme_dark_surfaceVariant = Color(0xFF131313)
+val bw_theme_dark_onSurfaceVariant = Color(0xFFCFC4C5)
+val bw_theme_dark_outline = Color(0xFF988E90)
+val bw_theme_dark_inverseSurface = Color(0xFFE2E2E2)
+val bw_theme_dark_inverseOnSurface = Color(0xFF303030)
+val bw_theme_dark_inversePrimary = Color(0xFFFFFFFF)
+val bw_theme_dark_shadow = Color(0xFF4C4546)
+val bw_theme_dark_surfaceTint = Color(0xFF0A0A0A)
+val bw_theme_dark_outlineVariant = Color(0xFF4C4546)
+val bw_theme_dark_scrim = Color(0xFF000000)
 
 val seed = Color(0xFF0072BC)