Theming & Design - TecNM Control Escolar

The TecNM Control Escolar app uses Material Design 3 (Material You) for its design system, providing adaptive theming, dynamic colors, and modern UI components.

Color Palette

The app defines a custom color palette that includes TecNM branding colors:

Color.kt

package com.example.appcontrolescolar.ui.theme

import androidx.compose.ui.graphics.Color

val Purple80 = Color(0xFFD0BCFF)
val PurpleGrey80 = Color(0xFFCCC2DC)
val Pink80 = Color(0xFFEFB8C8)

val Purple40 = Color(0xFF6650a4)
val PurpleGrey40 = Color(0xFF625b71)
val Pink40 = Color(0xFF7D5260)

val TecBlue = Color(0xFF1B396A)
val TecGold = Color(0xFFB8860B)

Brand Colors

TecBlue

#1B396A - Official TecNM blue for primary branding

TecGold

#B8860B - Official TecNM gold for accents and highlights

Material 3 Palette

The app includes Material 3’s default color palette for light and dark themes:

Color	Light (40)	Dark (80)	Usage
Purple	`#6650a4`	`#D0BCFF`	Primary theme color
Purple Grey	`#625b71`	`#CCC2DC`	Secondary theme color
Pink	`#7D5260`	`#EFB8C8`	Tertiary theme color

The number suffix (40/80) refers to the tone value in Material 3’s tonal palette system. 40-tone colors are used for light themes, while 80-tone colors are used for dark themes.

Theme Configuration

The main theme is defined in Theme.kt with support for light/dark modes and dynamic colors:

Theme.kt

package com.example.appcontrolescolar.ui.theme

import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40

    /* Other default colors to override
    background = Color(0xFFFFFBFE),
    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),
    */
)

@Composable
fun AppControlEscolarTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

Color Schemes

Light Color Scheme

Used when the system is in light mode or when dark theme is disabled:

Primary: Purple40 (#6650a4)
Secondary: PurpleGrey40 (#625b71)
Tertiary: Pink40 (#7D5260)

Dark Color Scheme

Used when the system is in dark mode:

Primary: Purple80 (#D0BCFF)
Secondary: PurpleGrey80 (#CCC2DC)
Tertiary: Pink80 (#EFB8C8)

Dynamic Color Scheme

On Android 12+ devices with dynamicColor = true, the app adapts to the user’s wallpaper colors using Material You’s dynamic theming.

Theme Parameters

darkTheme

Boolean

default:"isSystemInDarkTheme()"

Controls whether to use dark or light color scheme. Defaults to following system preference.

dynamicColor

Boolean

default:"true"

Enables Material You dynamic colors on Android 12+ devices. When enabled, colors adapt to the user’s wallpaper.

content

@Composable () -> Unit

required

The app content to be themed

Typography

The app uses Material 3’s default typography system with customizable text styles:

Type.kt

package com.example.appcontrolescolar.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

// Set of Material typography styles to start with
val Typography = Typography(
    bodyLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp
    )
    /* Other default text styles to override
    titleLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 22.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.sp
    ),
    labelSmall = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Medium,
        fontSize = 11.sp,
        lineHeight = 16.sp,
        letterSpacing = 0.5.sp
    )
    */
)

Typography Scale

Material 3 provides a comprehensive typography scale:

Style	Size	Weight	Usage
displayLarge	57sp	Regular	Large hero text
displayMedium	45sp	Regular	Medium hero text
displaySmall	36sp	Regular	Small hero text
headlineLarge	32sp	Regular	Large headings
headlineMedium	28sp	Regular	Medium headings
headlineSmall	24sp	Regular	Small headings
titleLarge	22sp	Regular	Large titles
titleMedium	16sp	Medium	Medium titles
titleSmall	14sp	Medium	Small titles
bodyLarge	16sp	Regular	Large body text (customized)
bodyMedium	14sp	Regular	Medium body text
bodySmall	12sp	Regular	Small body text
labelLarge	14sp	Medium	Large labels
labelMedium	12sp	Medium	Medium labels
labelSmall	11sp	Medium	Small labels

Theme Usage

The theme is applied at the root of the app in MainActivity:

MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        setContent {
            AppControlEscolarTheme {
                AppNavigation()
            }
        }
    }
}

Accessing Theme Colors

Access theme colors in composables using MaterialTheme.colorScheme:

@Composable
fun MyComponent() {
    Surface(
        color = MaterialTheme.colorScheme.primary
    ) {
        Text(
            text = "Hello",
            color = MaterialTheme.colorScheme.onPrimary
        )
    }
}

Accessing Typography

Access typography styles using MaterialTheme.typography:

@Composable
fun MyComponent() {
    Text(
        text = "Title",
        style = MaterialTheme.typography.titleLarge
    )
    Text(
        text = "Body text",
        style = MaterialTheme.typography.bodyLarge
    )
}

Material Design 3 Features

Dynamic Color

Adapts to user’s wallpaper on Android 12+ for personalized theming

Tonal Palettes

Uses tonal color system for consistent, accessible color relationships

Dark Theme

Automatic dark mode support with proper contrast and readability

Accessibility

Built-in WCAG contrast ratios for all color combinations

Customization Guide

Adding Custom Colors

To add new brand colors:

Define Colors

Add color values to Color.kt:

val CustomColor = Color(0xFF123456)

Update Color Schemes

Optionally add to color schemes in Theme.kt:

private val LightColorScheme = lightColorScheme(
    primary = CustomColor,
    // ...
)

Use in Composables

Access via MaterialTheme or use directly:

Surface(color = MaterialTheme.colorScheme.primary)
// or
Surface(color = TecBlue)

Customizing Typography

To add custom fonts:

Add Font Files

Place font files in res/font/ directory

Create FontFamily

Define the font family:

val TecFont = FontFamily(
    Font(R.font.custom_font_regular),
    Font(R.font.custom_font_bold, FontWeight.Bold)
)

Update Typography

Apply to typography styles:

val Typography = Typography(
    bodyLarge = TextStyle(
        fontFamily = TecFont,
        // ...
    )
)

Best Practices

Always use theme colors and typography instead of hardcoded values. This ensures consistency, accessibility, and proper dark mode support.

Do

Text(
    text = "Hello",
    color = MaterialTheme.colorScheme.primary,
    style = MaterialTheme.typography.bodyLarge
)

Don't

Text(
    text = "Hello",
    color = Color(0xFF6650a4),
    fontSize = 16.sp
)

Future Enhancements

Apply TecBlue and TecGold as primary brand colors in color schemes
Add custom font family matching TecNM branding
Implement color variants for different states (pressed, disabled, etc.)
Add semantic color tokens for specific use cases (success, error, warning)

Documentation Index

​Color Palette

​Brand Colors

TecBlue

TecGold

​Material 3 Palette

​Theme Configuration

​Color Schemes

​Theme Parameters

​Typography

​Typography Scale

​Theme Usage

​Accessing Theme Colors

​Accessing Typography

​Material Design 3 Features

Dynamic Color

Tonal Palettes

Dark Theme

Accessibility

​Customization Guide

​Adding Custom Colors

​Customizing Typography

​Best Practices

Do

Don't

​Future Enhancements

Color Palette

Brand Colors

Material 3 Palette

Theme Configuration

Color Schemes

Theme Parameters

Typography

Typography Scale

Theme Usage

Accessing Theme Colors

Accessing Typography

Material Design 3 Features

Customization Guide

Adding Custom Colors

Customizing Typography

Best Practices

Future Enhancements