Skip to main content

3 posts tagged with "news"

View All Tags

V 2.0.2 Released

· 2 min read
Khamisi Kibet
Khamisi Kibet
Creator of Qt Custom Widgets

We're excited to announce the release of QT-PyQt-PySide-Custom-Widgets version 2.0.2! This update brings significant improvements to the project creation experience and introduces powerful automation features that will streamline your Qt development workflow.

What's New in v2.0.2​

Enhanced Project Creator​

The project creation wizard has been completely overhauled with:

  • Interactive Post-Creation Menu: Choose your next steps immediately after project setup
  • Automated File Monitoring: Real-time conversion of UI files as you design
  • One-Click Qt Designer Launch: Start designing with custom widgets instantly
  • Better User Guidance: Clear workflow instructions and command references

Automated File Monitoring​

Never manually convert UI files again! The new file monitoring feature:

  • Watches your ui/ folder for changes
  • Automatically converts .ui files to Python when you save
  • Supports all major Qt bindings (PySide6, PyQt5, PySide2, PyQt6)
  • Runs in the background while you work

Seamless Qt Designer Integration​

  • Launch Qt Designer directly with custom widgets pre-loaded
  • Access all custom widget categories:
    • MainWindow - Custom main windows
    • Sidebar - Navigation sidebars
    • Progressbars - Animated progress indicators
    • Component Container - Layout containers

Improved CLI Commands​

The command-line interface now includes:

# Start UI file monitoring
Custom_Widgets --monitor-ui ui --qt-library PySide6

# Launch Qt Designer with plugins
Custom_Widgets --start-designer --plugins

# Register custom widgets
Custom_Widgets --register-widgets

# Convert UI files manually
Custom_Widgets --convert-ui ui/main_window.ui
  1. Create Project: Custom_Widgets --create-project
  2. Design: Launch Qt Designer with custom widgets
  3. Monitor: Start file monitoring for automatic conversion
  4. Develop: See live updates as you design

Installation & Update​

New Installation:

pip install QT-PyQt-PySide-Custom-Widgets

Update Existing Installation:

pip install --upgrade QT-PyQt-PySide-Custom-Widgets

Bug Reports & Feedback​

Found an issue or have suggestions? Please report them on our GitHub Issues page: https://github.com/KhamisiKibet/Qt-PyQt-PySide-Custom-Widgets/issues

Special Thanks​

Thank you to all our contributors and the amazing community for your feedback and support! Your input helps make this library better with every release.

Happy coding!

Follow us for more updates:

#Python #Qt #PySide #PyQt #GUI #Development #OpenSource #CustomWidgets #Release

Qt Theme Styling Guide: Json Stylesheet

· 4 min read
Khamisi Kibet
Khamisi Kibet
Creator of Qt Custom Widgets

In this guide, we'll walk through creating professional Qt Dark and Light themes for your custom widgets applications. These themes follow Qt's design language while providing modern, visually appealing interfaces.

Theme Color Palettes​

Qt Dark Theme Colors​

  • Background: #1e1e1e (Dark gray)
  • Text: #e0e0e0 (Light gray)
  • Accent: #41cd52 (Qt green)
  • Icons: #41cd52 (Qt green)
  • Cards: #2c2c2c (Slightly lighter dark gray)
  • Footer: #111111 (Near black)

Qt Light Theme Colors​

  • Background: #ffffff (Pure white)
  • Text: #1e1e1e (Dark gray)
  • Accent: #41cd52 (Qt green)
  • Icons: #41cd52 (Qt green)
  • Cards: #f8f8f8 (Off-white)
  • Footer: #e5e5e5 (Light gray)

Complete Theme Configuration​

Here's how to implement both themes in your style.json:

{
  "QSettings": [
    {
      "ThemeSettings": {
        "QtDesignerIconsColor": "#41CD52",
        "CustomThemes": [
          {
            "Theme-name": "Qt-Dark-Theme",
            "Background-color": "#1e1e1e",
            "Text-color": "#e0e0e0",
            "Accent-color": "#41cd52",
            "Icons-color": "#41cd52",
            "Default-Theme": true,
            "Create-icons": true,
            "Other-variables": {
              "CARD_RADIUS": "12px",
              "FOOTER_BG": "#111111",
              "NAV_BG": "#1e1e1e",
              "CARD_BG": "#2c2c2c",
              "BORDER_COLOR": "rgba(65, 205, 82, 0.3)",
              "HOVER_GLOW": "0 12px 32px rgba(65, 205, 82, 0.45)",
              "GRADIENT": "linear-gradient(135deg, #41cd52, #2fa440)"
            }
          },
          {
            "Theme-name": "Qt-Light-Theme",
            "Background-color": "#ffffff",
            "Text-color": "#1e1e1e",
            "Accent-color": "#41cd52",
            "Icons-color": "#41cd52",
            "Default-Theme": false,
            "Create-icons": true,
            "Other-variables": {
              "CARD_RADIUS": "12px",
              "FOOTER_BG": "#e5e5e5",
              "NAV_BG": "#f5f5f5",
              "CARD_BG": "#f8f8f8",
              "BORDER_COLOR": "rgba(65, 205, 82, 0.2)",
              "HOVER_GLOW": "0 12px 32px rgba(65, 205, 82, 0.25)",
              "GRADIENT": "linear-gradient(135deg, #41cd52, #2fa440)"
            }
          }
        ]
      }
    }
  ]
}

Key Design Principles​

1. Color Contrast​

  • Dark Theme: High contrast between background (#1e1e1e) and text (#e0e0e0)
  • Light Theme: Strong contrast between background (#ffffff) and text (#1e1e1e)
  • Accessibility: Both themes maintain WCAG AA compliance for text readability

2. Consistent Accent Color​

  • Uses Qt's signature green (#41cd52) across both themes
  • Provides visual consistency when switching between themes
  • Green color represents Qt's brand identity

3. Layered Backgrounds​

  • Dark Theme: Three levels of darkness for depth
  • Light Theme: Three levels of lightness for hierarchy
  • Each layer serves a specific purpose in the UI

4. Modern Effects​

  • Border Radius: Consistent 12px rounded corners
  • Shadows: Theme-appropriate glow effects
  • Gradients: Subtle green gradients for visual interest

Theme Variables Explained​

Core Colors​

  • Background-color: Main application background
  • Text-color: Primary text color for readability
  • Accent-color: Primary brand color for interactive elements
  • Icons-color: Color for all icon assets

Additional Variables​

  • CARD_RADIUS: Border radius for cards and containers
  • FOOTER_BG: Background color for footer areas
  • NAV_BG: Background for navigation elements
  • CARD_BG: Background for card components
  • BORDER_COLOR: Border colors with theme-appropriate opacity
  • HOVER_GLOW: Shadow effects for interactive states
  • GRADIENT: CSS gradients for visual enhancements

Implementation Tips​

1. Setting Default Theme​

"Default-Theme": true

Set this to true for your preferred default theme. The other theme should have false.

2. Icon Generation​

"Create-icons": true

This ensures icons are automatically generated in your theme colors.

3. Opacity Adjustments​

Notice how border colors use rgba with different opacity:

  • Dark theme: rgba(65, 205, 82, 0.3) (more visible)
  • Light theme: rgba(65, 205, 82, 0.2) (more subtle)

4. Shadow Intensity​

  • Dark theme shadows are more pronounced (0.45 opacity)
  • Light theme shadows are more subtle (0.25 opacity)

Theme Switching​

To implement theme switching in your application:

  1. Set one theme as default with "Default-Theme": true
  2. Use the other theme for the alternative mode
  3. Implement a toggle mechanism in your UI
  4. Reload the theme configuration when switching

Benefits of This Approach​

1. Brand Consistency​

  • Maintains Qt's visual identity with the green accent color
  • Professional appearance suitable for commercial applications

2. User Experience​

  • Dark theme reduces eye strain in low-light environments
  • Light theme provides familiarity for traditional desktop apps
  • Smooth transitions between themes

3. Developer Experience​

  • Clear variable naming makes customization easy
  • Consistent design tokens across all components
  • Easy to extend with additional color variations

4. Performance​

  • Efficient color scheme with minimal variables
  • Optimized for both dark and light mode rendering

Customization Examples​

Changing Accent Color​

To use a different accent color, simply replace all instances of #41cd52 with your preferred color:

"Accent-color": "#0078d4",
"Icons-color": "#0078d4",
"QtDesignerIconsColor": "#0078d4"

Adjusting Contrast​

For higher contrast in the dark theme:

"Background-color": "#121212",
"Text-color": "#ffffff"

Modifying Border Radius​

For softer or sharper corners:

"CARD_RADIUS": "8px"  // Softer
"CARD_RADIUS": "16px" // Rounder

Conclusion​

These Qt Dark and Light themes provide a solid foundation for creating professional applications with custom widgets. The color schemes are carefully chosen to be both aesthetically pleasing and functionally effective, following modern design principles while staying true to Qt's visual identity.

Remember to test your themes in different lighting conditions and consider user preferences when deciding which theme to set as default. The flexibility of this system allows you to easily create additional theme variations or customize the existing ones to match your specific application needs.

For more advanced theming options, refer to the Custom Widgets documentation on GitHub and explore additional styling variables available for specific widget types.

V 2.0.1 Released

· 3 min read
Khamisi Kibet
Khamisi Kibet
Creator of Qt Custom Widgets

Qt Custom Widgets v2.0.1 Released​

We’re excited to announce the release of Qt Custom Widgets 2.0.1 — a refined update that brings even more power and flexibility to your PyQt and PySide GUI development.

This release focuses on performance improvements, new custom widgets, and a streamlined command-line interface (CLI) that now lets you launch Qt Designer with all custom widgets preloaded.

What’s New in 2.0.1​

More Custom Widgets​

This version introduces several new widgets designed to enhance both functionality and design flexibility. Each widget can be used directly in Qt Designer or instantiated in Python code, fully integrated with your preferred Qt library (PySide6, PySide2, PyQt6, or PyQt5).

Launch Qt Designer with Plugins​

The new CLI now supports launching Qt Designer directly from your environment, with optional loading of all Custom Widgets plugins.

To open Designer with your custom widgets automatically loaded, simply run:

Custom_Widgets --start-designer --plugins

If you prefer to launch Designer without plugins, just run:

Custom_Widgets --start-designer

This feature ensures a seamless integration between your environment and Designer, making your workflow faster and more reliable.

Improved JSON Stylesheet​

The JSON-based stylesheet system has been updated for better theme management. You can now apply light, dark, or custom themes more efficiently with improved property mapping and rendering accuracy.

Minor Fixes and Performance Improvements​

This update includes improved logging, faster UI monitoring, and stability enhancements across all supported platforms.

Updated Command-Line Interface (CLI)​

The Custom Widgets CLI is designed to automate repetitive tasks in Qt development. It now supports file monitoring, UI conversion, Designer launching, and project setup — all in one tool.

Monitor UI Files for Changes​

Custom_Widgets --monitor-ui path/to/file.ui --qt-library PySide6

Automatically converts .ui files to Python when changes are detected.

Convert UI Files to Python​

Custom_Widgets --convert-ui path/to/file.ui --qt-library PySide6

Instantly converts .ui files to .py while preserving all custom widget imports.

Launch Designer​

Custom_Widgets --start-designer --plugins

Opens Qt Designer with Custom Widgets automatically loaded.

Create a New Project​

Custom_Widgets --create-project

Sets up a ready-to-use project structure for developing with Qt Custom Widgets.

For detailed command usage:

Custom_Widgets --help

Upgrade Now​

To upgrade to version 2.0.1, run:

pip install --upgrade QT-PyQt-PySide-Custom-Widgets

Or visit the official PyPI page: https://pypi.org/project/QT-PyQt-PySide-Custom-Widgets/