FAQ

Light and dark theme

There are several approaches when working with different themes.

1. The app's color palette is set on the client.

   Create your variable storage DivVariableStorage and pass it to DivConfiguration.

       val variableController = DivVariableController()
       val imageLoader = PicassoImageLoader(..)
       val configuration = DivConfiguration.Builder(imageLoader)
           .divVariableController(variableController)
           .build()
   

   In the controller, declare the app_theme variable and a dictionary with the appropriate color values for the dark and light themes:

       val palette = JSONObject(""" 
           {
               "light": {
                   "text_color": "#ffffff",
                   "text_background": "#0077FF"
               },
               "dark": {
                   "text_color": "#000000",
                   "text_background": "#66ADFF"
               }
           }
       """.trimIndent())
       val pallete = Variable.DictVariable("pallete", pallete)
       val theme = Variable.StringVariable("app_theme", "light")
   
       variableController.putOrUpdate(pallete)
       variableController.putOrUpdate(theme)
   

   If the app theme changes, you can change the value of the theme variable like this: theme.set("dark").

   Now all layouts created from this config will have access to the colors you specified in the dictionary:

   {
     "card": {
       "log_id": "text",
       "states": [
         {
           "state_id": 0,
           "div": {
             "type": "text",
             "text": "Hello, DivKit!",
             "height": {
               "type": "fixed",
               "value": 48
             },
             "border": {
               "corner_radius": 16
             },
             "background": [
               {
                 "type": "solid",
                 "color": "@{getColorFromDict(palette, app_theme, 'text_background')}"
               }
             ],
             "margins": {
               "top": 20,
               "left": 20,
               "right": 20
             },
             "font_size": 14,
             "text_alignment_vertical": "center",
             "text_alignment_horizontal": "center",
             "text_color": "@{getColorFromDict(palette, app_theme, 'text_color')}"
           }
         }
       ]
     }
   }
   

   If you aren't sure that the necessary variables are declared on all client versions in DivVariableController, you can use the getOptColorFromDict function and add a default value to prevent errors.

2. The color palette is set on the server side.

   As in the previous case, declare the app_theme variable in DivVariableController, but the dictionary with variables should be declared in the layout itself:

   {
     "card": {
       "variables": [
         {
           "name": "palette",
           "type": "dict",
           "value": {
             "light": {
               "text_color": "#ffffff",
               "text_background": "#0077FF"
             },
             "dark": {
               "text_color": "#000000",
               "text_background": "#0077FF"
             }
           }
         }
       ],
       "log_id": "text",
       "states": [
         {
           "state_id": 0,
           "div": {
             "type": "text",
             "text": "Hello, DivKit!",
             "height": {
               "type": "fixed",
               "value": 48
             },
             "border": {
               "corner_radius": 16
             },
             "background": [
               {
                 "type": "solid",
                 "color": "@{getColorFromDict(palette, app_theme, 'text_background')}"
               }
             ],
             "margins": {
               "top": 20,
               "left": 20,
               "right": 20
             },
             "font_size": 14,
             "text_alignment_vertical": "center",
             "text_alignment_horizontal": "center",
             "text_color": "@{getColorFromDict(palette, app_theme, 'text_color')}"
           }
         }
       ]
     }
   }
   

Troubleshooting in DivKit

To simplify layout debugging on the client, DivKit has an indicator for layout errors. By default, this indicator is disabled. To enable it, additionally pass the
visualErrorsEnabled parameter to DivConfiguration.Builder:

    val imageLoader = PicassoImageLoader(..)
    val configuration = DivConfiguration.Builder(imageLoader)
        .visualErrorsEnabled(true)
        .build()

For example, let's pass an invalid value to corner_radius:

"border": {
    "corner_radius": "incorrect_value"
},

An error indicator appears in the layout:

Interacting with it shows you the last 25 errors and allows you to get a stack trace if you need one:

You can also log errors: to do this, pass your Div2Logger interface implementation to DivConfiguration using the divLogger parameter.

Does DivKit support the Right-To-Left interface?

Yes, DivKit on Android supports RTL languages by default. If View isn't reversed by default, specify div2View.layoutDirection = LayoutDirection.RTL.

Can I use local pictures when working with DivView?

Yes, you can. By default, DivKit can load pictures from assets/divkit as URLs in the following format: divkit-asset://path/image.png.
The JSON itself will look like this:

{
  "type": "image",
  "image_url": "divkit-asset://path/image.png",
  "height": {
    "type": "match_parent"
  }
}

If you're using one of our DivImageLoader implementations, you can use the following URL format: file:///android_asset/path/image.png.

Learn more

Follow DivKit news in the Telegram channel: http://t.me/divkit_news

You can also discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_ru

DivKit Repository