CSS variables

Set them on .vc-root in your stylesheet or through the style prop.

Group	Variables
Faces	`--vc-face`, `--vc-face-hover`, `--vc-face-active`, `--vc-text`, `--vc-text-hover`, `--vc-border`, `--vc-border-width`, `--vc-radius`, `--vc-shadow`
Edges	`--vc-edge`, `--vc-edge-hover`, `--vc-edge-active`
Corners	`--vc-corner`, `--vc-corner-hover`, `--vc-corner-active`
Type	`--vc-font-family`, `--vc-font-size`, `--vc-font-weight`
Home button	`--vc-home-background`, `--vc-home-text`, `--vc-home-hover`, `--vc-home-size` (28px with a mouse), `--vc-touch-target` (44px, the home size on a touch screen)
Extras	`--vc-background`, `--vc-focus`, `--vc-axis-x`, `--vc-axis-y`, `--vc-axis-z`, `--vc-axis-thickness`, `--vc-compass`

Set from props, do not override: --vc-size, --vc-scale, --vc-perspective, --vc-stage, --vc-edge-length, --vc-edge-thickness, --vc-corner-size, --vc-home-gap.

.my-dark-scene .vc-root {
  --vc-face: rgb(30 41 59 / 0.92);
  --vc-text: rgb(226 232 240);
  --vc-border: rgb(148 163 184 / 0.6);
  --vc-home-background: rgb(30 41 59 / 0.92);
  --vc-home-text: rgb(226 232 240);
}

Test hooks

Every part carries data-feature-id: view-cube-face-top, view-cube-edge-top-front, view-cube-corner-top-front-right; the root is view-cube, the pointer area view-cube-stage, the home button view-cube-home inside view-cube-home-slot. The root also carries data-home-placement.

Test hooks​

Test hooks