CODEWITHSUNDEEP
kivykivy-languagekivymd
Ctrl7
Ctrl7

Reputation: 171

Custom color for kivymd primary palette

Is there any way to apply custom color for kivymd primary palette in the form of hex?

Something like this

self.theme_cls.primary_palette=hex('#171717')

Upvotes: 0

Views: 1410

Answers (3)

mz3r0
mz3r0

Reputation: 11

For the latest KivyMD version 2.0.1.dev0 changing the primary palette is rather easy. You can subclass the theme manager and replace its hex_colormap to include whatever palettes you want.

# Applying new theme
from kivymd.theming import ThemeManager
from kivy.utils import hex_colormap
hex_colormap['mycustom'] = '#87FDE3'


class MyThemeMngr(ThemeManager):
    primary_palette = OptionProperty(None,
        options=[name_color.capitalize() for name_color in hex_colormap.keys()])

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.primary_palette = 'Mycustom'

Note that keys in hex_colormap are lowercase, but when you set that palette, you use title case.

Finally, in your app's __init__, simply:

super().__init__(**kwargs)
self.theme_cls = MyThemeMngr()  # Overwrite the theme

Upvotes: 0

Core taxxe
Core taxxe

Reputation: 319

Only via a dirty hack I think.

from kivymd.color_definitions import palette, text_colors, light_colors

enter code here`palette.append("Black")
text_colors["Black"] = {
    "50": "000000",
    "100": "000000",
    "200": "000000",
    "300": "000000",
    "400": "000000",
    "500": "000000",
    "600": "000000",
    "700": "000000",
    "800": "000000",
    "900": "000000",
    "A100": "000000",
    "A200": "000000",
    "A400": "000000",
    "A700": "000000",
}
light_colors["Black"] = {}

This MUST be the first Kivy or kivymd import you do otherwise it will raise a KeyError.

Then you also need to define your custom color in a custom dictionary.

custom_colors = {
    "Black": text_colors["Black"] # you can also repeat all values and adjust
}

lastly we need to set the new custom colors (preferably in build)


class MyApp(MDApp):

    def build(self):
        self.theme_cls.colors.update(custom_colors)
        return RootWidget()

Now You can use your custom colors.

Disclaimer; This seems hacky and I wouldn't recommend using this in production without testing. There also might be a better way but I couldn't find anything documented. The best thing todo is probably to just overwrite a already defined color (like "Teal") and set the values to your liking. Might cause color conflicts tho.

Upvotes: 1

Xyanight
Xyanight

Reputation: 1335

from kivy.lang import Builder
from kivy.properties import ObjectProperty

from kivymd.app import MDApp
from kivymd.uix.floatlayout import MDFloatLayout
from kivymd.uix.tab import MDTabsBase
from kivymd.icon_definitions import md_icons

colors = {
    "Teal": {
        "50": "e4f8f9",
        "100": "bdedf0",
        "200": "97e2e8",
        "300": "79d5de",
        "400": "6dcbd6",
        "500": "6ac2cf",
        "600": "63b2bc",
        "700": "5b9ca3",
        "800": "54888c",
        "900": "486363",
        "A100": "bdedf0",
        "A200": "97e2e8",
        "A400": "6dcbd6",
        "A700": "5b9ca3",
    },
    "Blue": {
        "50": "e3f3f8",
        "100": "b9e1ee",
        "200": "91cee3",
        "300": "72bad6",
        "400": "62acce",
        "500": "589fc6",
        "600": "5191b8",
        "700": "487fa5",
        "800": "426f91",
        "900": "35506d",
        "A100": "b9e1ee",
        "A200": "91cee3",
        "A400": "62acce",
        "A700": "487fa5",
    },
    "Light": {
        "StatusBar": "E0E0E0",
        "AppBar": "F5F5F5",
        "Background": "FAFAFA",
        "CardsDialogs": "FFFFFF",
        "FlatButtonDown": "cccccc",
    },
    "Dark": {
        "StatusBar": "000000",
        "AppBar": "212121",
        "Background": "303030",
        "CardsDialogs": "424242",
        "FlatButtonDown": "999999",
    }
}


KV = '''
MDBoxLayout:
    orientation: "vertical"

    MDToolbar:
        title: "Example Tabs"

    MDTabs:
        id: tabs


<Tab>

    MDIconButton:
        id: icon
        icon: root.icon
        user_font_size: "48sp"
        pos_hint: {"center_x": .5, "center_y": .5}
'''


class Tab(MDFloatLayout, MDTabsBase):
    '''Class implementing content for a tab.'''

    icon = ObjectProperty()


class Example(MDApp):
    icons = list(md_icons.keys())[15:30]

    def build(self):
        self.theme_cls.colors = colors
        self.theme_cls.primary_palette = "Blue"
        self.theme_cls.accent_palette = "Teal"
        return Builder.load_string(KV)

    def on_start(self):
        for name_tab in self.icons:
            tab = Tab(text="This is " + name_tab, icon=name_tab)
            self.root.ids.tabs.add_widget(tab)


Example().run()

https://kivymd.readthedocs.io/en/latest/themes/theming/#changing-the-theme-colors

Upvotes: 1

Related Questions