-
Notifications
You must be signed in to change notification settings - Fork 182
/
preview.mjs
73 lines (62 loc) · 1.71 KB
/
preview.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import './css/normalize.css'
import sakura from './scss/sakura.scss?inline'
import earthly from './scss/sakura-earthly.scss?inline'
import vader from './scss/sakura-vader.scss?inline'
import dark from './scss/sakura-dark.scss?inline'
console.log("Loading preview.js")
const head = document.head
const themes = [
{
name: "Sakura (default)",
css: sakura,
},
{
name: "sakura-earthly",
css: earthly,
},
{
name: "sakura-vader",
css: vader,
},
{
name: "sakura-dark",
css: dark
},
];
const styles = themes.map(({ css, name }) => {
const element = document.createElement('style');
element.setAttribute('disabled', 'disabled');
element.innerHTML = css;
element.dataset.name = name;
return { element, name };
});
styles.forEach(({ element }) => head.appendChild(element));
let current = 0;
const toggleButton = document.getElementById('toggle-button');
const switchContainer = document.getElementById('switch-container');
const switchButton = document.getElementById('switch-button');
const currentTheme = document.getElementById('current-theme');
setSakura();
function setSakura() {
const { element, name } = styles[current];
styles.forEach(({ element }) => element.disabled = true);
element.disabled = false;
currentTheme.innerHTML = name;
}
var toggled = true;
function toggleStyle() {
const { element } = styles[current];
toggled = !toggled
if (toggled) {
element.disabled = false;
} else {
element.disabled = true;
}
switchContainer.classList.toggle('disabled');
}
toggleButton.addEventListener('click', toggleStyle);
function switchStyle() {
current = (current + 1) % styles.length;
setSakura();
}
switchButton.addEventListener('click', switchStyle);