Skip to main content

Settings & Preferences

HyperTheme includes customization options that let you tailor the editing experience to your workflow. These settings persist across sessions, so you only need to configure them once!

Handle Customization​

The transformation handles (those visual guides when you select a layer) can be customized to match your preferences and work style.

Handle Opacity​

Control how visible the handles are:

  • 10% - Nearly invisible, maximum clarity
  • 25% - Subtle, minimal interference
  • 50% - Balanced visibility
  • 100% - Fully visible (default)

How to change:

  1. Open Settings menu (top navigation)
  2. Select Handle Opacity
  3. Choose your preferred level
  4. Handles update immediately

Or use the keyboard shortcut:

  • Alt+H (tap) - Cycles through: 10% → 25% → 50% → 100%
  • Alt+H (hold) - Temporarily hides handles completely

Handle Line Thickness​

Control how thick the handle lines are:

  • 3px - Thin, delicate lines
  • 5px - Standard thickness (default)
  • 7px - Thicker, easier to see
  • 10px - Maximum thickness, best visibility

How to change:

  1. Open Settings menu
  2. Select Handle Line Thickness
  3. Choose your preferred thickness
  4. Handles update immediately

When to Use Different Settings​

Handle Opacity​

Use 10% opacity when:

  • Taking screenshots of your theme
  • Working on fine visual details
  • Previewing the final look
  • Handles are getting in the way
  • Presenting your design to others

Use 25% opacity when:

  • You want handles present but subtle
  • Working on dense layouts with many layers
  • Balancing design visibility with control access
  • General editing with minimal distraction

Use 50% opacity when:

  • Balancing handle visibility with design clarity
  • Working on complex multi-layer designs
  • You want handles visible but not dominant
  • General purpose editing

Use 100% opacity when:

  • Learning the interface
  • Precise transformations needed
  • Working with small layers
  • Maximum control visibility required
  • Teaching or demonstrating features

Handle Line Thickness​

Use 3px thickness when:

  • Working on high-resolution displays
  • Prefer minimal visual weight
  • Handles feel too bulky at default size
  • Working with small, detailed layers

Use 5px thickness when:

  • Standard editing (default works great!)
  • Balanced visibility and clarity
  • General purpose work

Use 7px thickness when:

  • Larger displays or 4K monitors
  • Handles feel too thin
  • Working from a distance
  • Better visibility needed

Use 10px thickness when:

  • Maximum visibility required
  • Accessibility needs
  • Demonstrating or teaching
  • Working on very large displays
  • Vision impairment considerations

Workflow Tips​

The Screenshot Workflow​

Perfect for capturing clean screenshots:

  1. Before screenshot:

    • Tap Alt+H to cycle to 10% opacity
    • Or hold Alt+H to hide temporarily

  2. Take screenshot (Tools → Take Screenshot)

  3. After screenshot:

    • Tap Alt+H to cycle back to your preferred opacity
    • Or release Alt+H if you were holding

Pro tip: Hold Alt+H while taking screenshots for instant hide/unhide!

The Presentation Workflow​

When showing your theme to others:

Before presenting:
1. Settings → Handle Opacity → 10%
2. This way handles barely visible
3. Focus stays on your design

When editing again:
1. Tap Alt+H a few times
2. Cycle back to 50% or 100%
3. Resume editing

The Dense Layout Workflow​

When working with many overlapping layers:

Standard approach:
- Use 25% or 50% opacity
- Handles visible but not overwhelming
- Can still see your design clearly

Alternative:
- Use 100% opacity
- Hold Alt+H when you need clear view
- Release to continue editing

The High-DPI Display Workflow​

If handles look too thin on your 4K monitor:

1. Settings → Handle Line Thickness → 7px or 10px
2. Much easier to see and click
3. Better proportions on high-res displays

Settings Persistence​

Your preferences are saved automatically:

  • Handle opacity setting persists across sessions
  • Line thickness setting persists across sessions
  • No need to reconfigure each time you open HyperTheme
  • Settings are tied to your user account

What this means:

  • Set it once, use it forever
  • Settings follow you across devices (if logged in)
  • Project-independent (not saved per-project)

Quick Reference​

Keyboard Shortcuts​

ShortcutActionNotes
Alt+H (tap)Cycle opacity10% → 25% → 50% → 100%
Alt+H (hold)Hide temporarilyWhile key is held
SettingMenu PathOptions
Handle OpacitySettings → Handle Opacity10%, 25%, 50%, 100%
Line ThicknessSettings → Handle Line Thickness3px, 5px, 7px, 10px

Common Scenarios​

"I can barely see my handles!"​

Solution:

  1. Settings → Handle Opacity → 100%
  2. Settings → Handle Line Thickness → 7px or 10px
  3. Handles now super visible!

Or:

  • You might have accidentally cycled to 10% opacity
  • Tap Alt+H three times to get back to 100%

"Handles are blocking my view!"​

Solution:

  1. Tap Alt+H to cycle to lower opacity
  2. Or hold Alt+H while inspecting details
  3. Or Settings → Handle Opacity → 10%

"I keep accidentally changing opacity"​

Cause: Accidentally hitting Alt+H shortcut

Solution:

  • Be aware of shortcut (Alt+H tap cycles, hold hides)
  • If changed accidentally, tap Alt+H until back to desired level
  • Your preferred setting in menu remains unchanged

"My settings reset after closing HyperTheme"​

This shouldn't happen! Settings should persist.

If they don't:

  • Check if you're logged in (settings tied to account)
  • Try setting preferences again
  • Contact support if issue continues

Advanced Customization​

Finding Your Perfect Setup​

Experiment to find what works for YOU:

Try this workflow:

  1. Start with defaults (50% opacity, 5px thickness)
  2. Work for 10 minutes
  3. Adjust one setting
  4. Work for another 10 minutes
  5. Keep or revert the change
  6. Repeat with other settings

After a few days, you'll naturally settle on:

  • Your preferred opacity level
  • Your preferred line thickness
  • When you want to temporarily change them

Creating "Modes"​

Use opacity cycling to create workflow modes:

Editing Mode (100%):

  • Tap Alt+H until 100%
  • Maximum control visibility
  • Precise transformations

Design Mode (25%):

  • Tap Alt+H until 25%
  • Handles subtle
  • Focus on visual design

Preview Mode (10% or hide):

  • Tap Alt+H until 10%
  • Or hold Alt+H
  • See final result

Quick cycle between modes:

  • Just tap Alt+H
  • Instant mode switching!

Display Considerations​

Standard 1080p Displays​

Recommended settings:

  • Opacity: 50% or 100%
  • Thickness: 5px (default)
  • Works great out of the box!

4K/High-DPI Displays​

Recommended settings:

  • Opacity: 50% or 100%
  • Thickness: 7px or 10px
  • Handles maintain visual weight

Laptops with Small Screens​

Recommended settings:

  • Opacity: 25% or 50%
  • Thickness: 3px or 5px
  • Maximize screen real estate

Large 27"+ Monitors​

Recommended settings:

  • Opacity: 50% or 100%
  • Thickness: 7px or 10px
  • Better visibility at distance

Accessibility​

Vision Impairment​

Maximize handle visibility:

  • Opacity: 100%
  • Thickness: 10px
  • Handles become much easier to see
  • Better contrast with canvas

Color Blindness​

Handle colors are designed to be distinguishable:

  • Red corner handles
  • Blue rotation handles
  • Yellow anchor point handles
  • High contrast with backgrounds

Thickness helps:

  • Use 7px or 10px thickness
  • Easier to distinguish handle types
  • Better visibility overall

Pro Tips​

The "Clean Screenshot" Habit​

Get in the habit:

  1. Before screenshot: Hold Alt+H
  2. Take screenshot
  3. Release Alt+H
  4. Done!

Becomes automatic after a few times.

The "Cycle Check"​

Not sure what opacity you're at?

  • Tap Alt+H and watch the change
  • Handles will shift to next level
  • You'll see the difference immediately
  • Tap again if needed

The "Temporary Hide"​

When showing someone your design:

  • Hold Alt+H during explanation
  • Handles gone, design visible
  • Release when done
  • Resume editing immediately

The "Dense Layout" Strategy​

When working with 20+ layers:

  1. Use 25% opacity normally
  2. Hold Alt+H when selecting
  3. Handles hide, click target layer
  4. Release Alt+H
  5. Edit selected layer with handles visible

Best Practices​

For most users:

  • Start with 50% opacity, 5px thickness
  • Adjust only if you feel the need
  • Don't overthink it!

For screenshot work:

  • Learn the Alt+H hold technique
  • Instant hide/show
  • No menu navigation needed

For presentations:

  • Set to 10% before presenting
  • Or use Alt+H hold
  • Professional, clean look

For learning:

  • Use 100% opacity
  • Maximum visibility
  • See all controls clearly

Next Steps​

Remember: These settings are personal preferences. There's no "right" answer—use what feels best for YOUR workflow! ⚙️✨