Custom Color Schemes, Typography & Shapes in Kotlin Desktop | Lesson 6

19views
1likes
0
13:54
T
Taught by Celeste AI - AI Coding Coach
View on YouTube
Description
Build a Theme Dashboard with Compose Desktop! Learn custom color schemes, typography, shapes, and a runtime light/dark mode toggle — all in about 160 lines of Kotlin. What You'll Learn: - darkColorScheme() and lightColorScheme() for dual theme support - Custom Typography() with headlineLarge, titleMedium, bodyLarge, labelMedium - Custom Shapes() with RoundedCornerShape for small, medium, and large - @Composable AppTheme wrapper that switches colors, typography, and shapes - mutableStateOf for runtime light/dark toggle - MaterialTheme.colorScheme, typography, and shapes accessors - IconButton with DarkMode/LightMode Material Icons Timestamps: 0:00 - Introduction 0:15 - Preview: What We're Building 0:45 - Project Setup (Gradle, Dependencies) 2:19 - Theme Colors (Light & Dark Color Schemes) 3:41 - Theme Styling (Typography, Shapes, AppTheme) 6:36 - Dashboard UI (Color Cards, Typography Card, Buttons) 9:33 - Main & Compile 11:24 - App Demo (Dark/Light Toggle) 12:24 - Recap & Key Takeaways 13:24 - Thanks for Watching Source code: https://github.com/GoCelesteAI/kotlin_theme_dashboard Key Takeaways: 1. Color Schemes — darkColorScheme() and lightColorScheme() for dual themes 2. Typography — Custom TextStyle with FontFamily, FontWeight, and fontSize 3. Shapes — RoundedCornerShape for small, medium, and large components 4. AppTheme — A composable wrapper that passes colors, typography, and shapes 5. Dark/Light Toggle — One mutableStateOf flips the entire theme at runtime Previous Lesson: Lesson 05: File System Access https://youtube.com/... Next Lesson: Lesson 07: Dialogs & Menus (coming soon) Tech Stack: Kotlin 2.1, Compose Multiplatform 1.7.3, Material3 Gradle 8.10, JVM 17+ If you found this helpful, please like and subscribe for more Kotlin Desktop tutorials! #kotlin #compose #desktop #material3 #themes #darkmode #lightmode #colorscheme #typography #shapes #tutorial #programming

Tags

kotlincompose multiplatformcompose desktopmaterial3custom themesdark modelight modecolor schemedarkColorSchemelightColorSchemetypographyshapesrounded cornerstheme togglematerial theme
Back to tutorials

Duration

13:54

Published

February 7, 2026

Added to Codegiz

March 15, 2026

Open in YouTube