• author: brousch
• kivy: >= 1.4

Creating a styled Spinner and matching SpinnerOption, including font color, background color, and pressed color. This snippet also demonstrates #:set for file-wide variables.

The trickiest part is merging your color with the default button color (rgb 88,88,88) to get the desired color in the app. The formula for determining the Kivy color value based on your color is: ([my_color]+88)/255. So a red value of 80 becomes 0.659.

The default pressed image is a blue (rgb 50,154,206) which is much harder to merge with your color to get the right color. So the second trick is setting the background image for the pressed spinner and options to the normal spinner and option background images.

Font colors do not have to be shifted by 88 since they do not have a background image. You just need to take your rgb values and divide them by 255 to get the Kivy color value.

#!text
#:kivy 1.7.2
#:import Factory kivy.factory.Factory

#:set color_button (0.784, 0.443, 0.216, 1)  # brown
#:set color_button_pressed (0.659, 0.522, 0.431, 1)  # darker brown
#:set color_font   (0.957, 0.890, 0.843, 1)  # off white
 
<MySpinnerOption@SpinnerOption>:
    background_color: color_button if self.state == 'down' else color_button_pressed
    background_down: 'atlas://data/images/defaulttheme/button'
    color: color_font
 
<MyThing>:
    Spinner:
        text: "First thing"
        values: ["First thing", "Second thing", "Third thing"]
        background_color: color_button if self.state == 'normal' else color_button_pressed
        background_down: 'atlas://data/images/defaulttheme/spinner'
        color: color_font
        option_cls: Factory.get("MySpinnerOption")
        size_hint: None, None

##Comments