📘 Эта документация также доступна на [русском](README.ru.md) --- ## 📋 Contents - [Overview](#-overview) - [Creating the Theme Folder](#-creating-the-theme-folder) - [Style File](#-style-file-stylespy) - [Animation configuration](#-animation-configuration) - [Metadata](#-metadata-metainfoini) - [Screenshots](#-screenshots) - [Fonts and Icons](#-fonts-and-icons-optional) --- ## 📖 Overview Themes in `PortProtonQT` allow customizing the UI appearance. Themes are stored under: - `~/.local/share/PortProtonQT/themes`. --- ## 📁 Creating the Theme Folder ```bash mkdir -p ~/.local/share/PortProtonQT/themes/my_custom_theme ``` --- ## 🎨 Style File (`styles.py`) Create a `styles.py` in the theme root. It should define variables or functions that return CSS. **Example:** ```python def custom_button_style(color1, color2): return f""" QPushButton {{ background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 {color1}, stop:1 {color2}); }} """ ``` --- ## 🎥 Animation configuration The `GAME_CARD_ANIMATION` dictionary controls all animation parameters for game cards: ```python GAME_CARD_ANIMATION = { # Type of animation when entering or exiting the detail page # Possible values: "fade", "slide_left", "slide_right", "slide_up", "slide_down", "bounce" # Determines how the detail page appears and disappears "detail_page_animation_type": "fade", # Border width of the card in idle state (no hover or focus) # Affects the thickness of the border around the card when it's not selected # Value in pixels "default_border_width": 2, # Border width on hover # Increases the border thickness when the cursor is over the card # Value in pixels "hover_border_width": 8, # Border width on focus (e.g., when selected via keyboard) # Increases the border thickness when the card is focused # Value in pixels "focus_border_width": 12, # Minimum border width during pulsing animation # Determines the minimum border thickness during the "breathing" animation # Value in pixels "pulse_min_border_width": 8, # Maximum border width during pulsing animation # Determines the maximum border thickness during pulsing # Value in pixels "pulse_max_border_width": 10, # Duration of the border thickness animation (e.g., on hover or focus) # Affects the speed of transition from one border width to another # Value in milliseconds "thickness_anim_duration": 300, # Duration of one pulsing animation cycle # Determines how fast the border "pulses" between min and max values # Value in milliseconds "pulse_anim_duration": 800, # Duration of the gradient rotation animation # Affects how fast the gradient border rotates around the card # Value in milliseconds "gradient_anim_duration": 3000, # Starting angle of the gradient (in degrees) # Determines the initial rotation point of the gradient at animation start "gradient_start_angle": 360, # Ending angle of the gradient (in degrees) # Determines the final rotation point of the gradient # Value 0 means a full 360° rotation "gradient_end_angle": 0, # Type of card animation on hover or focus # Possible values: "gradient", "scale" # "gradient" enables a rotating gradient for the border, "scale" enlarges the card "card_animation_type": "gradient", # Card scale in idle state # Determines the base size of the card (1.0 = 100% of original size) # Value as a fraction (e.g., 1.0 for normal size) "default_scale": 1.0, # Card scale on hover # Increases the card size on hover # Value as a fraction (e.g., 1.1 = 110% of original size) "hover_scale": 1.1, # Card scale on focus (e.g., when selected via keyboard) # Increases the card size on focus # Value as a fraction (e.g., 1.05 = 105% of original size) "focus_scale": 1.05, # Duration of scale animation # Affects how fast the card changes size on hover or focus # Value in milliseconds "scale_anim_duration": 200, # Easing curve type for border thickness increase animation (on hover/focus) # Affects the "feel" of the animation (e.g., smooth acceleration or deceleration) # Possible values: strings corresponding to QEasingCurve.Type (e.g., "OutBack", "InOutQuad") "thickness_easing_curve": "OutBack", # Easing curve type for border thickness decrease animation (on hover/focus exit) # Affects the "feel" of returning to the default border width "thickness_easing_curve_out": "InBack", # Easing curve type for scale increase animation (on hover/focus) # Affects the "feel" of the scaling animation (e.g., with a "bounce" effect) # Possible values: strings corresponding to QEasingCurve.Type "scale_easing_curve": "OutBack", # Easing curve type for scale decrease animation (on hover/focus exit) # Affects the "feel" of returning to the original scale "scale_easing_curve_out": "InBack", # Gradient colors for animated border # List of dictionaries, each specifying position (0.0–1.0) and color in hex format # Affects the appearance of the border on hover or focus if card_animation_type="gradient" "gradient_colors": [ {"position": 0, "color": "#00fff5"}, # Starting color (cyan) {"position": 0.33, "color": "#FF5733"}, # Color at 33% (orange) {"position": 0.66, "color": "#9B59B6"}, # Color at 66% (purple) {"position": 1, "color": "#00fff5"} # Ending color (back to cyan) ], # Duration of fade animation when entering the detail page # Affects the speed of page appearance with fade animation # Value in milliseconds "detail_page_fade_duration": 350, # Duration of slide animation when entering the detail page # Affects the speed of page sliding animation # Value in milliseconds "detail_page_slide_duration": 500, # Duration of bounce animation when entering the detail page # Affects the speed of page "bounce" animation # Value in milliseconds "detail_page_bounce_duration": 400, # Duration of fade animation when exiting the detail page # Affects the speed of page disappearance with fade animation # Value in milliseconds "detail_page_fade_duration_exit": 350, # Duration of slide animation when exiting the detail page # Affects the speed of page sliding animation # Value in milliseconds "detail_page_slide_duration_exit": 500, # Duration of bounce animation when exiting the detail page # Affects the speed of page "compression" animation # Value in milliseconds "detail_page_bounce_duration_exit": 400, # Easing curve type for animations when entering the detail page # Applied to slide and bounce animations; affects the "feel" of movement # Possible values: strings corresponding to QEasingCurve.Type "detail_page_easing_curve": "OutCubic", # Easing curve type for animations when exiting the detail page # Applied to slide and bounce animations; affects the "feel" of movement # Possible values: strings corresponding to QEasingCurve.Type "detail_page_easing_curve_exit": "InCubic" } ``` --- ## 📝 Metadata (`metainfo.ini`) ```ini [Metainfo] name = My Custom Theme author = Your Name author_link = https://example.com description = Description of your theme. ``` --- ## 🖼 Screenshots Folder: `images/screenshots/` — place UI screenshots there. --- ## 🔡 Fonts and Icons (optional) - Fonts: `fonts/*.ttf` or `.otf` - Icons: `images/icons/*.svg/.png` ---