Testing theme changer

3 files changed, 135 insertions, 0 deletions

diff --git a/scripts/cookie.js b/scripts/cookie.js
new file mode 100644
index 0000000..9c88963
--- /dev/null
+++ b/scripts/cookie.js
@@ -0,0 +1,36 @@
+'use strict';
+
+class Cookies {
+	static getCookie(name){
+		let cookies = document.cookie.split(";");
+		for(let i in cookies) {
+			let cname = cookies[i].trim().split("=")[0];
+			if(cname == name){
+				return cookies[i].trim().slice(name.length + 1);
+			}
+		}
+		return "";
+	}
+
+	static setCookie(name, value, data = {SameSite: "Strict"}) {
+		let extra = "";
+
+		for(let key in data)
+		{
+			extra += "; " + key + "=" + data[key];
+		}
+
+		document.cookie = name + "=" + value + extra;
+	}
+
+	static setYearCookie(name, value) {
+		var date = new Date(Date.now());
+		date.setFullYear(date.getFullYear() + 1);
+		Cookies.setCookie(name, value, {SameSite: "Strict", expires: date.toUTCString()});
+	}
+
+	static removeCookie(name) {
+		var date = new Date(0);
+		Cookies.setCookie(name, "", {SameSite: "Strict", expires: date.toUTCString()});
+	}
+}
diff --git a/scripts/light-dark.js b/scripts/light-dark.js
new file mode 100644
index 0000000..0e23d98
--- /dev/null
+++ b/scripts/light-dark.js
@@ -0,0 +1,24 @@
+'use strict';
+
+(function() {
+	lightDark = document.getElementById("light-dark");
+
+	function setButtonText() {
+		if(Theme.get() == BASE_THEMES[0][0])
+			lightDark.innerText = BASE_THEMES[1][1] + " Mode";
+		else
+			lightDark.innerText = BASE_THEMES[1][0] + " Mode";
+	}
+
+	function changeTheme(e) {
+		if(Theme.get() == BASE_THEMES[0][0])
+			Theme.set(BASE_THEMES[0][1]);
+		else
+			Theme.set(BASE_THEMES[0][0]);
+		
+		setButtonText();
+	}
+
+	lightDark.addEventListener("click", changeTheme);
+	setButtonText();
+})();
diff --git a/scripts/theme.js b/scripts/theme.js
new file mode 100644
index 0000000..8147260
--- /dev/null
+++ b/scripts/theme.js
@@ -0,0 +1,75 @@
+'use strict';
+
+const BASE_THEMES = [[
+	"/styles/themes/colors-base.css",
+	"/styles/themes/colors-dark.css"
+],
+[
+	"Light",
+	"Dark"
+]];
+
+const APP_NAME = "cshift-net";
+
+class Theme{
+	static theme = document.getElementById("theme");
+	static UserThemes = [[],[]];
+
+	static init()
+	{
+		let uth = Cookies.getCookie("userThemes-" + APP_NAME).split(',');
+
+		for (let i = 1; i < uth.length; i += 2)
+		{
+			this.UserThemes[0].push(uth[i - 1]);
+			this.UserThemes[1].push(uth[i]);
+		}
+
+		if(Cookies.getCookie("theme-" + APP_NAME) == ""){
+			Cookies.setYearCookie("theme", BASE_THEMES[0][0]);
+		}
+	}
+
+	static restore()
+	{
+		Theme.init();
+		Theme.theme.setAttribute("href", Cookies.getCookie("theme-" + APP_NAME) + "?v=" + Date.now());
+	}
+
+	static set(sheet)
+	{
+		Cookies.setYearCookie("theme-" + APP_NAME, sheet);
+		Theme.theme.setAttribute("href", sheet + "?v=" + Date.now());
+	}
+
+	static get() {
+		return Cookies.getCookie("theme-" + APP_NAME);
+	}
+
+	static setUserThemes() {
+		let out = "";
+		for (let i = 0; i < this.UserThemes[0].length; i++)
+		{
+			if(i !== 0)
+				out = out + ",";
+			
+			out = out + this.UserThemes[0][i] + "," + this.UserThemes[1][i];
+		}
+
+		Cookies.setYearCookie("userThemes-" + APP_NAME, out);
+	}
+
+	static removeUserTheme (index) {
+		this.UserThemes[0].splice(index, 1);
+		this.UserThemes[1].splice(index, 1);
+		this.setUserThemes();
+	}
+
+	static addUserTheme (name, value) {
+		this.UserThemes[0].push(name);
+		this.UserThemes[1].push(value);
+		this.setUserThemes();
+	}
+}
+
+Theme.restore();
\ No newline at end of file