feat: adding theme switcher

gitsindonesia · Nov 17, 2022 · 4c2e78c · 4c2e78c
1 parent a675818
commit 4c2e78c
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 54 deletions.
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -12,6 +12,7 @@
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
+        android:name=".example.GitsApplication"
         android:theme="@style/Theme.GitsAndroidCompose"
         tools:targetApi="31">
         <activity

diff --git a/app/src/main/java/id/gits/android_compose/MainActivity.kt b/app/src/main/java/id/gits/android_compose/MainActivity.kt
@@ -11,24 +11,36 @@ import androidx.compose.material.Text
 import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ArrowBack
+import androidx.compose.material.icons.outlined.Face
+import androidx.compose.material.icons.outlined.Settings
+import androidx.compose.material.icons.rounded.Settings
+import androidx.compose.material.icons.rounded.ThumbUp
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
+import id.gits.android_compose.example.GitsApplication
 import id.gits.android_compose.example.Index
-import id.gits.ui_compose.compose.GitsScaffold
 import id.gits.ui_compose.component.CardItem
 import id.gits.ui_compose.component.CardItemComponent
+import id.gits.ui_compose.compose.GitsScaffold
+import id.gits.ui_compose.compose.GitsScheme
 import id.gits.ui_compose.compose.rememberGitsAppState
 
 class MainActivity : ComponentActivity() {
+
+    private val gitsApplication
+        get() = (application as GitsApplication)
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
             val gitsAppState = rememberGitsAppState()
             var title by remember { mutableStateOf("Gits Component") }
+            var isOnPrimaryTheme by remember { mutableStateOf(true) }
+            var enableDarkTheme by remember { mutableStateOf(false) }
 
             LaunchedEffect(gitsAppState.navController) {
                 gitsAppState.navController.currentBackStackEntryFlow.collect { backStackEntry ->
@@ -53,7 +65,23 @@ class MainActivity : ComponentActivity() {
                                 }
                             }
                         },
-                        title = { Text(text = title) }
+                        title = { Text(text = title) },
+                        actions = {
+                            IconButton(onClick = {
+                                enableDarkTheme = !enableDarkTheme
+                                GitsScheme.enableDarkTheme.value = enableDarkTheme
+                            }) {
+                                Icon(imageVector = Icons.Outlined.Settings, contentDescription = null)
+                            }
+                            IconButton(onClick = {
+                                GitsScheme.colorScheme.value =
+                                    if (isOnPrimaryTheme) gitsApplication.secondaryTheme
+                                    else gitsApplication.primaryTheme
+                                isOnPrimaryTheme = !isOnPrimaryTheme
+                            }) {
+                                Icon(imageVector = Icons.Outlined.Face, contentDescription = null)
+                            }
+                        }
                     )
                 }
             ) {

diff --git a/app/src/main/java/id/gits/android_compose/example/GitsApplication.kt b/app/src/main/java/id/gits/android_compose/example/GitsApplication.kt
@@ -0,0 +1,31 @@
+package id.gits.android_compose.example
+
+import android.app.Application
+import androidx.compose.ui.graphics.Color
+import id.gits.ui_compose.compose.GitsColor
+
+/**
+ * Created by Kudzoza
+ * on 15/11/2022
+ **/
+
+class GitsApplication : Application() {
+
+    val primaryTheme = GitsColor()
+
+    val secondaryTheme = GitsColor(
+        primary = Color(0xFF32EB4B),
+        primaryVariant = Color(0xFF189B29),
+        secondary = Color(0xFF14A9EE),
+        secondaryVariant = Color(0xFF1875A0),
+        textPrimary = Color(0xFF555555),
+        textSecondary = Color(0xFF888888),
+        background = Color(0xFFFFFFFF),
+        error = Color(0xFFE91E63),
+    )
+
+    override fun onCreate() {
+        super.onCreate()
+    }
+
+}
diff --git a/gits/ui-compose/src/main/java/id/gits/ui_compose/compose/GitsColor.kt b/gits/ui-compose/src/main/java/id/gits/ui_compose/compose/GitsColor.kt
@@ -3,7 +3,6 @@ package id.gits.ui_compose.compose
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
-import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
 
 /**
@@ -14,6 +13,7 @@ import androidx.compose.ui.graphics.Color
 private val colorPrimary = Color(0xFF00B7FF)
 private val colorPrimaryVariant = Color(0xFF0689BD)
 private val colorSecondary = Color(0xFFF38558)
+private val colorSecondaryVariant = Color(0xFFD1511D)
 private val colorTextPrimary = Color(0xFF555555)
 private val colorTextSecondary = Color(0xFF888888)
 private val colorBackground = Color(0xFFFFFFFF)
@@ -23,6 +23,7 @@ class GitsColor(
     primary: Color = colorPrimary,
     primaryVariant: Color = colorPrimaryVariant,
     secondary: Color = colorSecondary,
+    secondaryVariant: Color = colorSecondaryVariant,
     textPrimary: Color = colorTextPrimary,
     textSecondary: Color = colorTextSecondary,
     background: Color = colorBackground,
@@ -37,6 +38,9 @@ class GitsColor(
     var secondary by mutableStateOf(secondary)
         private set
 
+    var secondaryVariant by mutableStateOf(secondaryVariant)
+        private set
+
     var textPrimary by mutableStateOf(textPrimary)
         private set
 
@@ -53,6 +57,7 @@ class GitsColor(
         primary: Color = this.primary,
         primaryVariant: Color = this.primaryVariant,
         secondary: Color = this.secondary,
+        secondaryVariant: Color = this.secondaryVariant,
         textPrimary: Color = this.textPrimary,
         textSecondary: Color = this.textSecondary,
         background: Color = this.background,
@@ -61,11 +66,10 @@ class GitsColor(
         primary,
         primaryVariant,
         secondary,
+        secondaryVariant,
         textPrimary,
         textSecondary,
         background,
         error
     )
-}
-
-internal val GitsLocalColors = staticCompositionLocalOf { GitsColor() }
+}
diff --git a/gits/ui-compose/src/main/java/id/gits/ui_compose/compose/GitsScaffold.kt b/gits/ui-compose/src/main/java/id/gits/ui_compose/compose/GitsScaffold.kt
@@ -37,9 +37,7 @@ fun GitsScaffold(
     contentColor: Color = contentColorFor(backgroundColor),
     content: @Composable (GitsAppState) -> Unit,
 ) {
-    val systemUiController = rememberSystemUiController()
     GitsTheme {
-        systemUiController.setSystemBarsColor(Color.White)
         Surface {
             Scaffold(
                 modifier = modifier,

diff --git a/gits/ui-compose/src/main/java/id/gits/ui_compose/compose/GitsScheme.kt b/gits/ui-compose/src/main/java/id/gits/ui_compose/compose/GitsScheme.kt
@@ -0,0 +1,17 @@
+package id.gits.ui_compose.compose
+
+import androidx.compose.runtime.mutableStateOf
+
+/**
+ * Created by Kudzoza
+ * on 18/11/2022
+ **/
+
+object GitsScheme {
+
+    val colorScheme = mutableStateOf(GitsColor())
+    val dimensionScheme = mutableStateOf(GitsDimension())
+    val typographyScheme = mutableStateOf(GitsTypography())
+    val enableDarkTheme = mutableStateOf(false)
+
+}
diff --git a/gits/ui-compose/src/main/java/id/gits/ui_compose/compose/GitsTheme.kt b/gits/ui-compose/src/main/java/id/gits/ui_compose/compose/GitsTheme.kt
@@ -5,56 +5,39 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.darkColors
 import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.ReadOnlyComposable
-import androidx.compose.runtime.remember
+import androidx.compose.ui.graphics.Color
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
 
 /**
  * Created by Kudzoza
  * on 12/09/2022
  **/
 
-object GitsAppTheme {
-    val colors: GitsColor
-        @Composable
-        @ReadOnlyComposable
-        get() = GitsLocalColors.current
-    val typography: GitsTypography
-        @Composable
-        @ReadOnlyComposable
-        get() = GitsLocalTypography.current
-    val dimensions: GitsDimension
-        @Composable
-        @ReadOnlyComposable
-        get() = GitsLocalDimension.current
-}
-
 @Composable
-fun GitsTheme(
-    colors: GitsColor = GitsAppTheme.colors,
-    typography: GitsTypography = GitsAppTheme.typography,
-    dimensions: GitsDimension = GitsAppTheme.dimensions,
-    enableDarkTheme: Boolean = false,
-    content: @Composable () -> Unit,
-) {
-    val rememberedColors = remember { colors.copy() }
-    CompositionLocalProvider(
-        GitsLocalColors provides rememberedColors,
-        GitsLocalDimension provides dimensions,
-        GitsLocalTypography provides typography
+fun GitsTheme(content: @Composable () -> Unit) {
+    val systemUiController = rememberSystemUiController()
+    systemUiController.setSystemBarsColor(
+        if (isSystemInDarkTheme() && GitsScheme.enableDarkTheme.value) Color.DarkGray
+        else Color.White
+    )
+    MaterialTheme(
+        colors = if (isSystemInDarkTheme() && GitsScheme.enableDarkTheme.value) darkColors(
+            primary = GitsScheme.colorScheme.value.primary,
+            primaryVariant = GitsScheme.colorScheme.value.primaryVariant,
+            secondary = GitsScheme.colorScheme.value.secondary,
+            secondaryVariant = GitsScheme.colorScheme.value.secondaryVariant,
+            background = GitsScheme.colorScheme.value.background,
+            error = GitsScheme.colorScheme.value.error,
+        )
+        else lightColors(
+            primary = GitsScheme.colorScheme.value.primary,
+            primaryVariant = GitsScheme.colorScheme.value.primaryVariant,
+            secondary = GitsScheme.colorScheme.value.secondary,
+            secondaryVariant = GitsScheme.colorScheme.value.secondaryVariant,
+            background = GitsScheme.colorScheme.value.background,
+            error = GitsScheme.colorScheme.value.error,
+        )
     ) {
-        MaterialTheme(
-            colors =
-            if (isSystemInDarkTheme() && enableDarkTheme) darkColors()
-            else lightColors(
-                primary = colors.primary,
-                primaryVariant = colors.primaryVariant,
-                secondary = colors.secondary,
-                background = colors.background,
-                error = colors.error,
-            )
-        ) {
-            content()
-        }
+        content()
     }
 }
diff --git a/gits/ui-compose/src/main/java/id/gits/ui_compose/compose/GitsTypography.kt b/gits/ui-compose/src/main/java/id/gits/ui_compose/compose/GitsTypography.kt
@@ -45,6 +45,4 @@ data class GitsTypography(
         fontWeight = FontWeight.Normal,
         fontSize = 12.sp
     ),
-)
-
-internal val GitsLocalTypography = staticCompositionLocalOf { GitsTypography() }
+)