Working with ThemeAPI

ThemeAPI is a unified API that allows you to configure both UI colors and chart colors from a single place. It simplifies theme management by automatically resolving the appropriate color palette based on the current theme setting (Light, Dark, or Auto).

Overview

ThemeAPI provides two main functions:

resolveUiColors() - Resolves the UI color palette (DxChartsColors) for Compose UI components
resolveChartConfiguration() - Resolves chart configuration (ChartConfigurationData) with colors for chart rendering

Basic Usage

Creating ThemeConfiguration

First, create a ThemeConfiguration that defines colors for both light and dark themes:


import com.devexperts.dxcharts.lib.ui.theme.api.ThemeApi
import com.devexperts.dxcharts.lib.ui.theme.api.ThemeConfiguration
import com.devexperts.dxcharts.lib.ui.theme.api.ThemeSpecification
import com.devexperts.dxcharts.lib.ui.theme.darkPalette
import com.devexperts.dxcharts.lib.ui.theme.lightPalette
import com.devexperts.dxcharts.lib.domain.ChartConfigurationData
import androidx.compose.ui.graphics.Color
// Chart configuration examples
val CHART_CONFIG_LIGHT = ChartConfigurationData.DEFAULT.copy(
  colors = ChartConfigurationData.Colors(
      theme = Theme.LIGHT,
      bullish = Color(0xFF67AD6D),
      bearish = Color(0xFFEB4C4C),
      doji = Color(0xFF000000),
      bullishBorder = Color(0xFF67AD6D),
      bearishBorder = Color(0xFFEB4C4C),
      area = Color(0xFF7F78D6),
      scatter = Color(0xFF000000),
      volumeBullish = Color(0xFF67AD6D),
      volumeBearish = Color(0xFFEB4C4C),
      volumeDoji = Color(0xFF000000),
      background = Color(0xFFFFFFFF),
      watermark = Color(0x1A000000),
      grid = Color(0xFFE5E5E5),
      valuesOnScales = Color(0xFFD1D1D1),
      highLowValues = Color(0xFF000000),
      paneResizer = Color(0xFFE5E5E5),
      crosstool = Color(0xFFFF5B24),
      drawingsText = Color(0xFFFF5B24)
  )
)
val CHART_CONFIG_DARK = ChartConfigurationData.DEFAULT.copy(
  colors = ChartConfigurationData.Colors(
      theme = Theme.DARK,
      bullish = Color(0xFF4D9953),
      bearish = Color(0xFFD92C40),
      doji = Color(0xFFFFFFFF),
      bullishBorder = Color(0xFF4D9953),
      bearishBorder = Color(0xFFD92C40),
      area = Color(0xFF7F78D6),
      scatter = Color(0xFFFFFFFF),
      volumeBullish = Color(0xFF4D9953),
      volumeBearish = Color(0xFFD92C40),
      volumeDoji = Color(0xFFFFFFFF),
      background = Color(0xFF000000),
      watermark = Color(0x1AFFFFFF),
      grid = Color(0xFF282828),
      valuesOnScales = Color(0xFF808080),
      highLowValues = Color(0xFFFFFFFF),
      paneResizer = Color(0xFF282828),
      crosstool = Color(0xFFFFAA00),
      drawingsText = Color(0xFFFFAA00)
  )
)
  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      val hostTheme = ThemeConfiguration(
          light = ThemeSpecification(
              uiColors = lightPalette(),
              chartColors = CHART_CONFIG_LIGHT.colors
          ),
          dark = ThemeSpecification(
              uiColors = darkPalette(),
              chartColors = CHART_CONFIG_DARK.colors
          )
      )
  }

Resolving UI Colors

Use resolveUiColors() to get the appropriate UI color palette based on the current theme:


import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.runtime.remember
import com.devexperts.dxcharts.lib.domain.Theme
import com.devexperts.dxcharts.lib.ui.theme.DxChartsTheme
override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  
  // Detect system dark mode
  val isSystemInDarkTheme = resources.configuration.uiMode and 
      Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES
  
  val currentTheme = settingsRepository.getCurrentTheme()
  
  val initialTheme = ThemeApi.resolveUiColors(
      configuration = hostTheme,
      currentTheme = currentTheme,
      isSystemDark = isSystemInDarkTheme
  )
  
  var theme by remember { mutableStateOf(initialTheme) }
  
  setContent {
      DxChartsTheme(
          colors = theme
      ) {
          DxChartsScreen(
              // ... other parameters
              themeChanged = { newTheme ->
                  theme = ThemeApi.resolveUiColors(
                      configuration = hostTheme,
                      currentTheme = newTheme,
                      isSystemDark = isSystemInDarkTheme
                  )
              }
          )
      }
  }
}

Resolving Chart Configuration

Use resolveChartConfiguration() to get chart configuration with themed colors:


import com.devexperts.dxcharts.lib.domain.ChartConfigurationData
// Initialize chart configuration on startup
val currentTheme = settingsRepository.getCurrentTheme()
val baseConfig = when (currentTheme) {
  Theme.AUTO -> if (isSystemInDarkTheme) CHART_CONFIG_DARK else CHART_CONFIG_LIGHT
  Theme.DARK -> CHART_CONFIG_DARK
  else -> CHART_CONFIG_LIGHT
}
val themedConfig = ThemeApi.resolveChartConfiguration(
  configuration = hostTheme,
  base = baseConfig,
  currentTheme = currentTheme,
  isSystemDark = isSystemInDarkTheme
)
settingsRepository.setDefaultConfiguration(themedConfig)
settingsRepository.resetDefaultConfig()

Complete Integration Example

Here's a complete example showing how to integrate ThemeAPI in your Activity:


import android.content.res.Configuration
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Surface
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.devexperts.dxcharts.lib.domain.Theme
import com.devexperts.dxcharts.lib.ui.DxChartsScreen
import com.devexperts.dxcharts.lib.ui.theme.DxChartsTheme
import com.devexperts.dxcharts.lib.ui.theme.api.ThemeApi
import com.devexperts.dxcharts.lib.ui.theme.api.ThemeConfiguration
import com.devexperts.dxcharts.lib.ui.theme.api.ThemeSpecification
import com.devexperts.dxcharts.lib.ui.theme.darkPalette
import com.devexperts.dxcharts.lib.ui.theme.lightPalette
class DXChartsActivity : AppCompatActivity() {
  private var isSystemInDarkTheme: Boolean = true
  
  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      
      // Detect system theme
      isSystemInDarkTheme = resources.configuration.uiMode and 
          Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES
      
      settingsRepository.defineSystemSelectedTheme(isSystemInDarkTheme)
      
      // Create theme configuration
      val hostTheme = ThemeConfiguration(
          light = ThemeSpecification(
              uiColors = lightPalette(),
              chartColors = CHART_CONFIG_LIGHT.colors
          ),
          dark = ThemeSpecification(
              uiColors = darkPalette(),
              chartColors = CHART_CONFIG_DARK.colors
          )
      )
      
      // Initialize chart configuration
      val currentTheme = settingsRepository.getCurrentTheme()
      val baseConfig = when (currentTheme) {
          Theme.AUTO -> if (isSystemInDarkTheme) CHART_CONFIG_DARK else CHART_CONFIG_LIGHT
          Theme.DARK -> CHART_CONFIG_DARK
          else -> CHART_CONFIG_LIGHT
      }
      val themedConfig = ThemeApi.resolveChartConfiguration(
          configuration = hostTheme,
          base = baseConfig,
          currentTheme = currentTheme,
          isSystemDark = isSystemInDarkTheme
      )
      settingsRepository.setDefaultConfiguration(themedConfig)
      settingsRepository.resetDefaultConfig()
      
      setContent {
          // Resolve initial UI colors
          val initialTheme = ThemeApi.resolveUiColors(
              configuration = hostTheme,
              currentTheme = settingsRepository.getCurrentTheme(),
              isSystemDark = isSystemInDarkTheme
          )
          var theme by remember { mutableStateOf(initialTheme) }
          
          DxChartsTheme(
              colors = theme
          ) {
              Surface(
                  modifier = Modifier.fillMaxSize(),
                  color = DxChartsTheme.colors.mainChartBg
              ) {
                  DxChartsScreen(
                      config = DxChartsConfig(
                          // ... repositories and providers
                      ),
                      themeChanged = { newTheme ->
                          // Update UI colors when theme changes
                          theme = ThemeApi.resolveUiColors(
                              configuration = hostTheme,
                              currentTheme = newTheme,
                              isSystemDark = isSystemInDarkTheme
                          )
                      }
                  )
              }
          }
      }
  }
}

Custom Theme Colors

You can customize colors by creating your own palettes instead of using the default lightPalette() and darkPalette():


import com.devexperts.dxcharts.lib.ui.theme.DxChartsColors
import androidx.compose.ui.graphics.Color
val customLightPalette = lightPalette().copy(
  mainChartBg = Color(0xFFF5F5F5),
  iconActiveBg = Color(0xFFE0E0E0),
  separator = Color(0xFFCCCCCC)
  // ... customize other colors
)
val customDarkPalette = darkPalette().copy(
  mainChartBg = Color(0xFF1A1A1A),
  iconActiveBg = Color(0xFF2D2D2D),
  separator = Color(0xFF3D3D3D)
  // ... customize other colors
)
val customChartConfigLight = CHART_CONFIG_LIGHT.colors.copy(
  bullish = Color(0xFF2A45B5),
  bearish = Color(0xFF2635B6),
  crosstool = Color(0xFF5A2B8D),
  // ... customize other colors
)
val customChartConfigDark = CHART_CONFIG_DARK.colors.copy(
  bullish = Color(0xFF5B37C4),
  bearish = Color(0xFF9405D5),
  crosstool = Color(0xFF237B1A),
  // ... customize other colors
)
val hostTheme = ThemeConfiguration(
  light = ThemeSpecification(
      uiColors = customLightPalette,
      chartColors = customChartConfigLight
  ),
  dark = ThemeSpecification(
      uiColors = customDarkPalette,
      chartColors = customChartConfigDark
  )
)

Overview​

Basic Usage​

Creating ThemeConfiguration​

Resolving UI Colors​

Resolving Chart Configuration​

Complete Integration Example​

Custom Theme Colors​