Settings: Focus Ring

PRO Feature

The Focus Ring pane is Pro-locked. Users on the free tier do not see a focus ring, and the pane shows the lock overlay. Saved values are kept and come back when you upgrade.

The Focus Ring pane

Enable

Show focus ring

Appearance

PlacementOutsideInside

Width2 px

Corner radius15 px

Color

Ring gradient

The pane has two groups: an Enable toggle and an Appearance group that dims whenever the ring is off. The ring itself is drawn over the composited screen; it never resizes or moves your windows.

Focus Ring Styles

Active Window

Solid Color

Inactive

No Focus Ring

Active Window

Gradient

Controls

Control	Default	What it does	Config key
Show focus ring	on	Master switch for the ring.	`layout.focusRing.enabled`
Placement	Inside	Inside draws the ring over the window's own frame (overlapping its content); Outside draws it around the window, overlapping the desktop.	`layout.focusRing.placement`
Width	`2 px`	Ring thickness. Slider 1–10.	`layout.focusRing.width`
Corner radius	`15 px`	Rounded corners. Slider 0–32.	`layout.focusRing.cornerRadius`
Color	`#7FC8FF`	The solid ring color (also the gradient start color). The picker includes an opacity slider; hex with alpha is stored as `#RRGGBBAA`.	`layout.focusRing.colorActive`
Ring gradient	off	Replaces the solid color with a two-stop gradient from Color to a second color, at a dial-picked angle. Reveals two extra rows when on.	`layout.focusRing.colorGradient`
Gradient end color	`#c7ff7f`	Second stop of the gradient (only visible when Ring gradient is on).	`layout.focusRing.colorGradient.to`
Angle (dial)	`180°`	A circular dial, tinted with a live preview of your two colors. `0` = bottom → top, `90` = left → right, `180` = top → bottom, `270` = right → left.	`layout.focusRing.colorGradient.angle`

Color formats

FazerWM stores colors as RGB hex strings: #RRGGBB, or #RRGGBBAA when you pick an opacity.

YAML equivalent

layout:
  focusRing:
    enabled: true
    placement: inside        # "inside" or "outside"
    width: 2
    cornerRadius: 15
    colorActive: '#7FC8FF'
    # Optional gradient (takes precedence over the solid color):
    # colorGradient:
    #   to: '#c7ff7f'
    #   angle: 180