Implement light theme (#198)

README.md

@@ -65,7 +65,7 @@ description of the modularization strategy used in
 UI components are designed according to the custom design system and built entirely
 using [Jetpack Compose](https://developer.android.com/jetpack/compose).
 
-The app has one dark theme that uses predefined colors.
+The app has a light and dark theme that uses predefined colors.
 
 Find out more about the [UI architecture here](docs/ArchitectureLearningJourney.md#ui-layer).
 

app/src/main/kotlin/com/maximillianleonov/cinemax/ui/CinemaxApp.kt

@@ -46,13 +46,11 @@ import com.maximillianleonov.cinemax.ui.component.CinemaxBottomBar
 
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
 @Composable
-fun CinemaxApp(
-    appState: CinemaxAppState = rememberCinemaxAppState(),
-    systemBarsColor: Color = CinemaxTheme.colors.primaryDark
-) {
-    LaunchedEffect(systemBarsColor) { appState.setSystemBarsColor(systemBarsColor) }
-
+fun CinemaxApp(appState: CinemaxAppState = rememberCinemaxAppState()) {
     CinemaxTheme {
+        val systemBarsColor = CinemaxTheme.colors.primary
+        LaunchedEffect(systemBarsColor) { appState.setSystemBarsColor(systemBarsColor) }
+
         CompositionLocalProvider(
             LocalSnackbarHostState provides appState.snackbarHostState
         ) {

app/src/main/kotlin/com/maximillianleonov/cinemax/ui/component/CinemaxBottomBar.kt

@@ -68,7 +68,7 @@ fun CinemaxBottomBar(
     currentDestination: TopLevelDestination,
     onNavigateToDestination: (TopLevelDestination) -> Unit,
     modifier: Modifier = Modifier,
-    color: Color = CinemaxTheme.colors.primaryDark
+    color: Color = CinemaxTheme.colors.primary
 ) {
     Surface(
         modifier = modifier,
@@ -91,9 +91,9 @@ fun CinemaxBottomBar(
                 val selected = destination == currentDestination
                 val tint by animateColorAsState(
                     if (selected) {
-                        CinemaxTheme.colors.primaryBlue
+                        CinemaxTheme.colors.accent
                     } else {
-                        CinemaxTheme.colors.grey
+                        CinemaxTheme.colors.textSecondary
                     }
                 )
 
@@ -286,7 +286,7 @@ private fun CinemaxBottomNavItemLayout(
 private fun CinemaxBottomNavIndicator(
     modifier: Modifier = Modifier,
     padding: Dp = CinemaxTheme.spacing.smallMedium,
-    color: Color = CinemaxTheme.colors.primarySoft,
+    color: Color = CinemaxTheme.colors.primaryVariant,
     shape: Shape = CinemaxTheme.shapes.medium
 ) {
     Spacer(

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

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     Copyright 2022 Maximillian Leonov
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+         http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<resources xmlns:tools="http://schemas.android.com/tools">
+
+    <style name="Theme.Cinemax" parent="android:Theme.Material.Light.NoActionBar">
+        <item name="android:statusBarColor">@color/primaryDark</item>
+        <item name="android:navigationBarColor">@color/primaryDark</item>
+        <item name="android:windowLightStatusBar" tools:targetApi="23">false</item>
+        <item name="android:windowLightNavigationBar" tools:targetApi="27">false</item>
+    </style>
+</resources>

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

@@ -15,5 +15,6 @@
      limitations under the License.
 -->
 <resources>
+    <color name="primaryLight">#DFD8FF</color>
     <color name="primaryDark">#1F1D2B</color>
 </resources>

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

@@ -17,10 +17,10 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
 
     <style name="Theme.Cinemax" parent="android:Theme.Material.Light.NoActionBar">
-        <item name="android:statusBarColor">@color/primaryDark</item>
-        <item name="android:navigationBarColor">@color/primaryDark</item>
-        <item name="android:windowLightStatusBar" tools:targetApi="23">false</item>
-        <item name="android:windowLightNavigationBar" tools:targetApi="27">false</item>
+        <item name="android:statusBarColor">@color/primaryLight</item>
+        <item name="android:navigationBarColor">@color/primaryLight</item>
+        <item name="android:windowLightStatusBar" tools:targetApi="23">true</item>
+        <item name="android:windowLightNavigationBar" tools:targetApi="27">true</item>
     </style>
 
     <style name="Theme.Cinemax.Splash" parent="Theme.SplashScreen">

core/core-designsystem/src/main/kotlin/com/maximillianleonov/cinemax/core/designsystem/component/Button.kt

@@ -42,8 +42,8 @@ fun CinemaxOutlinedButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     shape: Shape = CinemaxTheme.shapes.medium,
-    containerColor: Color = CinemaxTheme.colors.primarySoft,
-    contentColor: Color = CinemaxTheme.colors.primaryBlue,
+    containerColor: Color = CinemaxTheme.colors.primaryVariant,
+    contentColor: Color = CinemaxTheme.colors.accent,
     borderColor: Color = contentColor,
     textStyle: TextStyle = CinemaxTheme.typography.medium.h5
 ) {

core/core-designsystem/src/main/kotlin/com/maximillianleonov/cinemax/core/designsystem/component/Image.kt

@@ -71,7 +71,7 @@ private fun SubcomposeAsyncImageScope.SubcomposeAsyncImageHandler() {
         AsyncImagePainter.State.Empty, is AsyncImagePainter.State.Error -> Box(
             modifier = Modifier
                 .fillMaxSize()
-                .background(CinemaxTheme.colors.primarySoft)
+                .background(CinemaxTheme.colors.primaryVariant)
         )
     }
 }

core/core-designsystem/src/main/kotlin/com/maximillianleonov/cinemax/core/designsystem/component/Message.kt

@@ -49,7 +49,7 @@ fun CinemaxMessage(
             Text(
                 text = stringResource(id = messageResourceId),
                 style = CinemaxTheme.typography.medium.h3,
-                color = CinemaxTheme.colors.white,
+                color = CinemaxTheme.colors.textPrimary,
                 textAlign = TextAlign.Center
             )
         }

core/core-designsystem/src/main/kotlin/com/maximillianleonov/cinemax/core/designsystem/component/Placeholder.kt

@@ -28,7 +28,7 @@ import com.maximillianleonov.cinemax.core.designsystem.theme.CinemaxTheme
 @Composable
 fun CinemaxImagePlaceholder(
     modifier: Modifier = Modifier,
-    color: Color = CinemaxTheme.colors.primarySoft
+    color: Color = CinemaxTheme.colors.primaryVariant
 ) {
     Box(
         modifier = modifier
@@ -38,7 +38,7 @@ fun CinemaxImagePlaceholder(
 }
 
 fun Modifier.cinemaxPlaceholder() = composed {
-    cinemaxPlaceholder(color = CinemaxTheme.colors.primarySoft)
+    cinemaxPlaceholder(color = CinemaxTheme.colors.primaryVariant)
 }
 
 fun Modifier.cinemaxPlaceholder(color: Color) = composed {

core/core-designsystem/src/main/kotlin/com/maximillianleonov/cinemax/core/designsystem/component/ProgressIndicator.kt

@@ -27,7 +27,7 @@ import com.maximillianleonov.cinemax.core.designsystem.theme.CinemaxTheme
 @Composable
 fun CinemaxCircularProgressIndicator(
     modifier: Modifier = Modifier,
-    color: Color = CinemaxTheme.colors.primaryBlue,
+    color: Color = CinemaxTheme.colors.accent,
     strokeWidth: Dp = StrokeWidth
 ) {
     CircularProgressIndicator(

core/core-designsystem/src/main/kotlin/com/maximillianleonov/cinemax/core/designsystem/component/Snackbar.kt

@@ -31,9 +31,9 @@ fun CinemaxSnackbarHost(
     snackbarHostState: SnackbarHostState,
     modifier: Modifier = Modifier,
     shape: Shape = CinemaxTheme.shapes.small,
-    containerColor: Color = CinemaxTheme.colors.primarySoft,
-    contentColor: Color = CinemaxTheme.colors.whiteGrey,
-    actionColor: Color = CinemaxTheme.colors.primaryBlue
+    containerColor: Color = CinemaxTheme.colors.primaryVariant,
+    contentColor: Color = CinemaxTheme.colors.textPrimaryVariant,
+    actionColor: Color = CinemaxTheme.colors.accent
 ) {
     SnackbarHost(
         hostState = snackbarHostState,

core/core-designsystem/src/main/kotlin/com/maximillianleonov/cinemax/core/designsystem/component/SwipeRefresh.kt

@@ -33,8 +33,8 @@ fun CinemaxSwipeRefresh(
     isRefreshing: Boolean,
     onRefresh: () -> Unit,
     modifier: Modifier = Modifier,
-    backgroundColor: Color = CinemaxTheme.colors.primarySoft,
-    contentColor: Color = CinemaxTheme.colors.primaryBlue,
+    backgroundColor: Color = CinemaxTheme.colors.primaryVariant,
+    contentColor: Color = CinemaxTheme.colors.accent,
     indicatorPadding: PaddingValues = PaddingValues(0.dp),
     indicator: @Composable (state: SwipeRefreshState, refreshTrigger: Dp) -> Unit =
         { state, refreshTrigger ->

core/core-designsystem/src/main/kotlin/com/maximillianleonov/cinemax/core/designsystem/component/TextField.kt

@@ -56,20 +56,20 @@ fun CinemaxTextField(
     singleLine: Boolean = true,
     shape: Shape = CinemaxTheme.shapes.extraMedium,
     colors: TextFieldColors = TextFieldDefaults.textFieldColors(
-        textColor = CinemaxTheme.colors.white,
-        cursorColor = CinemaxTheme.colors.primaryBlue,
+        textColor = CinemaxTheme.colors.textPrimary,
+        cursorColor = CinemaxTheme.colors.accent,
         selectionColors = TextSelectionColors(
-            handleColor = CinemaxTheme.colors.primaryBlue,
-            backgroundColor = CinemaxTheme.colors.primaryBlue.copy(
+            handleColor = CinemaxTheme.colors.accent,
+            backgroundColor = CinemaxTheme.colors.accent.copy(
                 alpha = TextSelectionColorsBackgroundColorAlpha
             )
         ),
-        containerColor = CinemaxTheme.colors.primarySoft,
-        focusedLeadingIconColor = CinemaxTheme.colors.grey,
-        unfocusedLeadingIconColor = CinemaxTheme.colors.grey,
-        focusedTrailingIconColor = CinemaxTheme.colors.grey,
-        unfocusedTrailingIconColor = CinemaxTheme.colors.grey,
-        placeholderColor = CinemaxTheme.colors.grey,
+        containerColor = CinemaxTheme.colors.primaryVariant,
+        focusedLeadingIconColor = CinemaxTheme.colors.textSecondary,
+        unfocusedLeadingIconColor = CinemaxTheme.colors.textSecondary,
+        focusedTrailingIconColor = CinemaxTheme.colors.textSecondary,
+        unfocusedTrailingIconColor = CinemaxTheme.colors.textSecondary,
+        placeholderColor = CinemaxTheme.colors.textSecondary,
         focusedIndicatorColor = Color.Transparent,
         unfocusedIndicatorColor = Color.Transparent
     )

core/core-designsystem/src/main/kotlin/com/maximillianleonov/cinemax/core/designsystem/component/TopAppBar.kt

@@ -40,9 +40,9 @@ fun CinemaxTopAppBar(
     actions: @Composable RowScope.() -> Unit = {},
     windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
     colors: TopAppBarColors = TopAppBarDefaults.centerAlignedTopAppBarColors(
-        containerColor = CinemaxTheme.colors.primaryDark,
-        titleContentColor = CinemaxTheme.colors.white,
-        navigationIconContentColor = CinemaxTheme.colors.white
+        containerColor = CinemaxTheme.colors.primary,
+        titleContentColor = CinemaxTheme.colors.textPrimary,
+        navigationIconContentColor = CinemaxTheme.colors.textPrimary
     )
 ) {
     CenterAlignedTopAppBar(
@@ -70,7 +70,7 @@ fun CinemaxTopAppBar(
             Text(
                 text = stringResource(id = titleResourceId),
                 style = CinemaxTheme.typography.semiBold.h4,
-                color = CinemaxTheme.colors.white,
+                color = CinemaxTheme.colors.textPrimary,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis
             )

core/core-designsystem/src/main/kotlin/com/maximillianleonov/cinemax/core/designsystem/theme/Color.kt

@@ -17,45 +17,94 @@
 package com.maximillianleonov.cinemax.core.designsystem.theme
 
 import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
 
-private val Dark = Color(0xFF1F1D2B)
-private val Soft = Color(0xFF252836)
-private val BlueAccent = Color(0xFF12CDD9)
-private val Green = Color(0xFF22B07D)
-private val Orange = Color(0xFFFF8700)
-private val Red = Color(0xFFFB4141)
-private val Black = Color(0xFF171725)
-private val Grey = Color(0xFF92929D)
-private val DarkGrey = Color(0xFF696974)
-private val White = Color(0xFFFFFFFF)
-private val WhiteGrey = Color(0xFFEBEBEF)
-private val LineDark = Color(0xFFEAEAEA)
+private val LightPrimary = Color(0xFFDFD8FF)
+private val LightPrimaryVariant = Color(0xFFD1C4E9)
+private val LightAccent = Color(0xFF441EEC)
+private val LightSecondary = Color(0xFF00993F)
+private val LightSecondaryVariant = Color(0xFFE06000)
+private val LightError = Color(0xFFB80000)
+private val LightTextPrimary = Color(0xFF0E0D0D)
+private val LightTextPrimaryVariant = Color(0xFF272727)
+private val LightTextSecondary = Color(0xFF4F4F53)
+
+private val DarkPrimary = Color(0xFF1F1D2B)
+private val DarkPrimaryVariant = Color(0xFF252836)
+private val DarkAccent = Color(0xFF12CDD9)
+private val DarkSecondary = Color(0xFF22B07D)
+private val DarkSecondaryVariant = Color(0xFFFF8700)
+private val DarkError = Color(0xFFFB4141)
+private val DarkTextPrimary = Color(0xFFFFFBFF)
+private val DarkTextPrimaryVariant = Color(0xFFEBEBEF)
+private val DarkTextSecondary = Color(0xFF92929D)
+
+private val TextOnMedia = Color(0xFFFFFBFF)
+private val TextOnMediaVariant = Color(0xFFEBEBEF)
+
+internal val LightColorScheme = lightColorScheme(
+    primary = LightPrimary,
+    secondary = LightPrimaryVariant,
+    background = LightPrimary,
+    surface = LightPrimary
+)
 
 internal val DarkColorScheme = darkColorScheme(
-    primary = Dark,
-    secondary = Soft,
-    background = Dark,
-    surface = Dark
+    primary = DarkPrimary,
+    secondary = DarkPrimaryVariant,
+    background = DarkPrimary,
+    surface = DarkPrimary
 )
 
 @Immutable
 data class CinemaxColors(
     val default: Color = Color.Unspecified,
-    val primaryDark: Color = Dark,
-    val primarySoft: Color = Soft,
-    val primaryBlue: Color = BlueAccent,
-    val secondaryGreen: Color = Green,
-    val secondaryOrange: Color = Orange,
-    val secondaryRed: Color = Red,
-    val white: Color = White,
-    val whiteGrey: Color = WhiteGrey,
-    val black: Color = Black,
-    val grey: Color = Grey,
-    val darkGrey: Color = DarkGrey,
-    val lineDark: Color = LineDark
+    val primary: Color,
+    val primaryVariant: Color,
+    val accent: Color,
+    val secondary: Color,
+    val secondaryVariant: Color,
+    val error: Color,
+    val textPrimary: Color,
+    val textPrimaryVariant: Color,
+    val textSecondary: Color,
+    val textOnMedia: Color,
+    val textOnMediaVariant: Color
 )
 
-internal val LocalCinemaxColors = staticCompositionLocalOf { CinemaxColors() }
+internal val LightCinemaxColors = CinemaxColors(
+    primary = LightPrimary,
+    primaryVariant = LightPrimaryVariant,
+    accent = LightAccent,
+    secondary = LightSecondary,
+    secondaryVariant = LightSecondaryVariant,
+    error = LightError,
+    textPrimary = LightTextPrimary,
+    textPrimaryVariant = LightTextPrimaryVariant,
+    textSecondary = LightTextSecondary,
+    textOnMedia = TextOnMedia,
+    textOnMediaVariant = TextOnMediaVariant
+)
+
+internal val DarkCinemaxColors = CinemaxColors(
+    primary = DarkPrimary,
+    primaryVariant = DarkPrimaryVariant,
+    accent = DarkAccent,
+    secondary = DarkSecondary,
+    secondaryVariant = DarkSecondaryVariant,
+    error = DarkError,
+    textPrimary = DarkTextPrimary,
+    textPrimaryVariant = DarkTextPrimaryVariant,
+    textSecondary = DarkTextSecondary,
+    textOnMedia = TextOnMedia,
+    textOnMediaVariant = TextOnMediaVariant
+)
+
+internal val LocalCinemaxColors = staticCompositionLocalOf<CinemaxColors> {
+    error(LocalCinemaxColorsErrorMessage)
+}
+
+private const val LocalCinemaxColorsErrorMessage = "No CinemaxColors provided."

core/core-designsystem/src/main/kotlin/com/maximillianleonov/cinemax/core/designsystem/theme/Ripple.kt

@@ -42,8 +42,7 @@ internal fun rememberCinemaxRipple(
     color: Color = RippleColor
 ) = rememberRipple(bounded = bounded, radius = radius, color = color)
 
-private val RippleColor: Color
-    @Composable get() = CinemaxTheme.colors.primaryBlue
+private val RippleColor @Composable get() = CinemaxTheme.colors.accent
 
 private val RippleAlpha = RippleAlpha(
     draggedAlpha = 0.16f,