#1 - Styling and theming your app

Jikdroid · Jan 22, 2023 · 01f31e0 · 01f31e0
1 parent 42844a6
commit 01f31e0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/Basics_Codelab/app/src/main/java/jik/compose/basicscodelab/MainActivity.kt b/Basics_Codelab/app/src/main/java/jik/compose/basicscodelab/MainActivity.kt
@@ -1,5 +1,6 @@
 package jik.compose.basicscodelab
 
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
@@ -14,6 +15,7 @@ import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import jik.compose.basicscodelab.ui.theme.BasicsCodelabTheme
@@ -91,7 +93,17 @@ private fun Greetings(
     }
 }
 
-@Preview(showBackground = true, widthDp = 320)
+
+@Preview(
+    showBackground = true,
+    widthDp = 320,
+    uiMode = UI_MODE_NIGHT_YES,
+    name = "Dark"
+)
+@Preview(
+    showBackground = true,
+    widthDp = 320
+)
 @Composable
 fun GreetingsPreview() {
     BasicsCodelabTheme {
@@ -122,7 +134,11 @@ fun Greeting(name: String) {
                     .padding(bottom = extraPadding.coerceAtLeast(0.dp))
             ) {
                 Text(text = "Hello,")
-                Text(text = name)
+                Text(
+                    text = name, style = MaterialTheme.typography.headlineMedium.copy(
+                        fontWeight = FontWeight.Bold
+                    )
+                )
             }
             ElevatedButton(onClick = { expanded = expanded.not() }) {
                 Text(if (expanded) "Show less" else "Show more")

diff --git a/Basics_Codelab/app/src/main/java/jik/compose/basicscodelab/ui/theme/Color.kt b/Basics_Codelab/app/src/main/java/jik/compose/basicscodelab/ui/theme/Color.kt
@@ -8,4 +8,10 @@ val Pink80 = Color(0xFFEFB8C8)
 
 val Purple40 = Color(0xFF6650a4)
 val PurpleGrey40 = Color(0xFF625b71)
-val Pink40 = Color(0xFF7D5260)
+val Pink40 = Color(0xFF7D5260)
+
+
+val Navy = Color(0xFF073042)
+val Blue = Color(0xFF4285F4)
+val LightBlue = Color(0xFFD7EFFE)
+val Chartreuse = Color(0xFFEFF7CF)
diff --git a/Basics_Codelab/app/src/main/java/jik/compose/basicscodelab/ui/theme/Theme.kt b/Basics_Codelab/app/src/main/java/jik/compose/basicscodelab/ui/theme/Theme.kt
@@ -10,21 +10,24 @@ import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.core.view.ViewCompat
 
 private val DarkColorScheme = darkColorScheme(
-    primary = Purple80,
-    secondary = PurpleGrey80,
-    tertiary = Pink80
+    surface = Blue,
+    onSurface = Navy,
+    primary = Navy,
+    onPrimary = Chartreuse
 )
 
 private val LightColorScheme = lightColorScheme(
-    primary = Purple40,
-    secondary = PurpleGrey40,
-    tertiary = Pink40
+    surface = Blue,
+    onSurface = Color.White,
+    primary = LightBlue,
+    onPrimary = Navy
 
     /* Other default colors to override
     background = Color(0xFFFFFBFE),