Theming¶

Material App¶

The main class of your application, which in Kivy inherits from the App class, in KivyMD must inherit from the MDApp class. The MDApp class has properties that allow you to control application properties such as color/style/font of interface elements and much more.

Control material properties¶

The main application class inherited from the MDApp class has the theme_cls attribute, with which you control the material properties of your application.

API - `kivymd.theming`¶

class kivymd.theming.ThemeManager(**kwargs)¶

Bases: kivy.event.EventDispatcher

primary_palette¶

The name of the color scheme that the application will use. All major material components will have the color of the specified color theme.

Available options are: ‘Red’, ‘Pink’, ‘Purple’, ‘DeepPurple’, ‘Indigo’, ‘Blue’, ‘LightBlue’, ‘Cyan’, ‘Teal’, ‘Green’, ‘LightGreen’, ‘Lime’, ‘Yellow’, ‘Amber’, ‘Orange’, ‘DeepOrange’, ‘Brown’, ‘Gray’, ‘BlueGray’.

To change the color scheme of an application:

from kivy.uix.screenmanager import Screen

from kivymd.app import MDApp
from kivymd.uix.button import MDRectangleFlatButton


class MainApp(MDApp):
    def build(self):
        self.theme_cls.primary_palette = "Green"  # "Purple", "Red"

        screen = Screen()
        screen.add_widget(
            MDRectangleFlatButton(
                text="Hello, World",
                pos_hint={"center_x": 0.5, "center_y": 0.5},
            )
        )
        return screen


MainApp().run()

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/primary-palette.png

primary_palette is an OptionProperty and defaults to ‘Blue’.

primary_hue¶

The color hue of the application.

Available options are: ‘50’, ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, ‘800’, ‘900’, ‘A100’, ‘A200’, ‘A400’, ‘A700’.

To change the hue color scheme of an application:

from kivy.uix.screenmanager import Screen

from kivymd.app import MDApp
from kivymd.uix.button import MDRectangleFlatButton


class MainApp(MDApp):
    def build(self):
        self.theme_cls.primary_palette = "Green"  # "Purple", "Red"
        self.theme_cls.primary_hue = "200"  # "500"

        screen = Screen()
        screen.add_widget(
            MDRectangleFlatButton(
                text="Hello, World",
                pos_hint={"center_x": 0.5, "center_y": 0.5},
            )
        )
        return screen


MainApp().run()

With a value of self.theme_cls.primary_hue = "500":

With a value of self.theme_cls.primary_hue = "200":

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/primary-hue.png

primary_hue is an OptionProperty and defaults to ‘500’.

primary_light_hue¶

Hue value for primary_light.

primary_light_hue is an OptionProperty and defaults to ‘200’.

primary_dark_hue¶

Hue value for primary_dark.

primary_light_hue is an OptionProperty and defaults to ‘700’.

primary_color¶

The color of the current application theme in rgba format.

primary_color is an AliasProperty that returns the value of the current application theme, property is readonly.

primary_light¶

Colors of the current application color theme in rgba format (in lighter color).

from kivy.lang import Builder

from kivymd.app import MDApp


KV = '''
Screen:

    MDRaisedButton:
        text: "primary_light"
        pos_hint: {"center_x": 0.5, "center_y": 0.7}
        md_bg_color: app.theme_cls.primary_light

    MDRaisedButton:
        text: "primary_color"
        pos_hint: {"center_x": 0.5, "center_y": 0.5}

    MDRaisedButton:
        text: "primary_dark"
        pos_hint: {"center_x": 0.5, "center_y": 0.3}
        md_bg_color: app.theme_cls.primary_dark
'''


class MainApp(MDApp):
    def build(self):
        self.theme_cls.primary_palette = "Green"
        return Builder.load_string(KV)


MainApp().run()

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/primary-colors-light-dark.png

primary_light is an AliasProperty that returns the value of the current application theme (in lighter color), property is readonly.

primary_dark¶

Colors of the current application color theme in rgba format (in darker color).

primary_dark is an AliasProperty that returns the value of the current application theme (in darker color), property is readonly.

accent_palette¶

The application color palette used for items such as the tab indicator in the MDTabsBar class and so on…

The image below shows the color schemes with the values self.theme_cls.accent_palette = 'Blue', Red' and Yellow':

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/accent-palette.png

primary_hue is an OptionProperty and defaults to ‘Amber’.

accent_hue¶

Similar to primary_hue, but returns a value for accent_palette.

accent_hue is an OptionProperty and defaults to ‘500’.

accent_light_hue¶

Hue value for accent_light.

accent_light_hue is an OptionProperty and defaults to ‘200’.

accent_dark_hue¶

Hue value for accent_dark.

accent_dark_hue is an OptionProperty and defaults to ‘700’.

accent_color¶

Similar to primary_color, but returns a value for accent_color.

accent_color is an AliasProperty that returns the value in rgba format for accent_color, property is readonly.

accent_light¶

Similar to primary_light, but returns a value for accent_light.

accent_light is an AliasProperty that returns the value in rgba format for accent_light, property is readonly.

accent_dark¶

Similar to primary_dark, but returns a value for accent_dark.

accent_dark is an AliasProperty that returns the value in rgba format for accent_dark, property is readonly.

theme_style¶

App theme style.

from kivy.uix.screenmanager import Screen

from kivymd.app import MDApp
from kivymd.uix.button import MDRectangleFlatButton


class MainApp(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"  # "Light"

        screen = Screen()
        screen.add_widget(
            MDRectangleFlatButton(
                text="Hello, World",
                pos_hint={"center_x": 0.5, "center_y": 0.5},
            )
        )
        return screen


MainApp().run()

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/theme-style.png

theme_style is an OptionProperty and defaults to ‘Light’.

bg_darkest¶

Similar to bg_dark, but the color values are a tone lower (darker) than bg_dark.

KV = '''
<Box@BoxLayout>:
    bg: 0, 0, 0, 0

    canvas:
        Color:
            rgba: root.bg
        Rectangle:
            pos: self.pos
            size: self.size

BoxLayout:

    Box:
        bg: app.theme_cls.bg_light
    Box:
        bg: app.theme_cls.bg_normal
    Box:
        bg: app.theme_cls.bg_dark
    Box:
        bg: app.theme_cls.bg_darkest
'''

from kivy.lang import Builder

from kivymd.app import MDApp


class MainApp(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"  # "Light"
        return Builder.load_string(KV)


MainApp().run()

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/bg-normal-dark-darkest.png

bg_darkest is an AliasProperty that returns the value in rgba format for bg_darkest, property is readonly.

opposite_bg_darkest¶

The opposite value of color in the bg_darkest.

opposite_bg_darkest is an AliasProperty that returns the value in rgba format for opposite_bg_darkest, property is readonly.

bg_dark¶

Similar to bg_normal, but the color values are one tone lower (darker) than bg_normal.

bg_dark is an AliasProperty that returns the value in rgba format for bg_dark, property is readonly.

opposite_bg_dark¶

The opposite value of color in the bg_dark.

opposite_bg_dark is an AliasProperty that returns the value in rgba format for opposite_bg_dark, property is readonly.

bg_normal¶

Similar to bg_light, but the color values are one tone lower (darker) than bg_light.

bg_normal is an AliasProperty that returns the value in rgba format for bg_normal, property is readonly.

opposite_bg_normal¶

The opposite value of color in the bg_normal.

opposite_bg_normal is an AliasProperty that returns the value in rgba format for opposite_bg_normal, property is readonly.

bg_light¶

” Depending on the style of the theme (‘Dark’ or ‘Light’) that the application uses, bg_light contains the color value in rgba format for the widgets background.

bg_light is an AliasProperty that returns the value in rgba format for bg_light, property is readonly.

opposite_bg_light¶

The opposite value of color in the bg_light.

opposite_bg_light is an AliasProperty that returns the value in rgba format for opposite_bg_light, property is readonly.

divider_color¶

Color for dividing lines such as MDSeparator.

divider_color is an AliasProperty that returns the value in rgba format for divider_color, property is readonly.

opposite_divider_color¶

The opposite value of color in the divider_color.

opposite_divider_color is an AliasProperty that returns the value in rgba format for opposite_divider_color, property is readonly.

text_color¶

Color of the text used in the MDLabel.

text_color is an AliasProperty that returns the value in rgba format for text_color, property is readonly.

opposite_text_color¶

The opposite value of color in the text_color.

opposite_text_color is an AliasProperty that returns the value in rgba format for opposite_text_color, property is readonly.

secondary_text_color¶

The color for the secondary text that is used in classes from the module TwoLineListItem.

secondary_text_color is an AliasProperty that returns the value in rgba format for secondary_text_color, property is readonly.

opposite_secondary_text_color¶

The opposite value of color in the secondary_text_color.

opposite_secondary_text_color is an AliasProperty that returns the value in rgba format for opposite_secondary_text_color, property is readonly.

icon_color¶

Color of the icon used in the MDIconButton.

icon_color is an AliasProperty that returns the value in rgba format for icon_color, property is readonly.

opposite_icon_color¶

The opposite value of color in the icon_color.

opposite_icon_color is an AliasProperty that returns the value in rgba format for opposite_icon_color, property is readonly.

disabled_hint_text_color¶

Color of the disabled text used in the MDTextField.

disabled_hint_text_color is an AliasProperty that returns the value in rgba format for disabled_hint_text_color, property is readonly.

opposite_disabled_hint_text_color¶

The opposite value of color in the disabled_hint_text_color.

opposite_disabled_hint_text_color is an AliasProperty that returns the value in rgba format for opposite_disabled_hint_text_color, property is readonly.

error_color¶

Color of the error text used in the MDTextField.

error_color is an AliasProperty that returns the value in rgba format for error_color, property is readonly.

ripple_color¶

Color of ripple effects.

ripple_color is an AliasProperty that returns the value in rgba format for ripple_color, property is readonly.

device_orientation¶

Device orientation.

device_orientation is an StringProperty.

standard_increment¶

Value of standard increment.

standard_increment is an AliasProperty that returns the value in rgba format for standard_increment, property is readonly.

horizontal_margins¶

Value of horizontal margins.

horizontal_margins is an AliasProperty that returns the value in rgba format for horizontal_margins, property is readonly.

set_clearcolor¶

font_styles¶

Data of default font styles.

Add custom font:

KV = '''
Screen:

    MDLabel:
        text: "JetBrainsMono"
        halign: "center"
        font_style: "JetBrainsMono"
'''

from kivy.core.text import LabelBase

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.font_definitions import theme_font_styles


class MainApp(MDApp):
    def build(self):
        LabelBase.register(
            name="JetBrainsMono",
            fn_regular="JetBrainsMono-Regular.ttf")

        theme_font_styles.append('JetBrainsMono')
        self.theme_cls.font_styles["JetBrainsMono"] = [
            "JetBrainsMono",
            16,
            False,
            0.15,
        ]
        return Builder.load_string(KV)


MainApp().run()