From 1bb4cc82e2c18880d98f048d5e1190919569c0eb Mon Sep 17 00:00:00 2001 From: Janis Date: Fri, 23 Dec 2022 00:16:56 +0100 Subject: [PATCH] df --- app/Nav.tsx | 54 +++++++-- app/layout.tsx | 4 +- app/tutorials/[tutorialId]/LoadMarkdown.tsx | 6 + styles/Footer.module.scss | 17 ++- styles/Nav.module.scss | 20 ++-- styles/Sidebar.module.scss | 7 +- styles/Tutorial.module.scss | 11 +- styles/TutorialContentTable.module.scss | 6 +- styles/globals.scss | 10 +- styles/markdown.scss | 19 ++- styles/test.css | 13 -- styles/variables.scss | 125 +++++++++++--------- 12 files changed, 164 insertions(+), 128 deletions(-) delete mode 100644 styles/test.css diff --git a/app/Nav.tsx b/app/Nav.tsx index daffcab..9cceaff 100644 --- a/app/Nav.tsx +++ b/app/Nav.tsx @@ -1,19 +1,53 @@ "use client"; -import React, { useRef } from "react"; +import { time } from "console"; import styles from "../styles/Nav.module.scss"; import Image from "next/image"; import Link from "next/link"; -import "../styles/test.css"; -function switchTheme() {} +import { useEffect } from "react"; + +function switchTheme(theme) { + const bodyElement = document.getElementsByTagName("body")[0]; + + if (theme == "dark") { + bodyElement.classList.remove("theme-light"); + } else { + bodyElement.classList.add("theme-light"); + } +} + +function toggleTheme() { + const svgElement = document.getElementById("themeSwitchSvg"); + + if (localStorage.getItem("theme") == "light") { + svgElement.style.animationDirection = "normal"; + svgElement.style.animationName = styles.spinThemeSwitch; + } else { + svgElement.style.animationDirection = "reverse"; + svgElement.style.animationName = styles.spinThemeSwitch; + } + + setTimeout(() => { + if (localStorage.getItem("theme") == "light") { + localStorage.setItem("theme", "dark"); + switchTheme("dark"); + } else { + localStorage.setItem("theme", "light"); + switchTheme("light"); + } + svgElement.style.animationName = ""; + }, 150); +} export default function Nav() { - const switchThemeSvgRef = useRef(); + useEffect(() => { + if (localStorage.getItem("theme") == "dark") { + switchTheme("dark"); + } else { + switchTheme("light"); + } + }, []); return (