added theme toggler in footer

src/app/me/settings/page.tsx

@@ -32,6 +32,7 @@ import style_workshop from "@/app/styles/workshop/page.module.css";
 import SlideButton from '@/app/modules/components/slideButton.module';
 import ApiManager from '@/app/modules/utils/apiManager';
 import { Session } from '@/app/interfaces';
+import { setTheme } from './setTheme';
 const fira = Fira_Code({ subsets: ["latin"] });
 
 export interface SettingsResponse {
@@ -269,12 +270,8 @@ const Themes = () => {
     const cookies = useCookies();
 
     const change_theme = (name: string) => {
-        const theme: { [key: string]: string } = getTheme(name);
-        cookies.set('theme_main', name, { expires: 365 * 10 });
         setThemeState(name);
-        for (let prop in theme) {
-            document.documentElement.style.setProperty(prop, theme[prop]);
-        }
+        setTheme(name, cookies);
     }
 
     return (

src/app/me/settings/setTheme.ts

@@ -0,0 +1,10 @@
+import { getTheme } from "@/app/modules/providers.module";
+import { Cookies } from "next-client-cookies";
+
+export const setTheme = (name: string, cookies: Cookies) => {
+    const theme: { [key: string]: string } = getTheme(name);
+    cookies.set('theme_main', name, { expires: 365 * 10 });
+    for (let prop in theme) {
+        document.documentElement.style.setProperty(prop, theme[prop]);
+    }
+}

src/app/modules/components/footer.module.tsx

@@ -1,7 +1,26 @@
+"use client";
+
+import { setTheme } from "@/app/me/settings/setTheme";
 import style from "@/app/styles/footer.module.css";
+import { useCookies } from "next-client-cookies";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 
 const Footer = () => {
+    const cookies = useCookies();
+    const themes = ['default', 'amoled'];
+    const initialThemeIndex = themes.indexOf(cookies.get('theme_main') || 'default');
+    const [theme, setTheme_] = useState<number>(initialThemeIndex !== -1 ? initialThemeIndex : 0);
+
+    useEffect(() => {
+        if (theme > themes.length - 1) {
+            setTheme_(0);
+            return;
+        }
+
+        setTheme(themes[theme], cookies);
+    }, [theme]);
+
     return (
         <footer className={style.footer}>
             <div className={style.container}>
@@ -12,6 +31,7 @@ const Footer = () => {
 
                         <Link href="/tutorials">Туториалы</Link>
                         <Link href="https://github.com/PPLBandage" target="_blank">GitHub</Link>
+                        <a style={{ cursor: 'pointer', userSelect: 'none' }} onClick={() => setTheme_(prev => prev + 1)}>Изменить тему</a>
                     </div>
                 </div>
                 <p className={style.beta}>PPLBandage project 2023–{new Date().getFullYear()}, master@<a className={style.git} href={`https://github.com/PPLBandage/pplbandage_site/commit/${process.env.NEXT_PUBLIC_COMMIT_SHA}`}>