Skip to content
screenjson

screenjson-ui

Theme screenjson-ui dark and light

Switch the ScreenJSON viewer between dark and light themes, and persist the user's choice.

Last updated January 2026

Set the initial theme

new ScreenJSONUI({
  element: 'viewer',
  src: '/screenplay.json',
  theme: 'dark',              // or 'light'
});

Toggle at runtime

const viewer = new ScreenJSONUI({ element: 'viewer', src: '/screenplay.json' });

document.getElementById('toggle').addEventListener('click', () => {
  viewer.setTheme(viewer.theme === 'dark' ? 'light' : 'dark');
});

Respect prefers-color-scheme

const initial = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

new ScreenJSONUI({ element: 'viewer', src: '/screenplay.json', theme: initial });

Persist across reloads

const saved = localStorage.getItem('sj-theme');
const initial = saved || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');

const viewer = new ScreenJSONUI({ element: 'viewer', src: '/screenplay.json', theme: initial });

document.getElementById('toggle').addEventListener('click', () => {
  const next = viewer.theme === 'dark' ? 'light' : 'dark';
  viewer.setTheme(next);
  localStorage.setItem('sj-theme', next);
});

Next