Theme Support
This sample demonstrates how to change an image based on Bixby's current theme. This will help you optimize your capsule's views to look their best with both the light and dark theme, as well as against various wallpaper options available in the Simulator.
Because you cannot submit a capsule with the example namespace, in order to test a sample capsule on a device, you must change the id in the capsule.bxb file from example to your organization's namespace before making a private submission.
For example, if your namespace is acme, change example.themes to acme.themes.
To see the capsule in action, open the Simulator and give the input utterance "Start". When you change the Simulator's (or the device's) theme in the Settings view, the "thumbs up" icon will change from black to white as appropriate.
You can see how this is accomplished in the cell-area defined in Result.view.bxb:
cell-area{
slot1{
image{
url("/images/icons/thumbs-up-white.png"){
light-theme("/images/icons/thumbs-up-black.png")
// light-theme sets a different url just for the light theme. There is also a dark-theme key to set an alternate image for the dark-theme.
}
shape (Square)
}
}
slot2{
content{
primary("This icon will change to black in the light theme.")
}
}
}
Video Tutorial: Bixby Themes
The following video shows the different themes available with this sample capsule.