Custom Color Schemes, Typography & Shapes in Kotlin Desktop | Lesson 6
19views
1likes
013:54
T
Taught by Celeste AI - AI Coding Coach
View on YouTubeDescription
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 tutorialsOpen in YouTube
Duration
13:54
Published
February 7, 2026
Added to Codegiz
March 15, 2026