Fix white flashing and css clean up

The problem was not next-themes, but rather the css transition on background
stuyspec · Jan 9, 2024 · 83cae01 · 83cae01
1 parent 72c3fba
commit 83cae01
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 45 deletions.
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
@@ -1,33 +1,29 @@
 import Image from "next/image";
-import styles from "../styles/Navbar.module.css";
 import { useTheme } from 'next-themes'
 
 const ThemeToggle = () => {
-	const { theme, setTheme } = useTheme();
+	const { setTheme } = useTheme();
 
 	return (
 		<>
-			{theme === "dark" ? (
-				<Image
-					src="/images/light-mode-button.svg"
-					width={36}
-					alt="theme toggle button"
-					height={36}
-					onClick={() => setTheme('light')}
-					id={styles.colorModeToggle}
-					className="button"
-				/>
-			) : (
-				<Image
-					src="/images/dark-mode-button.svg"
-					width={36}
-					alt="theme toggle button"
-					height={36}
-					onClick={() => setTheme('dark')}
-					id={styles.colorModeToggle}
-					className="button"
-				/>
-			)}
+			<Image
+				src="/images/light-mode-button.svg"
+				data-hide-on-theme="light"
+				width={36}
+				alt="theme toggle button"
+				height={36}
+				onClick={() => setTheme('light')}
+				className="button"
+			/>
+			<Image
+				src="/images/dark-mode-button.svg"
+				data-hide-on-theme="dark"
+				width={36}
+				alt="theme toggle button"
+				height={36}
+				onClick={() => setTheme('dark')}
+				className="button"
+			/>
 		</>
 	);
 };

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,3 @@
-import "../styles/globals.css";
 import type { AppProps } from "next/app";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
@@ -9,6 +8,7 @@ import { generateMetaTags } from "../utils/generateMetaTags";
 import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import { ThemeProvider } from 'next-themes'
+import "../styles/globals.css";
 
 function MyApp(props: AppProps) {
 	let { Component, pageProps } = props;
@@ -24,7 +24,7 @@ function MyApp(props: AppProps) {
 		router.events.on("routeChangeComplete", () => {
 			setProgress(100); // route loaded
 		});
-	}, []);
+	}, [router.events]);
 
 	// Variables for the (base) meta tags
 	const title = "The Stuyvesant Spectator";
@@ -33,7 +33,7 @@ function MyApp(props: AppProps) {
 	const meta_url = "https://stuyspec.com";
 
 	return (
-		<ThemeProvider defaultTheme="light" enableSystem>
+		<ThemeProvider defaultTheme="light" disableTransitionOnChange>
 			<div>
 				<Head>
 					<link rel="icon" href="/favicon.ico" />

diff --git a/styles/Navbar.module.css b/styles/Navbar.module.css
@@ -49,11 +49,6 @@
 	font-family: "Old English Text MT";
 }
 
-#colorModeToggle {
-	grid-column-start: 4;
-	grid-column-end: 4;
-	place-self: center;
-}
 
 #hamburgerMenu {
 	/* display: none; */
@@ -63,14 +58,12 @@
 
 #hamburgerMenu:hover,
 #subscribe:hover,
-#colorModeToggle:hover,
 #searchButton:hover,
 .clickable_nav_element:hover {
 	opacity: 0.75;
 }
 #hamburgerMenu:active,
 #subscribe:active,
-#colorModeToggle:active,
 #searchButton:active,
 .clickable_nav_element:active {
 	opacity: 0.5;
@@ -96,11 +89,6 @@
 	#subscribe_parent {
 		display: none;
 	}
-	#colorModeToggle {
-		grid-column-start: 3;
-		grid-column-end: 3;
-		place-self: center;
-	}
 	#searchButton {
 		grid-column-start: 4;
 		grid-column-end: 4;

diff --git a/styles/globals.css b/styles/globals.css
@@ -1,8 +1,8 @@
 @font-face {
 	font-family: "Playfair Display";
-	src: url("/fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf")
-		format("truetype");
+	src: url("/fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf") format("truetype");
 }
+
 @font-face {
 	font-family: "Lato";
 	src: url("/fonts/Lato/Lato-Regular.ttf") format("truetype");
@@ -49,7 +49,6 @@
 	--small-text: 1rem;
 	--primary-font: "Minion Pro", Georgia;
 	--secondary-font: "Lato";
-
 	/* Light Theme, default */
 	--secondary-nav: #2e2e2e;
 	--primary: #353637;
@@ -67,6 +66,11 @@
 	--medium-grey: #e9e8e8;
 }
 
+[data-theme='dark'] [data-hide-on-theme='dark'],
+[data-theme='light'] [data-hide-on-theme='light'] {
+	display: none;
+}
+
 ::selection {
 	background: var(--accent);
 	color: var(--secondary);
@@ -76,8 +80,11 @@ html,
 body {
 	padding: 0;
 	margin: 0;
+}
+
+body {
 	/* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-		Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
+	Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
 	background-color: var(--secondary);
 	color: var(--primary);
 
@@ -95,8 +102,6 @@ a {
 	margin: 0;
 	border: 0;
 	font-display: optional;
-
-	transition: background-color 250ms ease-in-out;
 }
 
 #main {
@@ -121,6 +126,7 @@ a {
 	background-repeat: no-repeat;
 	transition: background-size 250ms;
 }
+
 .link:hover,
 .link:focus {
 	background-size:
@@ -134,7 +140,8 @@ a {
 	transition: text-decoration-color 250ms;
 	cursor: pointer;
 }
+
 .discrete-link:hover,
 .discrete-link:focus {
 	text-decoration-color: var(--accent);
-}
+}