skills.rest
Bumh3rr
Bumh3rrCOMMUNITY
Explore all skills by this author →
GitHub

material-3-theming

Implements Material 3 theming conventions for Jetpack Compose with ColorScheme, Typography, and Shapes.

Updated May 9, 2026
Search Tags:#theming#dark mode#android#kotlin#jetpack compose#material 3#dynamic color
One-click install
npx skills add https://github.com/Bumh3rr/solvyx-app --skill material-3-theming-bumh3rr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-3-theming
Source: https://github.com/Bumh3rr/solvyx-app/tree/main/.opencode/skill/material-3-theming
Command: npx skills add https://github.com/Bumh3rr/solvyx-app --skill material-3-theming-bumh3rr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires androidx.compose.material3.

What problem does it solve? Android teams often end up with hardcoded colors, inconsistent typography, and mixed Material 2/Material 3 usage that breaks dark mode and brand identity. This Skill enforces a single, consistent Material 3 theming system for the Solvyx Compose project. ## Core Features & Use Cases - Semantic Color Schemes: Defines complete light and dark ColorScheme palettes using semantic tokens like primary, surface, and error instead of raw hex colors in Composables. - Typography and Shapes Standards: Provides a Nunito-based Typography scale and fixed RoundedCornerShape values accessed via MaterialTheme.typography and MaterialTheme.shapes. - Dynamic Color and Custom Tokens: Supports Android 12+ dynamic color behind a feature flag and extends the theme with Solvyx-specific tokens (SOS red, warning amber) via CompositionLocal. - Use Case: When building a new screen, wrap it in SolvyxTheme, style text with MaterialTheme.typography.headlineMedium, and color surfaces with MaterialTheme.colorScheme.surface so the UI works in both light and dark modes automatically. ## Quick Start Apply the Material 3 theming conventions from this skill to create or refactor the app's theme, colors, typography, and shapes in Jetpack Compose.

Frequently Asked Questions about material-3-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Material 3 theming in Jetpack Compose?▼

Add the androidx.compose.material3 dependency, then define lightColorScheme and darkColorScheme with semantic tokens like primary, surface, and error. Wrap your UI in a theme composable that passes the scheme, typography, and shapes to MaterialTheme.

How do I support light and dark mode in Compose?▼

Define separate lightColorScheme and darkColorScheme palettes, then select between them using isSystemInDarkTheme() inside your theme wrapper. Every color must be verified in both modes to avoid contrast or visibility issues.

Does Material 3 dynamic color work on all Android versions?▼

Dynamic color requires Android 12 (API level S) or higher, using dynamicDarkColorScheme or dynamicLightColorScheme. On older versions you must fall back to your static color schemes, and offering a user toggle is recommended since it overrides brand colors.

How do I add custom colors that don't fit Material 3 color roles?▼

Create a custom colors object and expose it through a CompositionLocal, then add an extension property on MaterialTheme to access it. This keeps custom tokens like status colors theme-aware without misusing semantic roles.

Why should I avoid hardcoded colors in Compose components?▼

Hardcoded Color values break dark mode support and bypass the semantic token system, making global theme changes impossible. Always reference MaterialTheme.colorScheme roles so colors adapt automatically across light and dark schemes.

Related Skills

Explore More Software Engineering Skills→
duylinhdang1998duylinhdang1998

jetpack-compose

Build declarative Android UIs with Jetpack Compose and Material3.

Community
Intermediate
SimyVSimyV

tailwind-theming

Centralize Tailwind UI theming with reusable CSS variable tokens.

Community
Intermediate
expoexpo
2.5k

expo-design-system

Build and audit design token themes and reusable components in Expo apps.

Official
Intermediate
kyamsSRLkyamsSRL

design-system-patterns

Build scalable design systems with Style Dictionary token pipelines and React theme providers.

Community
Advanced