<!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>