From 88983b7e34d3255b51b59e0a3ccfca9c2d7d58bd Mon Sep 17 00:00:00 2001
From: "Recuenco, David" <david.recuenco@adidas-group.com>
Date: Sun, 27 Nov 2022 15:16:15 +0100
Subject: [PATCH] ADD themes, load and save preferences

---
 package-lock.json                            | 13 +++
 package.json                                 |  1 +
 src/background/ipc.js                        | 21 ++++-
 src/background/main.js                       |  5 ++
 src/background/menu.js                       | 73 +++++++++++++++++
 src/background/preload.js                    | 17 +++-
 src/background/windows.js                    |  3 +
 src/foreground/App.vue                       | 83 ++++++++++++++++++-
 src/foreground/components/AppHeader.vue      |  2 +-
 src/foreground/components/ResourceDetail.vue |  2 +-
 src/foreground/events.js                     |  3 +
 src/foreground/main.js                       | 29 ++++++-
 src/foreground/pages/ContextResource.vue     |  4 +-
 src/foreground/pages/Home.vue                | 69 ++++++++++++----
 src/foreground/pages/Preferences.vue         | 59 +++++++++++++-
 src/foreground/styles/defs.scss              | 86 +++++++++++++++++++-
 src/foreground/styles/global.scss            | 10 ++-
 src/foreground/themes.js                     | 16 ++++
 18 files changed, 470 insertions(+), 26 deletions(-)
 create mode 100644 src/background/menu.js
 create mode 100644 src/background/windows.js
 create mode 100644 src/foreground/events.js
 create mode 100644 src/foreground/themes.js

diff --git a/package-lock.json b/package-lock.json
index 983c137..4e45e8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "eslint": "8.28.0",
         "js-yaml": "4.1.0",
         "luxon": "3.1.0",
+        "mitt": "3.0.0",
         "sass": "1.56.1",
         "vite": "3.2.4",
         "vue": "3.2.45",
@@ -6447,6 +6448,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==",
+      "dev": true
+    },
     "node_modules/mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -13699,6 +13706,12 @@
         "yallist": "^4.0.0"
       }
     },
+    "mitt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==",
+      "dev": true
+    },
     "mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
diff --git a/package.json b/package.json
index f9e56c4..f90a530 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "eslint": "8.28.0",
     "js-yaml": "4.1.0",
     "luxon": "3.1.0",
+    "mitt": "3.0.0",
     "sass": "1.56.1",
     "vite": "3.2.4",
     "vue": "3.2.45",
diff --git a/src/background/ipc.js b/src/background/ipc.js
index 0332119..6986e53 100644
--- a/src/background/ipc.js
+++ b/src/background/ipc.js
@@ -1,7 +1,7 @@
 const { homedir } = require('os');
 const { resolve } = require('path');
 const { readdir } = require('fs/promises');
-const { ipcMain } = require('electron');
+const { ipcMain, shell } = require('electron');
 const { KubeConfig, CoreV1Api, BatchV1Api, AppsV1Api, NetworkingV1Api, RbacAuthorizationV1Api } = require('@kubernetes/client-node');
 const { getDB, saveDB } = require('./db');
 const { loadKubeConfig } = require('./kubernetes');
@@ -174,6 +174,25 @@ function registerIpcHandlers() {
 
     stopLogEmitter(context, podName, containerName);
   });
+
+  ipcMain.handle('getPreferences', async () => {
+    const db = await getDB();
+
+    return db.preferences || {};
+  });
+
+  ipcMain.handle('savePreferences', async (event, data) => {
+    const db = await getDB();
+
+    db.preferences = data;
+
+    await saveDB(db);
+  });
+
+  const openGitHubRepository = () => shell.openExternal('https://github.com/RecuencoJones/vizkochos');
+
+  ipcMain.on('openGitHubRepository', openGitHubRepository);
+  ipcMain.handle('openGitHubRepository', openGitHubRepository);
 }
 
 module.exports = { registerIpcHandlers };
diff --git a/src/background/main.js b/src/background/main.js
index 8924f46..18c4334 100644
--- a/src/background/main.js
+++ b/src/background/main.js
@@ -2,6 +2,8 @@ const { resolve } = require('path');
 const { app, BrowserWindow, screen } = require('electron');
 const { registerIpcHandlers } = require('./ipc');
 const { isDevelopment } = require('./constants');
+const { setMenu } = require('./menu');
+const { windows } = require('./windows');
 
 if (require('electron-squirrel-startup')) {
   app.quit();
@@ -24,11 +26,14 @@ const createWindow = () => {
     const productionHtml = resolve(__dirname, '..', '..', 'dist', 'index.html');
     window.loadFile(productionHtml);
   }
+
+  windows.set('appWindow', window);
 };
 
 async function main() {
   await app.whenReady();
 
+  setMenu();
   registerIpcHandlers();
   createWindow();
 
diff --git a/src/background/menu.js b/src/background/menu.js
new file mode 100644
index 0000000..3a67c60
--- /dev/null
+++ b/src/background/menu.js
@@ -0,0 +1,73 @@
+const { Menu, ipcMain } = require('electron');
+const { windows } = require('./windows');
+
+const sendToAppWindow = (...data) => windows.get('appWindow').webContents.send(...data);
+
+/** @type {Array<import('electron').MenuItemConstructorOptions | import('electron'.MenuItem>} */
+const appMenu = [
+  {
+    role: 'fileMenu',
+    submenu: [
+      {
+        role: 'newContext',
+        label: 'New Context',
+        accelerator: 'CommandOrControl+N',
+        click() {
+          sendToAppWindow('app-menu-relay', { command: 'file:newContext' });
+        }
+      },
+      { type: 'separator' },
+      {
+        role: 'quickstart',
+        label: 'Go to Quickstart',
+        accelerator: 'CommandOrControl+Shift+H',
+        click() {
+          sendToAppWindow('app-menu-relay', { command: 'file:quickstart' });
+        }
+      },
+      { type: 'separator' },
+      {
+        role: 'preferences',
+        label: 'Preferences',
+        accelerator: 'CommandOrControl+,',
+        click() {
+          sendToAppWindow('app-menu-relay', { command: 'file:preferences' });
+        }
+      }
+    ]
+  },
+  { role: 'editMenu' },
+  { role: 'viewMenu' },
+  { role: 'windowMenu' },
+  {
+    role: 'helpMenu',
+    label: 'Help',
+    submenu: [
+      {
+        role: 'shortcuts',
+        label: 'Shortcuts',
+        accelerator: 'CommandOrControl+/',
+        click() {
+          sendToAppWindow('app-menu-relay', { command: 'help:shortcuts' });
+        }
+      },
+      {
+        role: 'openInGitHub',
+        label: 'Open in GitHub',
+        click() {
+          ipcMain.emit('openGitHubRepository');
+        }
+      }
+    ]
+  }
+];
+
+if (process.platform === 'darwin') {
+  appMenu.unshift({ role: 'appMenu' });
+}
+
+function setMenu() {
+  Menu.setApplicationMenu(Menu.buildFromTemplate(appMenu));
+}
+
+module.exports = { setMenu };
diff --git a/src/background/preload.js b/src/background/preload.js
index a9dcba2..39c9fa0 100644
--- a/src/background/preload.js
+++ b/src/background/preload.js
@@ -1,4 +1,5 @@
 const { contextBridge, ipcRenderer } = require('electron');
+const { EventEmitter } = require('events');
 
 const invokify = (name) => (...args) => ipcRenderer.invoke(name, ...args);
 
@@ -18,7 +19,10 @@ contextBridge.exposeInMainWorld('api', {
     'addRecentView',
     'listRecentViews',
     'listResourceType',
-    'getContextOverview'
+    'getContextOverview',
+    'getPreferences',
+    'savePreferences',
+    'openGitHubRepository'
   ),
   async subscribeToContainerLogs(contextName, podName, containerName, fn) {
     ipcRenderer.on(`logs:${ podName }:${ containerName }`, fn);
@@ -27,5 +31,16 @@ contextBridge.exposeInMainWorld('api', {
   async unsubscribeFromContainerLogs(contextName, podName, containerName) {
     ipcRenderer.removeAllListeners(`logs:${ podName }:${ containerName }`);
     await ipcRenderer.invoke('unsubscribeFromContainerLogs', contextName, podName, containerName);
+  },
+  subscribeToAppMenuEvents(...eventListeners) {
+    const events = new EventEmitter();
+
+    eventListeners.forEach(({ event, handler }) => {
+      events.on(event, handler);
+    });
+
+    ipcRenderer.on('app-menu-relay', (e, { command, ...data }) => {
+      events.emit(command, data);
+    });
   }
 });
diff --git a/src/background/windows.js b/src/background/windows.js
new file mode 100644
index 0000000..53b1f69
--- /dev/null
+++ b/src/background/windows.js
@@ -0,0 +1,3 @@
+const windows = new Map();
+
+module.exports = { windows };
diff --git a/src/foreground/App.vue b/src/foreground/App.vue
index ab2fa08..97e9f68 100644
--- a/src/foreground/App.vue
+++ b/src/foreground/App.vue
@@ -1,19 +1,76 @@
 <template>
-  <div class="app-wrapper">
+  <div class="app-wrapper" :class="theme || 'theme-default'">
     <AppHeader />
     <router-view class="app-view"></router-view>
     <AppBreadcrumb />
+    <div class="modal-wrapper" v-if="showShortcuts">
+      <section class="modal">
+        <div class="modal__header">
+          <button @click="showShortcuts = false">Close</button>
+        </div>
+        <div class="modal__main">
+          <table>
+            <tbody>
+              <tr>
+                <th>Create new context</th>
+                <td><pre>CmdOrCtrl + N</pre></td>
+              </tr>
+              <tr>
+                <th>Open Quickstart</th>
+                <td><pre>CmdOrCtrl + Shift + H</pre></td>
+              </tr>
+              <tr>
+                <th>Open Preferences</th>
+                <td><pre>CmdOrCtrl + ,</pre></td>
+              </tr>
+              <tr>
+                <th>View Shortcuts</th>
+                <td><pre>CmdOrCtrl + /</pre></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
   </div>
 </template>
 
 <script>
 import AppHeader from './components/AppHeader.vue';
 import AppBreadcrumb from './components/AppBreadcrumb.vue';
+import { events } from './events';
 
 export default {
   components: {
     AppHeader,
     AppBreadcrumb
+  },
+  data() {
+    return {
+      listener: this.loadPreferences.bind(this),
+      theme: null,
+      showShortcuts: false
+    }
+  },
+  methods: {
+    async loadPreferences() {
+      const preferences = await api.getPreferences();
+
+      this.theme = preferences.theme;
+    },
+
+    toggleShortcuts() {
+      this.showShortcuts = !this.showShortcuts;
+    }
+  },
+  async mounted() {
+    events.on('reload-preferences', this.listener);
+
+    await this.loadPreferences();
+  },
+
+  beforeUnmount() {
+    events.off('reload-preferences', this.listener);
   }
 }
 </script>
@@ -21,10 +78,13 @@ export default {
 <style lang="scss">
 
 .app-wrapper {
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
+  color: var(--color-main-text);
+  background-color: var(--color-main-background);
 
   .app-header,
   .app-breadcrumb {
@@ -35,5 +95,26 @@ export default {
     flex: 1;
     overflow: auto;
   }
+
+  .modal-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    overflow: auto;
+
+    .modal {
+      margin: 15% auto;
+      padding: 1rem;
+      width: 30vw;
+      border: 1px solid var(--color-modal-border);
+      background: var(--color-modal-background);
+      box-shadow: 2px 2px 5px 0 var(--color-box-shadow);
+    }
+  }
 }
 </style>
diff --git a/src/foreground/components/AppHeader.vue b/src/foreground/components/AppHeader.vue
index 8080408..0c41ef6 100644
--- a/src/foreground/components/AppHeader.vue
+++ b/src/foreground/components/AppHeader.vue
@@ -17,7 +17,7 @@
   height: 2rem;
   padding: .25rem 1rem;
   background-color: var(--color-header-background);
-  box-shadow: 0 0 3px 2px var(--color-header-background);
+  box-shadow: 0 0 3px 2px var(--color-box-shadow);
   z-index: 2;
 
   &__left,
diff --git a/src/foreground/components/ResourceDetail.vue b/src/foreground/components/ResourceDetail.vue
index c5f2ccd..0061508 100644
--- a/src/foreground/components/ResourceDetail.vue
+++ b/src/foreground/components/ResourceDetail.vue
@@ -161,7 +161,7 @@ export default {
   overflow: auto;
   padding: 1rem;
   background-color: var(--color-detail-background);
-  box-shadow: 0 0 3px 0 var(--color-dark-cookie);
+  box-shadow: 0 0 3px 0 var(--color-box-shadow);
 
   table {
     padding: .5rem;
diff --git a/src/foreground/events.js b/src/foreground/events.js
new file mode 100644
index 0000000..e34c2db
--- /dev/null
+++ b/src/foreground/events.js
@@ -0,0 +1,3 @@
+import mitt from 'mitt';
+
+export const events = mitt();
diff --git a/src/foreground/main.js b/src/foreground/main.js
index be53d9b..098f47a 100644
--- a/src/foreground/main.js
+++ b/src/foreground/main.js
@@ -45,4 +45,31 @@ const app = createApp(App);
 
 app.use(router);
 
-app.mount('#app');
+const appInstance = app.mount('#app');
+
+window.api.subscribeToAppMenuEvents(
+  {
+    event: 'file:newContext',
+    handler() {
+      router.push('/contexts/new');
+    }
+  },
+  {
+    event: 'file:quickstart',
+    handler() {
+      router.push('/');
+    }
+  },
+  {
+    event: 'file:preferences',
+    handler() {
+      router.push('/preferences');
+    }
+  },
+  {
+    event: 'help:shortcuts',
+    handler() {
+      appInstance.toggleShortcuts();
+    }
+  }
+);
diff --git a/src/foreground/pages/ContextResource.vue b/src/foreground/pages/ContextResource.vue
index 124d1c9..d21441f 100644
--- a/src/foreground/pages/ContextResource.vue
+++ b/src/foreground/pages/ContextResource.vue
@@ -97,7 +97,7 @@ export default {
 .resource.toolbar-layout {
   .view {
     padding: 0;
-    box-shadow: inset 0 0 3px 0 var(--color-dark-cookie);
+    box-shadow: inset 0 0 3px 0 var(--color-box-shadow);
 
     table {
       width: 100%;
@@ -107,7 +107,7 @@ export default {
       thead th {
         position: sticky;
         top: 0;
-        background: white;
+        background: var(--color-resource-table-header);
       }
 
       th {
diff --git a/src/foreground/pages/Home.vue b/src/foreground/pages/Home.vue
index 65b7d7e..1571195 100644
--- a/src/foreground/pages/Home.vue
+++ b/src/foreground/pages/Home.vue
@@ -1,21 +1,44 @@
 <template>
-  <main>
+  <main class="quickstart rows">
     <div>
-      <h4>Quickstart</h4>
-      <div>
-        <router-link to="/contexts/new">Add context</router-link>
-      </div>
+      <section>
+        <h1>Vizkochos</h1>
+        <h3>Visual Kubernetes</h3>
+      </section>
+    </div>
+    <div class="columns">
       <div>
-        <router-link to="/contexts">Manage contexts</router-link>
+        <section>
+          <h4>Quickstart</h4>
+          <div>
+            <router-link to="/contexts/new">Add context</router-link>
+          </div>
+          <div>
+            <router-link to="/contexts">Manage contexts</router-link>
+          </div>
+          <div>
+            <router-link to="/preferences">Manage preferences</router-link>
+          </div>
+        </section>
+        <section>
+          <h4>Recently viewed</h4>
+          <div v-for="(recent, index) of recents" :key="index">
+            <router-link :to="recent.path">{{ recent.name }}</router-link>
+          </div>
+        </section>
       </div>
       <div>
-        <router-link to="/preferences">Manage preferences</router-link>
-      </div>
-    </div>
-    <div>
-      <h4>Recently viewed</h4>
-      <div v-for="(recent, index) of recents" :key="index">
-        <router-link :to="recent.path">{{ recent.name }}</router-link>
+        <section>
+          <h4>Pinned</h4>
+          <div v-if="pinned"></div>
+          <div v-else><i>Nothing pinned yet</i></div>
+        </section>
+        <section>
+          <h4>Help</h4>
+          <div>
+            <a href="#" @click="openGitHubRepository" >View in GitHub</a>
+          </div>
+        </section>
       </div>
     </div>
   </main>
@@ -25,12 +48,16 @@
 export default {
   data() {
     return {
-      recents: null
+      recents: null,
+      pinned: null
     };
   },
   methods: {
     async loadRecents() {
       this.recents = await api.listRecentViews();
+    },
+    async openGitHubRepository() {
+      await api.openGitHubRepository();
     }
   },
   mounted() {
@@ -38,3 +65,17 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.quickstart {
+  padding: 10vh 20vw;
+
+  h1, h3 {
+    color: var(--color-header-background);
+  }
+
+  section {
+    padding: 2vh 1vw;
+  }
+}
+</style>
diff --git a/src/foreground/pages/Preferences.vue b/src/foreground/pages/Preferences.vue
index bdde257..8d07980 100644
--- a/src/foreground/pages/Preferences.vue
+++ b/src/foreground/pages/Preferences.vue
@@ -1,5 +1,60 @@
 <template>
-  <main>
-    Nothing here – yet
+  <main class="preferences">
+    <form @submit.prevent>
+      <table v-if="preferences">
+        <tbody>
+          <tr>
+            <th>Theme</th>
+            <td>
+              <select @change="handleChangeTheme">
+                <option v-for="theme of themes" :key="theme.class" :value="theme.class" :selected="preferences.theme === theme.class">{{ theme.name }}</option>
+              </select>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </form>
   </main>
 </template>
+
+<script>
+import { themes } from '../themes';
+import { events } from '../events';
+
+export default {
+  data() {
+    return {
+      themes,
+      preferences: null
+    };
+  },
+  methods: {
+    async loadPreferences() {
+      this.preferences = await api.getPreferences();
+    },
+
+    async savePreferences() {
+      await api.savePreferences({
+        theme: this.preferences.theme
+      });
+
+      events.emit('reload-preferences');
+    },
+
+    async handleChangeTheme(event) {
+      this.preferences.theme = event.target.value;
+
+      await this.savePreferences();
+    }
+  },
+  async mounted() {
+    await this.loadPreferences();
+  }
+}
+</script>
+
+<style lang="scss">
+.preferences {
+  padding: 10vh 20vw;
+}
+</style>
diff --git a/src/foreground/styles/defs.scss b/src/foreground/styles/defs.scss
index d2c1e2e..1b8fc2b 100644
--- a/src/foreground/styles/defs.scss
+++ b/src/foreground/styles/defs.scss
@@ -1,4 +1,5 @@
-:root {
+.theme-default,
+.theme-bizcocho {
   --color-dark-cookie: #935614;
   --color-light-cookie: #dbb37e;
   --color-cream: #fffdd0;
@@ -18,4 +19,87 @@
   --color-breadcrumb-background: var(--color-dark-cookie);
   --color-breadcrumb-link: var(--color-light-cookie);
   --color-detail-background: var(--color-light-cookie);
+  --color-resource-table-header: var(--color-light-cookie);
+  --color-modal-background: var(--color-glace);
+  --color-modal-border: var(--color-chocolate);
+  --color-box-shadow: var(--color-dark-cookie);
+}
+
+.theme-cli {
+  --color-dark: #000000;
+  --color-light: #ffffff;
+  --color-font: #5ff025;
+
+  --color-header-background: var(--color-dark);
+  --color-header-title: var(--color-font);
+  --color-header-link: var(--color-font);
+  --color-toolbar-background: var(--color-dark);
+  --color-main-background: var(--color-dark);
+  --color-main-text: var(--color-font);
+  --color-sidebar-background: var(--color-dark);
+  --color-sidebar-heading: var(--color-font);
+  --color-sidebar-link: var(--color-font);
+  --color-breadcrumb-background: var(--color-dark);
+  --color-breadcrumb-link: var(--color-font);
+  --color-detail-background: var(--color-dark);
+  --color-resource-table-header: var(--color-dark);
+  --color-modal-background: var(--color-dark);
+  --color-modal-border: var(--color-font);
+  --color-box-shadow: var(--color-font);
+}
+
+.theme-plain {
+  --color-dark: #000000;
+  --color-gray: #cccccc;
+  --color-light: #ffffff;
+
+  --color-header-background: unset;
+  --color-header-title: unset;
+  --color-header-link: unset;
+  --color-toolbar-background: unset;
+  --color-main-background: unset;
+  --color-main-text: unset;
+  --color-sidebar-background: unset;
+  --color-sidebar-heading: unset;
+  --color-sidebar-link: unset;
+  --color-breadcrumb-background: unset;
+  --color-breadcrumb-link: unset;
+  --color-detail-background: var(--color-light);
+  --color-resource-table-header: var(--color-light);
+  --color-modal-background: var(--color-light);
+  --color-modal-border: var(--color-dark);
+  --color-box-shadow: var(--color-gray);
+
+  a {
+    color: revert !important;
+    text-decoration: underline;
+  }
+}
+
+.theme-plain--dark {
+  --color-dark: #000000;
+  --color-gray: #cccccc;
+  --color-light: #ffffff;
+  --color-link: #ff7300;
+
+  --color-header-background: unset;
+  --color-header-title: var(--color-link);
+  --color-header-link: var(--color-link);
+  --color-toolbar-background: unset;
+  --color-main-background: var(--color-dark);
+  --color-main-text: var(--color-light);
+  --color-sidebar-background: unset;
+  --color-sidebar-heading: unset;
+  --color-sidebar-link: var(--color-link);
+  --color-breadcrumb-background: unset;
+  --color-breadcrumb-link: var(--color-link);
+  --color-detail-background: var(--color-dark);
+  --color-resource-table-header: var(--color-dark);
+  --color-modal-background: var(--color-dark);
+  --color-modal-border: var(--color-light);
+  --color-box-shadow: var(--color-gray);
+
+  a {
+    text-decoration: underline;
+  }
 }
diff --git a/src/foreground/styles/global.scss b/src/foreground/styles/global.scss
index 2cda966..02e6d3e 100644
--- a/src/foreground/styles/global.scss
+++ b/src/foreground/styles/global.scss
@@ -5,7 +5,6 @@ html, body, #app {
   width: 100%;
   height: 100%;
   font-family: Arial, Helvetica, sans-serif;
-  background-color: var(--color-main-background);
 }
 
 .router-link-exact-active {
@@ -102,3 +101,12 @@ dl {
     transition-property: left, top, opacity;
   }
 }
+
+.columns {
+  display: flex;
+  flex-direction: row;
+
+  > * {
+    flex: 1;
+  }
+}
diff --git a/src/foreground/themes.js b/src/foreground/themes.js
new file mode 100644
index 0000000..a74ac31
--- /dev/null
+++ b/src/foreground/themes.js
@@ -0,0 +1,16 @@
+export const themes = [
+  {
+    name: 'Bizcocho',
+    class: 'theme-bizcocho',
+    default: true
+  }, {
+    name: 'CLI',
+    class: 'theme-cli'
+  }, {
+    name: 'Plain',
+    class: 'theme-plain'
+  }, {
+    name: 'Plain (dark)',
+    class: 'theme-plain--dark'
+  }
+];