Styling with PynamicUI

Styling with PynamicUI

Styling plays a vital role in creating visually appealing and user-friendly interfaces for your Python desktop applications. PynamicUI, coupled with CustomTkinter, offers a flexible and straightforward way to apply styles to your virtual elements, allowing you to define custom appearances and enhance the overall aesthetics of your user interface. This page will guide you through the various aspects of styling with PynamicUI, including:

1. Creating and Managing Stylesheets
2. Applying Styles to Elements
3. Using Nested Styles
4. Leveraging Appearance Modes

1. Creating and Managing Stylesheets

In PynamicUI, styles are organized using stylesheets, which are dictionaries that contain various style definitions. The createStylesheet class facilitates the creation and management of stylesheets. Stylesheets hold one or more style entries, each of which is identified by a unique name. The structure of a stylesheet entry is a dictionary that maps widget properties to their corresponding values.

To create a stylesheet, follow these steps:

from pynamicui import createStylesheet

# Create a new stylesheet instance
styles = createStylesheet()

# Add styles dynamically using the 'addStyle' method
styles.addStyle("PrimaryButton", {
    "font": ("Arial", 14, "normal"),
    "fg_color": "grey",
    "bg_color": "blue"
})

styles.addStyle("SecondaryButton", {
    "font": ("Arial", 14, "normal"),
    "fg_color": "black",
    "bg_color": "green"
})

2. Applying Styles to Elements

To apply a defined style from the stylesheet to a virtual element, you can use the style property when creating the element. The style property specifies the name of the style you want to apply to the element. When the element is rendered, PynamicUI will automatically fetch the associated style from the stylesheet and apply it to the CustomTkinter widget.

from pynamicui import createDom, createElement

# Assuming 'styles' is the previously defined stylesheet
dom = createDom()
dom.setStylesheet(styles.stylesheet)

# Create a button element with the "PrimaryButton" style
button = createElement(dom,
    "Button",
    style="PrimaryButton",
    props={"text": "Click Me"},
    place={"relwidth": 0.5, "relheight": 0.2, "rely": 0.3}
)

dom.render()

3. Using Nested Styles

PynamicUI allows you to create nested styles that inherit properties from existing styles. This feature promotes code reusability and maintains consistency in your design. To define a nested style, use the addNestedStyle method, specifying the parent style's name, the new style's name, and the property updates.

# Create a nested style that inherits from "PrimaryButton" and updates "fg_color"
styles.addNestedStyle("PrimaryButton", "NestedPrimaryButton", {
    "fg_color": "darkblue",
})

You can now use the "NestedPrimaryButton" style for your virtual elements, which will include all properties from "PrimaryButton" and override the "fg_color" property with the new value.

4. Leveraging Appearance Modes

PynamicUI introduces appearance modes, allowing you to switch between different styles based on the application's appearance mode. By default, PynamicUI uses the "Light" appearance mode. However, you can set a different appearance mode to change the overall look of your user interface.

from pynamicui import setAppearanceMode

# Set the appearance mode to "Dark"
setAppearanceMode("Dark")

After setting the appearance mode, PynamicUI will apply the corresponding styles from the stylesheet, ensuring a consistent appearance for all elements based on the chosen mode.

Conclusion

Styling with PynamicUI provides a straightforward and efficient way to customize the look and feel of your Python desktop applications. With stylesheets, you can define and manage multiple styles, while the ability to apply nested styles allows for streamlined code organization and reuse. By leveraging appearance modes, you can create versatile interfaces with consistent aesthetics, regardless of the chosen mode. Combine PynamicUI's styling capabilities with CustomTkinter's extensive widget properties to create visually stunning and highly interactive user interfaces that leave a lasting impression on your users.