diff --git a/demo/client.ts b/demo/client.ts
index 03a9044c..8bf783eb 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -311,6 +311,7 @@ function initOptions(term: TerminalType): void {
     fontWeightBold: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
     logLevel: ['debug', 'info', 'warn', 'error', 'off'],
     rendererType: ['dom', 'canvas'],
+    theme: ['default', 'sapphire', 'light'],
     wordSeparator: null
   };
   const options = Object.getOwnPropertyNames(term.options);
@@ -385,7 +386,63 @@ function initOptions(term: TerminalType): void {
     const input = <HTMLInputElement>document.getElementById(`opt-${o}`);
     addDomListener(input, 'change', () => {
       console.log('change', o, input.value);
-      term.options[o] = input.value;
+      let value: any = input.value;
+      if (o === 'theme') {
+        switch (input.value) {
+          case 'default':
+            value = undefined;
+            break;
+          case 'sapphire':
+            // Color source: https://github.com/Tyriar/vscode-theme-sapphire
+            value = {
+              background: '#1c2431',
+              foreground: '#cccccc',
+              selectionBackground: '#399ef440',
+              black: '#666666',
+              blue: '#399ef4',
+              brightBlack: '#666666',
+              brightBlue: '#399ef4',
+              brightCyan: '#21c5c7',
+              brightGreen: '#4eb071',
+              brightMagenta: '#b168df',
+              brightRed: '#da6771',
+              brightWhite: '#efefef',
+              brightYellow: '#fff099',
+              cyan: '#21c5c7',
+              green: '#4eb071',
+              magenta: '#b168df',
+              red: '#da6771',
+              white: '#efefef',
+              yellow: '#fff099',
+            };
+            break;
+          case 'light':
+            // Color source: https://github.com/microsoft/vscode/blob/main/extensions/theme-defaults/themes/light_plus.json
+            value = {
+              background: '#ffffff',
+              foreground: '#333333',
+              selectionBackground: '#add6ff',
+              black: '#000000',
+              blue: '#0451a5',
+              brightBlack: '#666666',
+              brightBlue: '#0451a5',
+              brightCyan: '#0598bc',
+              brightGreen: '#14ce14',
+              brightMagenta: '#bc05bc',
+              brightRed: '#cd3131',
+              brightWhite: '#a5a5a5',
+              brightYellow: '#b5ba00',
+              cyan: '#0598bc',
+              green: '#00bc00',
+              magenta: '#bc05bc',
+              red: '#cd3131',
+              white: '#555555',
+              yellow: '#949800',
+            };
+            break;
+        }
+      }
+      term.options[o] = value;
     });
   });
 }