54 lines
2 KiB
HTML
54 lines
2 KiB
HTML
<!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>
|