add a theme preview (#573)

inline-script.js

@@ -1,6 +1,7 @@
 // For perf reasons, this script is run inline to quickly set certain styles.
 // To allow CSP to work correctly, we also calculate a sha256 hash during
 // the build process and write it to inline-script-checksum.json.
+// TODO: these should not have to be defined twice, once here and again in themes.js
 window.__themeColors = {
   'default': 'royalblue',
   scarlet: '#e04e41',

routes/_pages/settings/instances/[instanceName].html

@@ -17,14 +17,25 @@
     </div>
     <h2>Theme:</h2>
     <form class="theme-chooser" aria-label="Choose a theme">
-      {#each themes as theme}
+        <div class="theme-groups">
-        <div class="theme-group">
+          {#each themeGroups as themeGroup}
-          <input type="radio" id="choice-theme-{theme.name}"
+            <div class="theme-group">
-                 value={theme.name} checked="$currentTheme === theme.name"
+              {#each themeGroup.themes as theme}
-                 bind:group="selectedTheme" on:change="onThemeChange()">
+                <div class="theme-picker">
-          <label for="choice-theme-{theme.name}">{theme.label}</label>
+                  <input type="radio" id="choice-theme-{theme.name}"
+                         value={theme.name} checked="$currentTheme === theme.name"
+                         bind:group="selectedTheme" on:change="onThemeChange()">
+                  <div class="theme-preview theme-preview-{themeGroup.dark ? 'dark' : 'light'}"
+                       style="background-color: {theme.color};" >
+                  </div>
+                  <label class="theme-picker-label" for="choice-theme-{theme.name}">
+                    {theme.label}
+                  </label>
+                </div>
+              {/each}
+            </div>
+          {/each}
         </div>
-      {/each}
     </form>
 
     <form class="instance-actions" aria-label="Switch to or log out of this instance">
@@ -71,13 +82,37 @@
     padding: 20px;
     line-height: 2em;
   }
+  .theme-groups {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
   .theme-group {
     display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1;
+  }
+  .theme-picker {
+    display: flex;
+    flex-direction: row;
     align-items: center;
   }
-  .theme-chooser label {
+  .theme-picker-label {
     margin: 2px 10px 0;
   }
+  .theme-preview {
+    width: 1.5em;
+    height: 1.5em;
+    box-sizing: border-box;
+    border-radius: 2px;
+    margin: 0 2px 0 10px;
+  }
+  .theme-preview-dark {
+    border: 2px solid #000;
+  }
+  .theme-preview-light {
+    border: 2px solid #dadada;
+  }
   .instance-actions {
     width: 100%;
     display: flex;
@@ -93,6 +128,13 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  @media (max-width: 479px) {
+    .theme-groups {
+      grid-template-columns: 1fr;
+    }
+  }
+
 </style>
 <script>
   import { store } from '../../../_store/store'
@@ -125,7 +167,17 @@
     }),
     computed: {
       instanceName: ({ params }) => params.instanceName,
-      verifyCredentials: ({ $verifyCredentials, instanceName }) => $verifyCredentials && $verifyCredentials[instanceName]
+      verifyCredentials: ({ $verifyCredentials, instanceName }) => $verifyCredentials && $verifyCredentials[instanceName],
+      themeGroups: ({ themes }) => ([
+        {
+          dark: false,
+          themes: themes.filter(_ => !_.dark)
+        },
+        {
+          dark: true,
+          themes: themes.filter(_ => _.dark)
+        }
+      ])
     },
     methods: {
       onThemeChange () {

routes/_static/themes.js

@@ -1,55 +1,81 @@
 const themes = [
   {
     name: 'default',
-    label: 'Royal (default)'
+    label: 'Royal (default)',
+    dark: false,
+    color: 'royalblue'
   },
   {
     name: 'scarlet',
-    label: 'Scarlet'
+    label: 'Scarlet',
+    dark: false,
+    color: '#e04e41'
   },
   {
     name: 'seafoam',
-    label: 'Seafoam'
+    label: 'Seafoam',
+    dark: false,
+    color: '#177380'
   },
   {
     name: 'hotpants',
-    label: 'Hotpants'
+    label: 'Hotpants',
+    dark: false,
+    color: 'hotpink'
   },
   {
     name: 'oaken',
-    label: 'Oaken'
+    label: 'Oaken',
+    dark: false,
+    color: 'saddlebrown'
   },
   {
     name: 'majesty',
-    label: 'Majesty'
+    label: 'Majesty',
+    dark: false,
+    color: 'blueviolet'
   },
   {
     name: 'gecko',
-    label: 'Gecko'
+    label: 'Gecko',
+    dark: false,
+    color: '#4ab92f'
   },
   {
     name: 'ozark',
-    label: 'Ozark'
+    label: 'Ozark',
+    dark: true,
+    color: '#5263af'
   },
   {
     name: 'cobalt',
-    label: 'Cobalt'
+    label: 'Cobalt',
+    dark: true,
+    color: '#08439b'
   },
   {
     name: 'sorcery',
-    label: 'Sorcery'
+    label: 'Sorcery',
+    dark: true,
+    color: '#ae91e8'
   },
   {
     name: 'punk',
-    label: 'Punk'
+    label: 'Punk',
+    dark: true,
+    color: '#e04e41'
   },
   {
     name: 'riot',
-    label: 'Riot'
+    label: 'Riot',
+    dark: true,
+    color: 'hotpink'
   },
   {
     name: 'hacker',
-    label: 'Hacker'
+    label: 'Hacker',
+    dark: true,
+    color: '#4ab92f'
   }
 ]