Themes
Themes are used to customize component styles to fit the specific aesthetic of a brand or product.
Overview
A theme is a collection of design tokens that define the visual style of components. These tokens include colors, typography, spacing, and other stylistic elements that can be applied consistently across a user interface.
The class carbonkivy.theme.theme.CarbonTheme provides the necessary functionality to switch between different themes and apply the corresponding styles to components.
Available Themes
Use the property carbonkivy.theme.theme.CarbonTheme.theme to set or get the current theme. Changing the theme will automatically update the styles of all components that are using the theme.
White
Gray10
Gray90
Gray100
Under active development
Under active development
Disabling defaults
By default, the theme sets the kivy.core.window.Window background color to match the selected theme. If you want to manage the window background color yourself, you can disable this behavior by setting the carbonkivy.theme.theme.CarbonTheme.defaults property to False.
Example
By default your app inherits from carbonkivy.theme.theme.CarbonTheme and uses the default White theme. To change the theme globally, you can set the theme property in your main app class like this:
...
from carbonkivy.app import CarbonApp
class MyApp(CarbonApp):
def __init__(self, *args, **kwargs) -> None:
self.theme = "Gray100" # Set the desired theme here so it loads before build
super(MyApp, self).__init__(*args, **kwargs)
...
API
- class carbonkivy.theme.theme.CarbonTheme(**kwargs)[source]
Bases:
EventDispatcher,ThematicColors,StaticColors- blue_10 = [0.9294117647058824, 0.9607843137254902, 1.0, 1.0]
- blue_100 = [0.0, 0.06666666666666667, 0.2549019607843137, 1.0]
- blue_20 = [0.8156862745098039, 0.8862745098039215, 1.0, 1.0]
- blue_30 = [0.6509803921568628, 0.7843137254901961, 1.0, 1.0]
- blue_40 = [0.47058823529411764, 0.6627450980392157, 1.0, 1.0]
- blue_50 = [0.27058823529411763, 0.5372549019607843, 1.0, 1.0]
- blue_60 = [0.058823529411764705, 0.3843137254901961, 0.996078431372549, 1.0]
- blue_70 = [0.0, 0.2627450980392157, 0.807843137254902, 1.0]
- blue_80 = [0.0, 0.17647058823529413, 0.611764705882353, 1.0]
- blue_90 = [0.0, 0.11372549019607843, 0.4235294117647059, 1.0]
- color_tokens[source]
ListProperty(defaultvalue=0, **kw) Property that represents a list.
- Parameters:
- defaultvalue: list, defaults to []
Specifies the default value of the property.
Warning
When assigning a list to a
ListProperty, the list stored in the property is a shallow copy of the list and not the original list. This can be demonstrated with the following example:>>> class MyWidget(Widget): >>> my_list = ListProperty([]) >>> widget = MyWidget() >>> my_list = [1, 5, {'hi': 'hello'}] >>> widget.my_list = my_list >>> print(my_list is widget.my_list) False >>> my_list.append(10) >>> print(my_list, widget.my_list) [1, 5, {'hi': 'hello'}, 10] [1, 5, {'hi': 'hello'}]However, changes to nested levels will affect the property as well, since the property uses a shallow copy of my_list.
>>> my_list[2]['hi'] = 'bye' >>> print(my_list, widget.my_list) [1, 5, {'hi': 'bye'}, 10] [1, 5, {'hi': 'bye'}]
- cyan_10 = [0.8980392156862745, 0.9647058823529412, 1.0, 1.0]
- cyan_100 = [0.023529411764705882, 0.09019607843137255, 0.15294117647058825, 1.0]
- cyan_20 = [0.7294117647058823, 0.9019607843137255, 1.0, 1.0]
- cyan_30 = [0.5098039215686274, 0.8117647058823529, 1.0, 1.0]
- cyan_40 = [0.2, 0.6941176470588235, 1.0, 1.0]
- cyan_50 = [0.06666666666666667, 0.5725490196078431, 0.9098039215686274, 1.0]
- cyan_60 = [0.0, 0.4470588235294118, 0.7647058823529411, 1.0]
- cyan_70 = [0.0, 0.3254901960784314, 0.6039215686274509, 1.0]
- cyan_80 = [0.0, 0.22745098039215686, 0.42745098039215684, 1.0]
- cyan_90 = [0.00392156862745098, 0.15294117647058825, 0.28627450980392155, 1.0]
- defaults[source]
BooleanProperty(defaultvalue=True, **kw) Property that represents only a boolean value.
- Parameters:
- defaultvalue: boolean
Specifies the default value of the property.
- gray_10 = [0.9568627450980393, 0.9568627450980393, 0.9568627450980393, 1.0]
- gray_100 = [0.08627450980392157, 0.08627450980392157, 0.08627450980392157, 1.0]
- gray_20 = [0.8784313725490196, 0.8784313725490196, 0.8784313725490196, 1.0]
- gray_30 = [0.7764705882352941, 0.7764705882352941, 0.7764705882352941, 1.0]
- gray_40 = [0.6588235294117647, 0.6588235294117647, 0.6588235294117647, 1.0]
- gray_50 = [0.5529411764705883, 0.5529411764705883, 0.5529411764705883, 1.0]
- gray_60 = [0.43529411764705883, 0.43529411764705883, 0.43529411764705883, 1.0]
- gray_70 = [0.3215686274509804, 0.3215686274509804, 0.3215686274509804, 1.0]
- gray_80 = [0.2235294117647059, 0.2235294117647059, 0.2235294117647059, 1.0]
- gray_90 = [0.14901960784313725, 0.14901960784313725, 0.14901960784313725, 1.0]
- green_10 = [0.8705882352941177, 0.984313725490196, 0.9019607843137255, 1.0]
- green_100 = [0.027450980392156862, 0.09803921568627451, 0.03137254901960784, 1.0]
- green_20 = [0.6549019607843137, 0.9411764705882353, 0.7294117647058823, 1.0]
- green_30 = [0.43529411764705883, 0.8627450980392157, 0.5490196078431373, 1.0]
- green_40 = [0.25882352941176473, 0.7450980392156863, 0.396078431372549, 1.0]
- green_50 = [0.1411764705882353, 0.6313725490196078, 0.2823529411764706, 1.0]
- green_60 = [0.09803921568627451, 0.5019607843137255, 0.2196078431372549, 1.0]
- green_70 = [0.054901960784313725, 0.3764705882352941, 0.15294117647058825, 1.0]
- green_80 = [0.01568627450980392, 0.2627450980392157, 0.09019607843137255, 1.0]
- green_90 = [0.00784313725490196, 0.17647058823529413, 0.050980392156862744, 1.0]
- magenta_10 = [1.0, 0.9411764705882353, 0.9686274509803922, 1.0]
- magenta_100 = [0.16470588235294117, 0.0392156862745098, 0.09411764705882353, 1.0]
- magenta_20 = [1.0, 0.8392156862745098, 0.9098039215686274, 1.0]
- magenta_30 = [1.0, 0.6862745098039216, 0.8235294117647058, 1.0]
- magenta_40 = [1.0, 0.49411764705882355, 0.7137254901960784, 1.0]
- magenta_50 = [0.9333333333333333, 0.3254901960784314, 0.5882352941176471, 1.0]
- magenta_60 = [0.8156862745098039, 0.14901960784313725, 0.4392156862745098, 1.0]
- magenta_70 = [0.6235294117647059, 0.09411764705882353, 0.3254901960784314, 1.0]
- magenta_80 = [0.4549019607843137, 0.03529411764705882, 0.21568627450980393, 1.0]
- magenta_90 = [0.3176470588235294, 0.00784313725490196, 0.1411764705882353, 1.0]
- orange_10 = [1.0, 0.9490196078431372, 0.9098039215686274, 1.0]
- orange_100 = [0.13725490196078433, 0.06274509803921569, 0.0, 1.0]
- orange_20 = [1.0, 0.8509803921568627, 0.7450980392156863, 1.0]
- orange_30 = [1.0, 0.7176470588235294, 0.5176470588235295, 1.0]
- orange_40 = [1.0, 0.5137254901960784, 0.16862745098039217, 1.0]
- orange_50 = [0.9215686274509803, 0.3843137254901961, 0.0, 1.0]
- orange_60 = [0.7294117647058823, 0.3058823529411765, 0.0, 1.0]
- orange_70 = [0.5411764705882353, 0.2196078431372549, 0.0, 1.0]
- orange_80 = [0.3686274509803922, 0.1607843137254902, 0.0, 1.0]
- orange_90 = [0.24313725490196078, 0.10196078431372549, 0.0, 1.0]
- purple_10 = [0.9647058823529412, 0.9490196078431372, 1.0, 1.0]
- purple_100 = [0.10980392156862745, 0.058823529411764705, 0.18823529411764706, 1.0]
- purple_20 = [0.9098039215686274, 0.8549019607843137, 1.0, 1.0]
- purple_30 = [0.8313725490196079, 0.7333333333333333, 1.0, 1.0]
- purple_40 = [0.7450980392156863, 0.5843137254901961, 1.0, 1.0]
- purple_50 = [0.6470588235294118, 0.43137254901960786, 1.0, 1.0]
- purple_60 = [0.5411764705882353, 0.24705882352941178, 0.9882352941176471, 1.0]
- purple_70 = [0.4117647058823529, 0.1607843137254902, 0.7686274509803922, 1.0]
- purple_80 = [0.28627450980392155, 0.11372549019607843, 0.5450980392156862, 1.0]
- purple_90 = [0.19215686274509805, 0.07450980392156863, 0.3686274509803922, 1.0]
- red_10 = [1.0, 0.9450980392156862, 0.9450980392156862, 1.0]
- red_100 = [0.17647058823529413, 0.027450980392156862, 0.03529411764705882, 1.0]
- red_20 = [1.0, 0.8431372549019608, 0.8509803921568627, 1.0]
- red_30 = [1.0, 0.7019607843137254, 0.7215686274509804, 1.0]
- red_40 = [1.0, 0.5137254901960784, 0.5372549019607843, 1.0]
- red_50 = [0.9803921568627451, 0.30196078431372547, 0.33725490196078434, 1.0]
- red_60 = [0.8549019607843137, 0.11764705882352941, 0.1568627450980392, 1.0]
- red_70 = [0.6352941176470588, 0.09803921568627451, 0.12156862745098039, 1.0]
- red_80 = [0.4588235294117647, 0.054901960784313725, 0.07450980392156863, 1.0]
- red_90 = [0.3215686274509804, 0.01568627450980392, 0.03137254901960784, 1.0]
- static_color_tokens[source]
ListProperty(defaultvalue=0, **kw) Property that represents a list.
- Parameters:
- defaultvalue: list, defaults to []
Specifies the default value of the property.
Warning
When assigning a list to a
ListProperty, the list stored in the property is a shallow copy of the list and not the original list. This can be demonstrated with the following example:>>> class MyWidget(Widget): >>> my_list = ListProperty([]) >>> widget = MyWidget() >>> my_list = [1, 5, {'hi': 'hello'}] >>> widget.my_list = my_list >>> print(my_list is widget.my_list) False >>> my_list.append(10) >>> print(my_list, widget.my_list) [1, 5, {'hi': 'hello'}, 10] [1, 5, {'hi': 'hello'}]However, changes to nested levels will affect the property as well, since the property uses a shallow copy of my_list.
>>> my_list[2]['hi'] = 'bye' >>> print(my_list, widget.my_list) [1, 5, {'hi': 'bye'}, 10] [1, 5, {'hi': 'bye'}]
- teal_10 = [0.8509803921568627, 0.984313725490196, 0.984313725490196, 1.0]
- teal_100 = [0.03137254901960784, 0.10196078431372549, 0.10980392156862745, 1.0]
- teal_20 = [0.6196078431372549, 0.9411764705882353, 0.9411764705882353, 1.0]
- teal_30 = [0.23921568627450981, 0.8588235294117647, 0.8509803921568627, 1.0]
- teal_40 = [0.03137254901960784, 0.7411764705882353, 0.7294117647058823, 1.0]
- teal_50 = [0.0, 0.615686274509804, 0.6039215686274509, 1.0]
- teal_60 = [0.0, 0.49019607843137253, 0.4745098039215686, 1.0]
- teal_70 = [0.0, 0.36470588235294116, 0.36470588235294116, 1.0]
- teal_80 = [0.0, 0.2549019607843137, 0.26666666666666666, 1.0]
- teal_90 = [0.00784313725490196, 0.16862745098039217, 0.18823529411764706, 1.0]
- thematic_color_tokens[source]
ListProperty(defaultvalue=0, **kw) Property that represents a list.
- Parameters:
- defaultvalue: list, defaults to []
Specifies the default value of the property.
Warning
When assigning a list to a
ListProperty, the list stored in the property is a shallow copy of the list and not the original list. This can be demonstrated with the following example:>>> class MyWidget(Widget): >>> my_list = ListProperty([]) >>> widget = MyWidget() >>> my_list = [1, 5, {'hi': 'hello'}] >>> widget.my_list = my_list >>> print(my_list is widget.my_list) False >>> my_list.append(10) >>> print(my_list, widget.my_list) [1, 5, {'hi': 'hello'}, 10] [1, 5, {'hi': 'hello'}]However, changes to nested levels will affect the property as well, since the property uses a shallow copy of my_list.
>>> my_list[2]['hi'] = 'bye' >>> print(my_list, widget.my_list) [1, 5, {'hi': 'bye'}, 10] [1, 5, {'hi': 'bye'}]
- theme[source]
OptionProperty(*largs, **kw) Property that represents a string from a predefined list of valid
options.
If the string set in the property is not in the list of valid options (passed at property creation time), a ValueError exception will be raised.
- Parameters:
- default: any valid type in the list of options
Specifies the default value of the property.
- **kwargs: a list of keyword arguments
Should include an options parameter specifying a list (not tuple) of valid options.
For example:
class MyWidget(Widget): state = OptionProperty("None", options=["On", "Off", "None"])
- yellow_10 = [0.9882352941176471, 0.9568627450980393, 0.8392156862745098, 1.0]
- yellow_100 = [0.10980392156862745, 0.08235294117647059, 0.0, 1.0]
- yellow_20 = [0.9921568627450981, 0.8627450980392157, 0.4117647058823529, 1.0]
- yellow_30 = [0.9450980392156862, 0.7607843137254902, 0.10588235294117647, 1.0]
- yellow_40 = [0.8235294117647058, 0.6313725490196078, 0.023529411764705882, 1.0]
- yellow_50 = [0.6980392156862745, 0.5254901960784314, 0.0, 1.0]
- yellow_60 = [0.5568627450980392, 0.41568627450980394, 0.0, 1.0]
- yellow_70 = [0.40784313725490196, 0.3058823529411765, 0.0, 1.0]
- yellow_80 = [0.2823529411764706, 0.21568627450980393, 0.0, 1.0]
- yellow_90 = [0.18823529411764706, 0.1411764705882353, 0.0, 1.0]