Skip to content

Commit a1df22b

Browse files
NinjaCheetahNinjaCheetah
committed
Re-updated theme selection JS
1 parent 3abf10d commit a1df22b

4 files changed

Lines changed: 50 additions & 105 deletions

File tree

‎_layouts/main-pc.html‎

Lines changed: 5 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<!-- <link rel="stylesheet" href="https://unpkg.com/@sakun/system.css" />-->
2626
<link rel="stylesheet" href="/assets/css/index.css"/>
2727
<title>{{ page.title }} | {{ site.title }}</title>
28-
28+
<script src="/assets/js/main.js"></script>
2929
<link rel="stylesheet" id="switcher-id" href=""/>
3030
</head>
3131
<body class="container">
@@ -45,10 +45,10 @@
4545
<div class="window-body">
4646
{% include nav.html %}
4747
<div style="margin-top: .5em;">
48-
<select>
49-
<option id="stylesheet1">XP Theme</option>
50-
<option id="stylesheet2">98 Theme</option>
51-
<option id="stylesheet3">7 Theme</option>
48+
<select id="theme-selector">
49+
<option id="xp-style" value="0">XP Theme</option>
50+
<option id="98-style" value="1">98 Theme</option>
51+
<option id="7-style" value="2">7 Theme</option>
5252
</select>
5353
</div>
5454
</div>
@@ -112,48 +112,3 @@
112112
{{ content }}
113113
</div>
114114
</body>
115-
116-
<script>
117-
function hideWindow() {
118-
var x = document.getElementById("hide");
119-
if (x.style.display === "none") {
120-
x.style.display = "block";
121-
} else {
122-
x.style.display = "none";
123-
}
124-
}
125-
126-
function swapStyleSheet(sheet) {
127-
document.getElementById("pagestyle").setAttribute("href", sheet);
128-
}
129-
130-
function initate() {
131-
var style1 = document.getElementById("stylesheet1");
132-
var style2 = document.getElementById("stylesheet2");
133-
var style3 = document.getElementById("stylesheet3");
134-
135-
style1.onclick = function () {
136-
swapStyleSheet("https://unpkg.com/xp.css");
137-
localStorage.setItem("theme", "https://unpkg.com/xp.css");
138-
};
139-
style2.onclick = function () {
140-
swapStyleSheet("https://unpkg.com/xp.css@0.2.3/dist/98.css");
141-
localStorage.setItem("theme", "https://unpkg.com/xp.css@0.2.3/dist/98.css");
142-
};
143-
style3.onclick = function () {
144-
swapStyleSheet("https://unpkg.com/7.css")
145-
localStorage.setItem("theme", "https://unpkg.com/7.css");
146-
};
147-
}
148-
149-
window.onload = function () {
150-
if (localStorage.getItem("theme") == "https://unpkg.com/xp.css") {
151-
swapStyleSheet("https://unpkg.com/xp.css");
152-
} else if (localStorage.getItem("theme") == "https://unpkg.com/xp.css@0.2.3/dist/98.css") {
153-
swapStyleSheet("https://unpkg.com/xp.css@0.2.3/dist/98.css");
154-
} else if (localStorage.getItem("theme") == "https://unpkg.com/7.css") {
155-
swapStyleSheet("https://unpkg.com/7.css");
156-
}
157-
initate();
158-
}
159-
</script>

‎_layouts/main.html‎

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<!-- <link rel="stylesheet" href="https://unpkg.com/@sakun/system.css" />-->
2626
<link rel="stylesheet" href="/assets/css/index.css"/>
2727
<title>{{ page.title }} | {{ site.title }}</title>
28-
28+
<script src="/assets/js/main.js"></script>
2929
<link rel="stylesheet" id="switcher-id" href=""/>
3030
</head>
3131
<body class="container">
@@ -45,10 +45,10 @@
4545
<div class="window-body">
4646
{% include nav.html %}
4747
<div style="margin-top: .5em;">
48-
<select>
49-
<option id="stylesheet1">XP Theme</option>
50-
<option id="stylesheet2">98 Theme</option>
51-
<option id="stylesheet3">7 Theme</option>
48+
<select id="theme-selector">
49+
<option id="xp-style" value="0">XP Theme</option>
50+
<option id="98-style" value="1">98 Theme</option>
51+
<option id="7-style" value="2">7 Theme</option>
5252
</select>
5353
</div>
5454
</div>
@@ -77,39 +77,3 @@
7777
{{ content }}
7878
</div>
7979
</body>
80-
81-
<script>
82-
function swapStyleSheet(sheet) {
83-
document.getElementById("pagestyle").setAttribute("href", sheet);
84-
}
85-
86-
function initate() {
87-
var style1 = document.getElementById("stylesheet1");
88-
var style2 = document.getElementById("stylesheet2");
89-
var style3 = document.getElementById("stylesheet3");
90-
91-
style1.onclick = function () {
92-
swapStyleSheet("https://unpkg.com/xp.css");
93-
localStorage.setItem("theme", "https://unpkg.com/xp.css");
94-
};
95-
style2.onclick = function () {
96-
swapStyleSheet("https://unpkg.com/xp.css@0.2.3/dist/98.css");
97-
localStorage.setItem("theme", "https://unpkg.com/xp.css@0.2.3/dist/98.css");
98-
};
99-
style3.onclick = function () {
100-
swapStyleSheet("https://unpkg.com/7.css")
101-
localStorage.setItem("theme", "https://unpkg.com/7.css");
102-
};
103-
}
104-
105-
window.onload = function () {
106-
if (localStorage.getItem("theme") == "https://unpkg.com/xp.css") {
107-
swapStyleSheet("https://unpkg.com/xp.css");
108-
} else if (localStorage.getItem("theme") == "https://unpkg.com/xp.css@0.2.3/dist/98.css") {
109-
swapStyleSheet("https://unpkg.com/xp.css@0.2.3/dist/98.css");
110-
} else if (localStorage.getItem("theme") == "https://unpkg.com/7.css") {
111-
swapStyleSheet("https://unpkg.com/7.css");
112-
}
113-
initate();
114-
}
115-
</script>

‎_layouts/noinclude.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<meta charset="UTF-8" />
1313
<link rel="stylesheet" href="https://unpkg.com/xp.css" />
1414
<link rel="stylesheet" href="/assets/css/index.css"/>
15+
<script src="/assets/js/main.js"></script>
1516
<!-- <link rel="stylesheet" href="https://unpkg.com/xp.css@0.2.3/dist/98.css" />-->
1617
<title>{{ page.title }} | {{ site.title }}</title>
1718
</head>

‎assets/js/main.js‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,45 @@
1-
window.addEventListener('load', setFooterDate, false);
1+
window.addEventListener('load', initialize, false);
22
window.addEventListener('load', loadTheme, false);
33

4-
// Auto update the footer date so I don't have to do it myself
5-
function setFooterDate() {
6-
let footerDate = document.getElementById("footerDate");
7-
footerDate.textContent = new Date().getFullYear().toString();
4+
function swapStyleSheet(sheet) {
5+
document.getElementById("pagestyle").setAttribute("href", sheet);
86
}
97

10-
// Load saved theme automatically on load
11-
function loadTheme() {
12-
var theme = localStorage.getItem('theme');
13-
document.documentElement.setAttribute('data-bs-theme', theme)
8+
function initialize() {
9+
let XPStyle = document.getElementById("xp-style");
10+
let ninetyEightStyle = document.getElementById("98-style");
11+
let sevenStyle = document.getElementById("7-style");
12+
13+
XPStyle.onclick = function () {
14+
swapStyleSheet("https://unpkg.com/xp.css");
15+
localStorage.setItem("theme", "XP");
16+
}
17+
ninetyEightStyle.onclick = function () {
18+
swapStyleSheet("https://unpkg.com/xp.css@0.2.3/dist/98.css");
19+
localStorage.setItem("theme", "98");
20+
}
21+
sevenStyle.onclick = function () {
22+
swapStyleSheet("https://unpkg.com/7.css")
23+
localStorage.setItem("theme", "7");
24+
}
1425
}
1526

16-
// Set the theme using the navbar item
17-
function chooseTheme(theme){
18-
document.documentElement.setAttribute('data-bs-theme', theme)
19-
localStorage.setItem('theme', theme);
20-
}
27+
function loadTheme() {
28+
let currentTheme = localStorage.getItem("theme");
29+
let themeSelect = document.getElementById("theme-selector");
30+
31+
switch (currentTheme) {
32+
case "XP":
33+
swapStyleSheet("https://unpkg.com/xp.css");
34+
themeSelect.value = "0";
35+
break
36+
case "98":
37+
swapStyleSheet("https://unpkg.com/98.css");
38+
themeSelect.value = "1";
39+
break
40+
case "7":
41+
swapStyleSheet("https://unpkg.com/7.css");
42+
themeSelect.value = "2";
43+
break
44+
}
45+
}

0 commit comments

Comments
 (0)