Theme System

​

Theme Toggle

​

Switching Themes

• Navigate to View → Appearance → Light Theme
• Check the option to enable light mode
• Uncheck to return to dark mode

• Press Ctrl+K to open the command palette
• Type “Toggle Theme” and press Enter
• The theme switches immediately

​

Theme Persistence

• Settings are stored in TagQt’s configuration
• The selected theme is restored when you reopen the application
• No manual configuration required

​

Dark Theme (Default)

​

Color Palette

• Base: #050505 (Window background)
• Mantle: #121212 (Secondary background)
• Crust: #000000 (Deepest black)

• Text: #ffffff (Primary text)
• Subtext0: #b3b3b3 (Secondary text)
• Subtext1: #d4d4d4 (Emphasized text)

• Surface0: #1e1e1e (Input backgrounds)
• Surface1: #2d2d2d (Buttons)
• Surface2: #3d3d3d (Hover states)

• Overlay0: #404040
• Overlay1: #525252
• Overlay2: #737373

• Accent: #ff2e63 (Primary pink/red)
• Accent Hover: #ff477e (Lighter on hover)
• Accent Dim: #991b3b (Darker variant)
• Red: #ff5555 (Error/warning states)

​

Design Philosophy

• High contrast for readability
• Reduced eye strain in low-light environments
• Pink accent provides visual interest
• Consistent spacing with 8px corner radius

​

Light Theme

​

Color Palette

• Base: #f5f5f5 (Window background)
• Mantle: #e8e8e8 (Secondary background)
• Crust: #ffffff (Pure white)

• Text: #1a1a1a (Primary text)
• Subtext0: #666666 (Secondary text)
• Subtext1: #333333 (Emphasized text)

• Surface0: #ffffff (Input backgrounds)
• Surface1: #f0f0f0 (Buttons)
• Surface2: #e0e0e0 (Hover states)

• Overlay0: #cccccc
• Overlay1: #b3b3b3
• Overlay2: #999999

• Accent: #e01e4f (Adjusted for light background)
• Accent Hover: #c91847
• Accent Dim: #a8153b

​

Design Philosophy

• Optimized for bright environments
• Maintains sufficient contrast
• Darker accent ensures visibility
• Button text uses white for accent buttons

​

Theme Implementation

class Theme:
    _is_light = False
    
    # Color properties (change based on mode)
    BASE = "#050505"
    TEXT = "#ffffff"
    ACCENT = "#ff2e63"
    # ... more properties
    
    @classmethod
    def set_light_mode(cls, enabled):
        # Switches all colors to light variants

​

Global Stylesheet

• Main window and dialogs
• Input fields and buttons
• Tree widgets and lists
• Menus and scrollbars
• Progress bars and tooltips

​

Dynamic Updates

1. All color properties are updated
2. Global stylesheet is regenerated
3. All widgets refresh their appearance
4. Current toasts are closed
5. No application restart required

​

Styling Details

​

Typography

• Font Family: Segoe UI (or system sans-serif)
• Base Font Size: 14px
• Button Font: 13px, weight 600
• Header Font: 12px uppercase for tree headers

​

Corner Radius

• Standard radius: 8px for containers
• Button radius: 8px
• Small elements: 4px (progress bars, scrollbars)

​

Component Theming

• Default: Surface colors with hover effects
• Primary: Accent background with white text
• Secondary: Outlined with surface fill

• Alternating row backgrounds
• Selected items show accent color
• Hover state provides subtle feedback

• Background color changes in Global Edit Mode
• Consistent with main window theme
• Scrollbar matches theme palette

​

Accessibility

​

Contrast Ratios

• Text on background: High contrast
• Accent on light: Adjusted for visibility
• Disabled states: Clearly distinguished

​

Visual Feedback

• Hover states on all interactive elements
• Focus indicators on input fields
• Selection states clearly visible
• Progress indicators use accent color

​

Customization

• Color values in the Theme class
• Font family and sizes
• Corner radius
• Spacing and padding values

​

Related Features