ComposeThemer
2.0.0indexedEnables dynamic theming and customization of UI components, facilitating easy switching of themes and colors for a more personalized user interface experience.
10
Stars
1
Used by
dependents
—
Health
/ 100
ComposeThemer
This library provides following main features:
- allows to define custom user themes and applies them automatically
- ability to retrieve all registered themes
- supports system ui theming (status bar + navigation bar)
[!NOTE] All features are splitted into separate modules, just include the modules you want to use!
Table of Contents
:camera: Screenshots
defaultpicker
:computer: Supported Platforms
:arrow_right: Versions
| Dependency | Version |
|---|---|
| Kotlin | 2.4.0 |
| Jetbrains Compose | 1.11.1 |
:wrench: Setup
Direct Dependency Notation
Simply add the dependencies inside your file.
:rocket: Usage
1) Register available themes
You should do this once only, e.g. in your Application class.
// register all themes that you want to use (our just a subset of them, even a single one is enough)
val allThemes: List<ComposeTheme.Theme> =
DefaultThemes.getAllThemes() +
MetroThemes.getAllThemes() +
FlatUIThemes.getAllThemes() +
Material500Themes.getAllThemes()
ComposeTheme.register(*allThemes.toTypedArray())
2) Apply the theme
// create a state that holds the current theme settings
val baseTheme = rememberSaveable { mutableStateOf(ComposeTheme.BaseTheme.System) }
val contrast = rememberSaveable { mutableStateOf(ComposeTheme.Contrast.Normal) }
val dynamic = rememberSaveable { mutableStateOf(false) }
val theme = rememberSaveable { mutableStateOf(ThemeDefault.Theme.id) } // id of the current theme
val state = ComposeTheme.State(baseTheme, contrast, dynamic, theme)
// use ComposeTheme instead of MaterialTheme
ComposeTheme(state = state) {
// app content
}
3) Navigation and statusbar theming
On android you can use ComposeTheme to set the status bar and navigation bar colors based on the current theme.
ComposeTheme(
state = state
) {
// set the color that you use behind the status bar and navigation bar (e.g. primary toolbar + surface bottom navigation)
val statusBarColor = ...
val navigationBarColor = ...
// UpdateEdgeToEdgeDefault...helper function to easily enable edgeToEdge
// SystemBarStyle also offers some extensions (statusBar, navigationBar, transparent) that can be used
// this app draws a bottom navigation behind the navigation bar in portrait only, in landscape mode it doesn't
landscape = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
isDark = state.base.value.isDark()
UpdateEdgeToEdgeDefault(
activity = ,
themeState = state,
statusBarColor = statusBarColor,
navigationBarColor = (landscape) {
SystemBarStyle.defaultScrim(resources, isDark)
} navigationBarColor,
isNavigationBarContrastEnforced = landscape
)
}
:file_folder: Modules
:sparkles: Demo
A full demo is included inside the demo module, it shows nearly every usage with working examples.
:information_source: More
- Themes
:books: API
Check out the API documentation.
:bulb: Other Libraries
You can find more libraries (all multiplatform) of mine that all do work together nicely here.
