Skip to main content

Configuration of dark and light themes

Theme of app can be changed in settings.

There are 3 possible themes in settings: Auto, Light, Dark. Auto theme means that library will use system theme.

You can define your own colors for dark and light themes of library.

All you need is to pass correct implementation of the interface com.devexperts.dxcharts.lib.ui.theme.DxChartsColors. How to implement it can be found here

Library provide default colors for light and dark themes. You can get them by using lightPalette() or darkPalette() respectively

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val initialTheme = getPalette(settingsRepository.getCurrentTheme())
var theme by remember { mutableStateOf(initialTheme) }
setContent{
DxChartsTheme(
colors = theme
) {
DxChartsScreen(
//...
themeChanged = { theme = getPalette(it) },
)
}
}
}
fun getPalette(theme: Theme): DxChartsColors {
return when (theme) {
Theme.AUTO -> { if (isSystemInDarkTheme) darkPalette() else lightPalette() }
Theme.LIGHT -> { lightPalette() }
Theme.DARK -> { darkPalette() }
}
}

As on example DxChartsScreen provide callback for changing theme and it will pass new theme from settings, so you can manage colors accordingly.

When we change theme in settings library also trigger changing theme in settingsRepository, to change colors on chart. Default colors for chart can be found in SettingsRepository implementation that you will use . E.g. if you use our implementation SerializableStorageDefaultSettingsRepository, default colors are storing in defaultColorItemsDark and defaultColorItemsLight.

val defaultColorItemsDark: Map<SettingsScreenItem, Color> = mapOf(
SettingsScreenItem.BEARISH_BODY to Color(0xffD92C40),
SettingsScreenItem.BULLISH_BODY to Color(0xff4D9953),
SettingsScreenItem.DOJI to Color(0xffffffff),
SettingsScreenItem.BULLISH_BORDER to Color(0xff4D9953),
SettingsScreenItem.BEARISH_BORDER to Color(0xffD92C40),
SettingsScreenItem.UP to Color(0xff4D9953),
SettingsScreenItem.DOWN to Color(0xffD92C40),
SettingsScreenItem.NONE to Color(0xffffffff),
SettingsScreenItem.AREA to Color(0xFFF44336),
SettingsScreenItem.SCATTER to Color(0xffffffff),
SettingsScreenItem.VOLUME_BEARISH to Color(0xffD92C40),
SettingsScreenItem.VOLUME_BULLISH to Color(0xff4D9953),
SettingsScreenItem.VOLUME_DOJI to Color(0xffffffff),
SettingsScreenItem.BACKGROUND to Color(0xff000000),
SettingsScreenItem.WATERMARK_COLOR to Color(0x1AFFFFFF),
SettingsScreenItem.GRID to Color(0xFF282828),
SettingsScreenItem.VALUES_ON_SCALES to Color(0xff808080),
)
val defaultColorItemsLight: Map<SettingsScreenItem, Color> = mapOf(
SettingsScreenItem.BEARISH_BODY to Color(0xFFEB4C4C),
SettingsScreenItem.BULLISH_BODY to Color(0xFF67AD6D),
SettingsScreenItem.DOJI to Color(0xff000000),
SettingsScreenItem.BULLISH_BORDER to Color(0xFF67AD6D),
SettingsScreenItem.BEARISH_BORDER to Color(0xFFEB4C4C),
SettingsScreenItem.UP to Color(0xFF67AD6D),
SettingsScreenItem.DOWN to Color(0xFFEB4C4C),
SettingsScreenItem.NONE to Color(0xff000000),
SettingsScreenItem.AREA to Color(0xFFF44336),
SettingsScreenItem.SCATTER to Color(0xff000000),
SettingsScreenItem.VOLUME_BEARISH to Color(0xFFEB4C4C),
SettingsScreenItem.VOLUME_BULLISH to Color(0xFF67AD6D),
SettingsScreenItem.VOLUME_DOJI to Color(0xff000000),
SettingsScreenItem.BACKGROUND to Color(0xffffffff),
SettingsScreenItem.WATERMARK_COLOR to Color(0x1AFFFFFF),
SettingsScreenItem.GRID to Color(0xFF282828),
SettingsScreenItem.VALUES_ON_SCALES to Color(0xff808080),
)