Work on colors and skeletorn.

assets/color-mode.js

@@ -0,0 +1,95 @@
+const color_modes = Object.freeze({
+    DARK: true,
+    LIGHT: false,
+})
+
+class color_mode {
+    #app;
+    #current;
+    #dark_class;
+    #light_class;
+
+    constructor(
+        app = null, 
+        dark_class = "darkmode", 
+        light_class = "lightmode", 
+        defaults = color_modes.DARK
+    ) {
+        if (!(app instanceof HTMLElement)) {
+            throw new TypeError("App to color control must be HTMLElement.");
+        }
+
+        if (typeof(dark_class) !== "string") {
+            throw new TypeError("Name of darkmode class must be string.");
+        }
+        
+        if (typeof(light_class) !== "string") {
+            throw new TypeError("Name of lightmode class must be String.");
+        }
+
+        if (dark_class === light_class) {
+            throw new Error("Dark modeclass and lightmode class is same.");
+        }
+
+        if (defaults !== color_modes.DARK && defaults !== color_modes.LIGHT) {
+            throw new TypeError("Default color mode must be color modes.");
+        }
+
+        this.#current = defaults;
+        this.#app = app;
+        this.#dark_class = dark_class;
+        this.#light_class = light_class;
+        this.update();
+    }
+
+    get mode() {
+        return this.#current;
+    }
+
+    set mode(target) {
+        if (target !== color_modes.DARK && target !== color_modes.LIGHT) {
+            throw new TypeError("New color mode must be in color modes.");
+        }
+
+        this.#current = target;
+        update();
+    }
+
+    reverse(now = true) {
+        if (this.#current === color_modes.DARK) {
+            this.#current = color_modes.LIGHT
+        } else {
+            this.#current = color_modes.DARK;
+        }
+
+        if (now) {
+            this.update();
+        }
+    }
+
+    update() {
+        const app = this.#app;
+        const darkmode = this.#dark_class;
+        const lightmode = this.#light_class;
+        const current = this.#current;
+
+        if (app.classList.contains(darkmode)) {
+            app.classList.remove(darkmode);
+        }
+
+        if (app.classList.contains(lightmode)) {
+            app.classList.remove(lightmode);
+        }
+
+        if (current === color_modes.DARK) {
+            app.classList.add(darkmode);
+            return;
+        }
+
+        if (current === color_modes.LIGHT) {
+            app.classList.add(lightmode);
+        }
+    }
+}
+
+export { color_mode };

assets/core.js

@@ -0,0 +1,12 @@
+import { color_mode } from "./color-mode.js";
+import { push } from "./push.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+    const app = document.querySelector(".app");
+    const colors_state = new color_mode(app);
+    const colors_changer = push("change-color", () => {
+        colors_state.reverse();
+    });
+
+    app.appendChild(colors_changer);
+});

assets/push.js

@@ -0,0 +1,27 @@
+const push = (name, action) => {
+    if (typeof(action) !== "function") {
+        throw new TypeError("Action must be an function.");
+    }
+
+    if (typeof(name) !== "string") {
+        throw new TypeError("Name of the push must be string.");
+    }
+
+    const target = document.createElement("input");
+    
+    target.type = "button";
+    target.name = name;
+    target.id = "push-" + name;
+    
+    target.value = name
+        .toUpperCase()
+        .replaceAll("-", " ")
+        .replaceAll("_", " ");
+
+    target.classList.add("push");
+    target.addEventListener("click", action);
+
+    return target;
+};
+
+export { push };

theme/app.css

@@ -4,6 +4,23 @@ body {
 }
 
 .app { 
+    position: fixed;
     width: 100%;
     height: 100%;
+    top: 0px;
+    left: 0px;
+    margin: 0px;
+    padding: 0px;
+    color: var(--font-color);
+    background-color: var(--background-color);
+
+    transition:
+        background-color 0.5s,
+        color 0.5s;
+}
+
+#push-change-color {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
 }

theme/colors.css

@@ -5,4 +5,14 @@ body {
     --font-color-light: #120309;
     --primary-color: #307351;
     --secondary-color: #53599A;
+}
+
+.darkmode {
+    --font-color: var(--font-color-dark);
+    --background-color: var(--background-color-dark);
+}
+
+.lightmode {
+    --font-color: var(--font-color-light);
+    --background-color: var(--background-color-light);
 }

theme/loader.css

@@ -1,3 +1,4 @@
 @import url("./colors.css");
 @import url("./app.css");
-@import url("./font.css");
+@import url("./font.css");
+@import url("./push.css");

theme/push.css

@@ -0,0 +1,17 @@
+.push {
+    background-color: transparent;
+    color: var(--font-color);
+    border: var(--font-color) 2px solid;
+    border-radius: 10px;
+    font-size: 18px;
+    padding: 10px 20px;
+
+    transition:
+        border-color 0.5s,
+        color 0.5s;
+}
+
+.push:hover {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+}