app: add Material3 themes

This commit is contained in:
Harsh Shandilya 2021-11-01 01:47:34 +05:30
parent 494cb5fc4f
commit 0834c979a5
No known key found for this signature in database
GPG key ID: 366D7BBAD1031E80
8 changed files with 403 additions and 0 deletions

View file

@ -92,6 +92,7 @@ dependencies {
implementation(libs.compose.foundation.core)
implementation(libs.compose.foundation.layout)
implementation(libs.compose.material)
implementation(libs.compose.material3)
implementation(libs.compose.ui.core)
implementation(libs.compose.ui.viewbinding)
compileOnly(libs.compose.ui.tooling)

View file

@ -0,0 +1,58 @@
package dev.msfjarvis.aps.ui.theme
import androidx.compose.ui.graphics.Color
val md_theme_light_primary = Color(0xFF006591)
val md_theme_light_onPrimary = Color(0xFFffffff)
val md_theme_light_primaryContainer = Color(0xFFc7e6ff)
val md_theme_light_onPrimaryContainer = Color(0xFF001e30)
val md_theme_light_secondary = Color(0xFF4f606e)
val md_theme_light_onSecondary = Color(0xFFffffff)
val md_theme_light_secondaryContainer = Color(0xFFd3e5f5)
val md_theme_light_onSecondaryContainer = Color(0xFF0b1d29)
val md_theme_light_tertiary = Color(0xFF006494)
val md_theme_light_onTertiary = Color(0xFFffffff)
val md_theme_light_tertiaryContainer = Color(0xFFc8e6ff)
val md_theme_light_onTertiaryContainer = Color(0xFF001e31)
val md_theme_light_error = Color(0xFFba1b1b)
val md_theme_light_errorContainer = Color(0xFFffdad4)
val md_theme_light_onError = Color(0xFFffffff)
val md_theme_light_onErrorContainer = Color(0xFF410001)
val md_theme_light_background = Color(0xFFfcfcff)
val md_theme_light_onBackground = Color(0xFF1a1c1e)
val md_theme_light_surface = Color(0xFFfcfcff)
val md_theme_light_onSurface = Color(0xFF1a1c1e)
val md_theme_light_surfaceVariant = Color(0xFFdde3ea)
val md_theme_light_onSurfaceVariant = Color(0xFF41474d)
val md_theme_light_outline = Color(0xFF72787e)
val md_theme_light_inverseOnSurface = Color(0xFFf0f0f3)
val md_theme_light_inverseSurface = Color(0xFF2e3133)
val md_theme_dark_primary = Color(0xFF85ceff)
val md_theme_dark_onPrimary = Color(0xFF00344e)
val md_theme_dark_primaryContainer = Color(0xFF004c6f)
val md_theme_dark_onPrimaryContainer = Color(0xFFc7e6ff)
val md_theme_dark_secondary = Color(0xFFb7c9d9)
val md_theme_dark_onSecondary = Color(0xFF21323e)
val md_theme_dark_secondaryContainer = Color(0xFF384956)
val md_theme_dark_onSecondaryContainer = Color(0xFFd3e5f5)
val md_theme_dark_tertiary = Color(0xFF8aceff)
val md_theme_dark_onTertiary = Color(0xFF003450)
val md_theme_dark_tertiaryContainer = Color(0xFF004b70)
val md_theme_dark_onTertiaryContainer = Color(0xFFc8e6ff)
val md_theme_dark_error = Color(0xFFffb4a9)
val md_theme_dark_errorContainer = Color(0xFF930006)
val md_theme_dark_onError = Color(0xFF680003)
val md_theme_dark_onErrorContainer = Color(0xFFffdad4)
val md_theme_dark_background = Color(0xFF1a1c1e)
val md_theme_dark_onBackground = Color(0xFFe1e2e5)
val md_theme_dark_surface = Color(0xFF1a1c1e)
val md_theme_dark_onSurface = Color(0xFFe1e2e5)
val md_theme_dark_surfaceVariant = Color(0xFF41474d)
val md_theme_dark_onSurfaceVariant = Color(0xFFc1c7ce)
val md_theme_dark_outline = Color(0xFF8b9197)
val md_theme_dark_inverseOnSurface = Color(0xFF1a1c1e)
val md_theme_dark_inverseSurface = Color(0xFFe1e2e5)
val seed = Color(0xFF003e5b)
val error = Color(0xFFba1b1b)

View file

@ -0,0 +1,76 @@
package dev.msfjarvis.aps.ui.theme
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
private val LightThemeColors =
lightColorScheme(
primary = md_theme_light_primary,
onPrimary = md_theme_light_onPrimary,
primaryContainer = md_theme_light_primaryContainer,
onPrimaryContainer = md_theme_light_onPrimaryContainer,
secondary = md_theme_light_secondary,
onSecondary = md_theme_light_onSecondary,
secondaryContainer = md_theme_light_secondaryContainer,
onSecondaryContainer = md_theme_light_onSecondaryContainer,
tertiary = md_theme_light_tertiary,
onTertiary = md_theme_light_onTertiary,
tertiaryContainer = md_theme_light_tertiaryContainer,
onTertiaryContainer = md_theme_light_onTertiaryContainer,
error = md_theme_light_error,
errorContainer = md_theme_light_errorContainer,
onError = md_theme_light_onError,
onErrorContainer = md_theme_light_onErrorContainer,
background = md_theme_light_background,
onBackground = md_theme_light_onBackground,
surface = md_theme_light_surface,
onSurface = md_theme_light_onSurface,
surfaceVariant = md_theme_light_surfaceVariant,
onSurfaceVariant = md_theme_light_onSurfaceVariant,
outline = md_theme_light_outline,
inverseOnSurface = md_theme_light_inverseOnSurface,
inverseSurface = md_theme_light_inverseSurface,
)
private val DarkThemeColors =
darkColorScheme(
primary = md_theme_dark_primary,
onPrimary = md_theme_dark_onPrimary,
primaryContainer = md_theme_dark_primaryContainer,
onPrimaryContainer = md_theme_dark_onPrimaryContainer,
secondary = md_theme_dark_secondary,
onSecondary = md_theme_dark_onSecondary,
secondaryContainer = md_theme_dark_secondaryContainer,
onSecondaryContainer = md_theme_dark_onSecondaryContainer,
tertiary = md_theme_dark_tertiary,
onTertiary = md_theme_dark_onTertiary,
tertiaryContainer = md_theme_dark_tertiaryContainer,
onTertiaryContainer = md_theme_dark_onTertiaryContainer,
error = md_theme_dark_error,
errorContainer = md_theme_dark_errorContainer,
onError = md_theme_dark_onError,
onErrorContainer = md_theme_dark_onErrorContainer,
background = md_theme_dark_background,
onBackground = md_theme_dark_onBackground,
surface = md_theme_dark_surface,
onSurface = md_theme_dark_onSurface,
surfaceVariant = md_theme_dark_surfaceVariant,
onSurfaceVariant = md_theme_dark_onSurfaceVariant,
outline = md_theme_dark_outline,
inverseOnSurface = md_theme_dark_inverseOnSurface,
inverseSurface = md_theme_dark_inverseSurface,
)
@Composable
fun APSTheme(useDarkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
val colors =
if (!useDarkTheme) {
LightThemeColors
} else {
DarkThemeColors
}
MaterialTheme(colorScheme = colors, typography = AppTypography, content = content)
}

View file

@ -0,0 +1,134 @@
package dev.msfjarvis.aps.ui.theme
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
// Replace with your font locations
val Roboto = FontFamily.Default
val AppTypography =
Typography(
displayLarge =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.W400,
fontSize = 57.sp,
lineHeight = 64.sp,
letterSpacing = (-0.25).sp,
),
displayMedium =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.W400,
fontSize = 45.sp,
lineHeight = 52.sp,
letterSpacing = 0.sp,
),
displaySmall =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.W400,
fontSize = 36.sp,
lineHeight = 44.sp,
letterSpacing = 0.sp,
),
headlineLarge =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.W400,
fontSize = 32.sp,
lineHeight = 40.sp,
letterSpacing = 0.sp,
),
headlineMedium =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.W400,
fontSize = 28.sp,
lineHeight = 36.sp,
letterSpacing = 0.sp,
),
headlineSmall =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.W400,
fontSize = 24.sp,
lineHeight = 32.sp,
letterSpacing = 0.sp,
),
titleLarge =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.W400,
fontSize = 22.sp,
lineHeight = 28.sp,
letterSpacing = 0.sp,
),
titleMedium =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.Medium,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.1.sp,
),
titleSmall =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.Medium,
fontSize = 14.sp,
lineHeight = 20.sp,
letterSpacing = 0.1.sp,
),
labelLarge =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.Medium,
fontSize = 14.sp,
lineHeight = 20.sp,
letterSpacing = 0.1.sp,
),
bodyLarge =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.W400,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.5.sp,
),
bodyMedium =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.W400,
fontSize = 14.sp,
lineHeight = 20.sp,
letterSpacing = 0.25.sp,
),
bodySmall =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.W400,
fontSize = 12.sp,
lineHeight = 16.sp,
letterSpacing = 0.4.sp,
),
labelMedium =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.Medium,
fontSize = 12.sp,
lineHeight = 16.sp,
letterSpacing = 0.5.sp,
),
labelSmall =
TextStyle(
fontFamily = Roboto,
fontWeight = FontWeight.Medium,
fontSize = 11.sp,
lineHeight = 16.sp,
letterSpacing = 0.5.sp,
),
)

View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?><!--
~ Copyright © 2014-2021 The Android Password Store Authors. All Rights Reserved.
~ SPDX-License-Identifier: GPL-3.0-only
-->
<resources>
<style name="APSThemeM3" parent="Theme.Material3.DayNight">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorSecondary">@color/md_theme_dark_secondary</item>
<item name="colorOnSecondary">@color/md_theme_dark_onSecondary</item>
<item name="colorSecondaryContainer">@color/md_theme_dark_secondaryContainer</item>
<item name="colorOnSecondaryContainer">@color/md_theme_dark_onSecondaryContainer</item>
<item name="colorTertiary">@color/md_theme_dark_tertiary</item>
<item name="colorOnTertiary">@color/md_theme_dark_onTertiary</item>
<item name="colorTertiaryContainer">@color/md_theme_dark_tertiaryContainer</item>
<item name="colorOnTertiaryContainer">@color/md_theme_dark_onTertiaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="android:colorBackground">@color/md_theme_dark_background</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
<item name="colorSurfaceVariant">@color/md_theme_dark_surfaceVariant</item>
<item name="colorOnSurfaceVariant">@color/md_theme_dark_onSurfaceVariant</item>
<item name="colorOutline">@color/md_theme_dark_outline</item>
<item name="colorOnSurfaceInverse">@color/md_theme_dark_inverseOnSurface</item>
<item name="colorSurfaceInverse">@color/md_theme_dark_inverseSurface</item>
<item name="colorPrimaryInverse">@color/md_theme_dark_primaryInverse</item>
</style>
</resources>

View file

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="utf-8"?><!--
~ Copyright © 2014-2021 The Android Password Store Authors. All Rights Reserved.
~ SPDX-License-Identifier: GPL-3.0-only
-->
<resources>
<color name="md_theme_light_primary">#006591</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#C7E6FF</color>
<color name="md_theme_light_onPrimaryContainer">#001E30</color>
<color name="md_theme_light_secondary">#4F606E</color>
<color name="md_theme_light_onSecondary">#FFFFFF</color>
<color name="md_theme_light_secondaryContainer">#D3E5F5</color>
<color name="md_theme_light_onSecondaryContainer">#0B1D29</color>
<color name="md_theme_light_tertiary">#006494</color>
<color name="md_theme_light_onTertiary">#FFFFFF</color>
<color name="md_theme_light_tertiaryContainer">#C8E6FF</color>
<color name="md_theme_light_onTertiaryContainer">#001E31</color>
<color name="md_theme_light_error">#BA1B1B</color>
<color name="md_theme_light_errorContainer">#FFDAD4</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_onErrorContainer">#410001</color>
<color name="md_theme_light_background">#FCFCFF</color>
<color name="md_theme_light_onBackground">#1A1C1E</color>
<color name="md_theme_light_surface">#FCFCFF</color>
<color name="md_theme_light_onSurface">#1A1C1E</color>
<color name="md_theme_light_surfaceVariant">#DDE3EA</color>
<color name="md_theme_light_onSurfaceVariant">#41474D</color>
<color name="md_theme_light_outline">#72787E</color>
<color name="md_theme_light_inverseOnSurface">#F0F0F3</color>
<color name="md_theme_light_inverseSurface">#2E3133</color>
<color name="md_theme_light_primaryInverse">#85CEFF</color>
<color name="md_theme_dark_primary">#85CEFF</color>
<color name="md_theme_dark_onPrimary">#00344E</color>
<color name="md_theme_dark_primaryContainer">#004C6F</color>
<color name="md_theme_dark_onPrimaryContainer">#C7E6FF</color>
<color name="md_theme_dark_secondary">#B7C9D9</color>
<color name="md_theme_dark_onSecondary">#21323E</color>
<color name="md_theme_dark_secondaryContainer">#384956</color>
<color name="md_theme_dark_onSecondaryContainer">#D3E5F5</color>
<color name="md_theme_dark_tertiary">#8ACEFF</color>
<color name="md_theme_dark_onTertiary">#003450</color>
<color name="md_theme_dark_tertiaryContainer">#004B70</color>
<color name="md_theme_dark_onTertiaryContainer">#C8E6FF</color>
<color name="md_theme_dark_error">#FFB4A9</color>
<color name="md_theme_dark_errorContainer">#930006</color>
<color name="md_theme_dark_onError">#680003</color>
<color name="md_theme_dark_onErrorContainer">#FFDAD4</color>
<color name="md_theme_dark_background">#1A1C1E</color>
<color name="md_theme_dark_onBackground">#E1E2E5</color>
<color name="md_theme_dark_surface">#1A1C1E</color>
<color name="md_theme_dark_onSurface">#E1E2E5</color>
<color name="md_theme_dark_surfaceVariant">#41474D</color>
<color name="md_theme_dark_onSurfaceVariant">#C1C7CE</color>
<color name="md_theme_dark_outline">#8B9197</color>
<color name="md_theme_dark_inverseOnSurface">#1A1C1E</color>
<color name="md_theme_dark_inverseSurface">#E1E2E5</color>
<color name="md_theme_dark_primaryInverse">#006591</color>
<color name="seed">#003E5B</color>
<color name="error">#BA1B1B</color>
</resources>

View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?><!--
~ Copyright © 2014-2021 The Android Password Store Authors. All Rights Reserved.
~ SPDX-License-Identifier: GPL-3.0-only
-->
<resources>
<style name="APSThemeM3" parent="Theme.Material3.DayNight">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorSecondary">@color/md_theme_light_secondary</item>
<item name="colorOnSecondary">@color/md_theme_light_onSecondary</item>
<item name="colorSecondaryContainer">@color/md_theme_light_secondaryContainer</item>
<item name="colorOnSecondaryContainer">@color/md_theme_light_onSecondaryContainer</item>
<item name="colorTertiary">@color/md_theme_light_tertiary</item>
<item name="colorOnTertiary">@color/md_theme_light_onTertiary</item>
<item name="colorTertiaryContainer">@color/md_theme_light_tertiaryContainer</item>
<item name="colorOnTertiaryContainer">@color/md_theme_light_onTertiaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="android:colorBackground">@color/md_theme_light_background</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
<item name="colorSurfaceVariant">@color/md_theme_light_surfaceVariant</item>
<item name="colorOnSurfaceVariant">@color/md_theme_light_onSurfaceVariant</item>
<item name="colorOutline">@color/md_theme_light_outline</item>
<item name="colorOnSurfaceInverse">@color/md_theme_light_inverseOnSurface</item>
<item name="colorSurfaceInverse">@color/md_theme_light_inverseSurface</item>
<item name="colorPrimaryInverse">@color/md_theme_light_primaryInverse</item>
</style>
</resources>

View file

@ -44,6 +44,7 @@ compose-compiler = { module = "androidx.compose.compiler:compiler", version.ref
compose-foundation-core = { module = "androidx.compose.foundation:foundation", version.ref = "compose" }
compose-foundation-layout = { module = "androidx.compose.foundation:foundation-layout", version.ref = "compose" }
compose-material = { module = "androidx.compose.material:material", version.ref = "compose" }
compose-material3 = { module = "androidx.compose.material3:material3", version = "1.0.0-alpha01" }
compose-runtime = { module = "androidx.compose.runtime:runtime", version.ref = "compose" }
compose-ui-core = { module = "androidx.compose.ui:ui", version.ref = "compose" }
compose-ui-test = { module = "androidx.compose.ui:ui-test-junit4", version.ref = "compose" }