From 78d4b7998a7f6410410dbbcada7f4ca2965da1da Mon Sep 17 00:00:00 2001
From: CakesTwix <oleg.kiryazov@gmail.com>
Date: Tue, 24 Sep 2024 08:24:13 +0300
Subject: [PATCH] Implement 'palette' section in settings

---
 .../{settings.vue => settings/index.vue}      |  2 +
 frontend/src/pages/settings/palette.vue       | 48 +++++++++++++++++++
 2 files changed, 50 insertions(+)
 rename frontend/src/pages/{settings.vue => settings/index.vue} (87%)
 create mode 100644 frontend/src/pages/settings/palette.vue

diff --git a/frontend/src/pages/settings.vue b/frontend/src/pages/settings/index.vue
similarity index 87%
rename from frontend/src/pages/settings.vue
rename to frontend/src/pages/settings/index.vue
index c0caab4..33799d9 100644
--- a/frontend/src/pages/settings.vue
+++ b/frontend/src/pages/settings/index.vue
@@ -8,6 +8,8 @@
 
 
     <article class="primary-text">
+        <RouterLink class="row wave" to="/settings/palette"><i>palette</i> Оформлення</RouterLink>
+        <hr>
         <a class="row wave"><i>person</i> Обліковий запис Tokoka.to</a>
         <hr>
         <a class="row wave"><i>hub</i> BitTorrent</a>
diff --git a/frontend/src/pages/settings/palette.vue b/frontend/src/pages/settings/palette.vue
new file mode 100644
index 0000000..636d4c4
--- /dev/null
+++ b/frontend/src/pages/settings/palette.vue
@@ -0,0 +1,48 @@
+<template>
+    <p class="large-text"><i>palette</i> Оформлення</p>
+    <div class="large-space"></div>
+    <article class="primary-text">
+        <a class="row wave"><i>palette</i> Колір<input @change="changeMaterialColor" type="color"></a>
+        <hr>
+        <a class="row wave" @click="toggleTheme"><i>light_mode</i> Тема</a>
+        <hr>
+        <a class="row wave" @click="goBack"><i>arrow_back</i> Назад</a>
+        <hr>
+    </article>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+        };
+    },
+    created() {
+
+    },
+
+    methods: {
+        toggleTheme() {
+            let mode = ui("mode");
+            if (mode == "light") {
+                this.setCookie('my-mode', "dark");
+                ui("mode", "dark")
+            } else {
+                this.setCookie('my-mode', "light");
+                ui("mode", "light")
+            }
+        },
+        changeMaterialColor(event) {
+            const inputElement = event.target
+            ui("theme", inputElement.value);
+            this.setCookie('my-color', inputElement.value);
+        },
+        setCookie(id, value) {
+            document.cookie = id + '=' + value;
+        },
+        goBack() {
+            this.$router.back();
+        }
+    }
+}
+</script>
\ No newline at end of file