<!DOCTYPE html>
<html>
    <head>
        <title>Test themes &ndash; 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>