Photo Sphere Viewer ships with a default dark theme. You can customize it by building the stylesheet yourself from the SCSS source and providing variable overrides.
The source files use SASS modules and must be imported with @use (not @import) in order for variable overrides to work.
// main stylesheet
@use '@photo-sphere-viewer/core/index.scss' as psv with (
$loader-color: rgba(0, 0, 0, .5),
$loader-width: 100px,
);
// plugin stylesheets (no variables needed for most plugins)
@use '@photo-sphere-viewer/markers-plugin/index.scss' as psvMarkers;
@use '@photo-sphere-viewer/virtual-tour-plugin/index.scss' as psvVirtualTour;
Global
| Variable | Default | Description |
|---|
$main-background | radial-gradient(...) | Viewer background, visible when no panorama is loaded |
$element-focus-outline | 2px solid #007cff | Outline applied to focusable elements (navbar, panel, etc.) |
Loader
| Variable | Default | Description |
|---|
$loader-color | rgba(255, 255, 255, .7) | Color of the loader bar and text |
$loader-bg-color | rgba(61, 61, 61, .5) | Color of the loader background |
$loader-width | 150px | Size of the loader |
$loader-tickness | 10px | Thickness of the loader bar |
$loader-border | 3px | Inner border of the loader |
$loader-font | 600 16px sans-serif | Font of the loading text |
Navbar
| Variable | Default | Description |
|---|
$navbar-height | 40px | Height of the navbar |
$navbar-background | rgba(61, 61, 61, .5) | Background color of the navbar |
$caption-font | 16px sans-serif | Font of the caption text |
$caption-text-color | rgba(255, 255, 255, .7) | Text color of the caption |
| Variable | Default | Description |
|---|
$buttons-height | 20px | Inner height of the buttons |
$buttons-color | rgba(255, 255, 255, .7) | Icon color of the buttons |
$buttons-background | transparent | Background color of the buttons |
$buttons-active-background | rgba(255, 255, 255, .2) | Background color of active buttons |
$buttons-disabled-opacity | .5 | Opacity of disabled buttons |
$buttons-hover-scale | 1.2 | Scale applied on mouse hover |
$buttons-hover-scale-delay | 200ms | Duration of the scale animation |
Zoom range
| Variable | Default | Description |
|---|
$zoom-range-width | 80px | Width of the zoom slider |
$zoom-range-tickness | 1px | Thickness of the zoom track |
$zoom-range-diameter | 7px | Size of the zoom handle |
$zoom-range-media-min-width | 600px | Viewport width below which the zoom range is hidden |
| Variable | Default | Description |
|---|
$tooltip-background | rgba(61, 61, 61, .8) | Background of tooltips |
$tooltip-radius | 4px | Border radius of tooltips |
$tooltip-padding | .5em 1em | Content padding of tooltips |
$tooltip-arrow-size | 7px | Size of the tooltip arrow |
$tooltip-max-width | 200px | Maximum width of tooltip content |
$tooltip-text-color | rgb(255, 255, 255) | Text color of tooltips |
$tooltip-font | 14px sans-serif | Font of tooltips |
$tooltip-text-shadow | 0 1px #000 | Shadow applied to tooltip text |
$tooltip-shadow-color | rgba(90, 90, 90, .7) | Color of the tooltip drop shadow |
$tooltip-shadow-offset | 3px | Size of the tooltip drop shadow |
$tooltip-animate-offset | 5px | Distance travelled on the show animation |
$tooltip-animate-delay | 100ms | Duration of the show animation |
Panel
| Variable | Default | Description |
|---|
$panel-background | rgba(10, 10, 10, .7) | Background of the side panel |
$panel-width | 400px | Default width of the side panel |
$panel-padding | 1em | Content padding of the side panel |
$panel-text-color | rgb(220, 220, 220) | Default text color in the side panel |
$panel-font | 16px sans-serif | Default font in the side panel |
$panel-animate-delay | 100ms | Duration of the show animation |
| Variable | Default | Description |
|---|
$panel-title-font | 24px sans-serif | Font of the menu title |
$panel-title-icon-size | 24px | Size of the menu title icon |
$panel-title-margin | 24px | Margin of the menu title |
$panel-menu-item-height | 1.5em | Minimum height of a menu item |
$panel-menu-item-padding | .5em 1em | Padding of a menu item |
$panel-menu-odd-background | rgba(255, 255, 255, .1) | Background color of odd menu items |
$panel-menu-even-background | transparent | Background color of even menu items |
$panel-menu-hover-background | rgba(255, 255, 255, .2) | Background color of menu items on hover |
Notification
| Variable | Default | Description |
|---|
$notification-position-from | -$navbar-height | Position when notification is hidden |
$notification-position-to | $navbar-height * 2 | Position when notification is visible |
$notification-animate-delay | 200ms | Duration of the show animation |
$notification-background | $tooltip-background | Background color (inherits tooltip default) |
$notification-radius | $tooltip-radius | Border radius (inherits tooltip default) |
$notification-padding | $tooltip-padding | Content padding (inherits tooltip default) |
$notification-font | $tooltip-font | Font (inherits tooltip default) |
$notification-text-color | $tooltip-text-color | Text color (inherits tooltip default) |
Overlay
| Variable | Default | Description |
|---|
$overlay-opacity | .8 | Opacity of the overlay background |
$overlay-icon-color | rgb(48, 48, 48) | Color of the overlay icon (when SVG) |
$overlay-title-font | 30px sans-serif | Font of the overlay title |
$overlay-title-color | black | Color of the overlay title |
$overlay-text-font | 20px sans-serif | Font of the overlay body text |
$overlay-text-color | rgba(0, 0, 0, .8) | Color of the overlay body text |
$overlay-image-size | 50% (portrait) / 33% (landscape) | Image/icon size depending on screen orientation |
