xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

add auto darkmode in about page

Browse Source
This commit is contained in:
DefectingCat
2022-10-10 09:43:41 +08:00
parent 324f3610bc
commit bef55b1135
2 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pages/_app.tsx
View File

@ -2,6 +2,7 @@ import useRouterLoading from 'lib/hooks/useRouterLoading';
import { ThemeProvider } from 'next-themes';
import dynamic from 'next/dynamic';
import Head from 'next/head';
import { useEffect } from 'react';
import 'styles/globals.css';
import 'styles/prism-one-dark.css';
import 'styles/prism-one-light.css';
@ -17,6 +18,10 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
const { loading } = useRouterLoading();
useEffect(() => {
document.body.style.transition = 'all 0.3s ease-out';
}, []);
return (
<>
<Head>

26
pages/about.tsx
View File

@ -1,9 +1,9 @@
import TWEEN from '@tweenjs/tween.js';
import classNames from 'classnames';
import { getMousePosition } from 'lib/utils';
import { useTheme } from 'next-themes';
import dynamic from 'next/dynamic';
import { useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { InitFn, THREE, useThree } from 'rua-three';
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { NextPageWithLayout } from 'types';
@ -131,6 +131,28 @@ const About: NextPageWithLayout = () => {
alpha: true,
});
// After model loading, set theme to dark mode.
const restore = useRef(false);
const { systemTheme, theme, setTheme } = useTheme();
const currentTheme = theme === 'system' ? systemTheme : theme;
useEffect(() => {
if (!loading) return;
if (currentTheme === 'dark') return;
setTimeout(() => {
setTheme('dark');
restore.current = true;
}, 700);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentTheme, loading]);
useEffect(
() => () => {
if (!restore.current) return;
setTheme('light');
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
return (
<>
<div className="fixed top-0 left-0 -z-10">