Add rainbow bar to test-themes

maghoff · Aug 31, 2018 · 7b1a025 · 7b1a025
1 parent 94db59c
commit 7b1a025
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/assets/test-themes.html b/assets/test-themes.html
@@ -16,9 +16,18 @@
             .proto {
                 display: none;
             }
+            #bar {
+                display: flex;
+                width: 100%;
+            }
+            #bar>div {
+                height: 30px;
+                flex-grow: 1;
+            }
         </style>
     </head>
     <body>
+        <div id="bar"></div>
         <div class="proto">
             <div class="themed">The <span class="link">quick</span> brown <span class="link">dog</span> jumps over the lazy log <span class="theme-name"></span></div>
             <div class="themed"><input type=search placeholder=placeholder> <input type=search value="Bacon"></div>
@@ -33,6 +42,13 @@
                 block.querySelector(".theme-name").textContent = theme;
                 body.appendChild(block);
             }
+
+            const bar = document.querySelector("#bar");
+            for (theme of themes) {
+                const block = document.createElement("div");
+                block.className = `theme-${theme} themed`;
+                bar.appendChild(block);
+            }
         </script>
     </body>
 </html>