<!DOCTYPE html> <html> <head> <title>Test themes – Sausagewiki</title> <link href="themes.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <style> .themed { padding: 10px; background: var(--theme-main); color: var(--theme-text); } .link { color: var(--theme-link); } .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> </div> <script> const themes = ["red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal", "green", "light-green", "lime", "yellow", "amber", "orange", "deep-orange", "brown", "gray", "blue-gray"]; const body = document.querySelector("body"); const proto = document.querySelector(".proto"); for (theme of themes) { const block = proto.cloneNode(true); block.className = `theme-${theme}`; 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>