Почему мой компонент спиннера не принимает цвет схемы, выбранную пользователем - Next JS +13 ⇐ Javascript

[Anonymous]

Да, я уже попросил провести чат. Теперь я внедрил Themeprovider (контекст), когда пользователь выбирает между темным режимом или режимом света. Итак ... мой компонент спиннера не рисует свой фон с темой, выбранной пользователем. Только этот компонент прядильщика, другие принимают тему.

Код: Выделить всё

import "./global.css";

export default function RootLayout({children}) {
return(




{children}



);

}

global.css

Код: Выделить всё

body.light {
--background: #fff;
--foreground: #000;
background: var(--background);
color: var(--foreground);
}

body.dark {
--background: #000;
--foreground: #fff;
background: var(--background);
color: var(--foreground);
}

themeprovider

Код: Выделить всё

"use client";

import { createContext, useContext, useEffect, useState } from "react";

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
const [theme, setTheme] = useState(() => {
if (typeof window !== "undefined") {
const storedTheme = localStorage.getItem("theme");
if (storedTheme) return storedTheme;

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
return prefersDark ? "dark" : "light";
}

return "light";
});

useEffect(() => {
document.body.classList.remove("light", "dark");
document.body.classList.add(theme);
localStorage.setItem("theme", theme);
}, [theme]);

return (

{children}

);
}

export const useTheme = () => useContext(ThemeContext);
< /code>
В моем компоненте переключения, чтобы изменить тему только я делаю: < /p>
const {theme, setTheme} = useTheme();
[i] e.target.checked ? setTheme("light") : setTheme("dark")) } />
< /code>
это работает! За исключением вопроса ...  
[b] globalloader [/b]: 
export default function GlobalLoader() {
const pathname = usePathname();
const [spinner, setSpinner] = useState(false);

useEffect(() => {
setSpinner(true);

const handleLoad = () => {
setSpinner(false);

};

const handleBeforeUnload = () => {
setSpinner(true);
};

window.addEventListener("load", handleLoad);
window.addEventListener("beforeunload", handleBeforeUnload);

return () => {
window.removeEventListener("load", handleLoad);
window.removeEventListener("beforeunload", handleBeforeUnload);
};
}, [pathname]);

if (spinner) return null;

return ;

spinner :

Код: Выделить всё

export default function Spinner() {
return (


[/i]
[i][/i]
[i][/i]
[i][/i]
[i][/i]
[i][/i]
[i][/i]
[i][/i]


);

spinner.module.css

Код: Выделить всё

section.wrapper {
padding: 40px 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 500;
}

section.wrapper.dark {
background: var(--background);
display: flex;
justify-content: center;

transition: background-color 1s ease;
}
< /code>
В начале у меня был Global.css, как это: < /p>
:root {
/* light by default */
--background: #fff;
--foreground: #000;
}

@media(prefers-color-scheme: dark) {
--background: #000;
--foreground: #fff;
}
< /code>
и работает! Мой компонент Spinner имеет фон по системе по умолчанию (WIN10), но я хочу, чтобы это изменение с DE USER SELECT-< /p>
GPT сказал мне, что проблема в том, что мой компонент Spinner он создает до того, как тема будет применена на теге HTML или теге тела. Это предложило мне сделать ниже (ни одно предложения для меня не подходит): < /p>

1: определить сценарий, который применяет тему, прежде чем она отображается: < /p>
< /blockquote>



< /code>

2: применить тему на теге HTML из моего Themeprovider: < /p>
< /blockquote>
useEffect(() => {
// ThemeProviderComponent
document.documentElement.classList.remove("light", "dark");
document.documentElement.classList.add(theme);
localStorage.setItem("theme", theme);
}, [theme]);

// changes global.css to:
html.light {
--background: #fff;
--foreground: #000;

background: var(--background);
color: var(--foreground);
}

html.dark {
--background: #000;
--foreground: #fff;

background: var(--background);
color: var(--foreground);
}
< /code>

3: подождите, пока мой прядильщик он установил на моем Globalloader: < /p>
< /blockquote>
// GlobalLoader
const [mounted, setMounted] = useState(false);

useEffect(()=>{
setMounted(true);
}, []);

...

if(!mounted) return null; // here it does not show my spinner

if(spinner) return null;

return 

anomaly : если в этой строке, если (Spinner) вернуть null
i отрицаю! (Я должен выбрать тему раньше, а затем отменить переменную состояния, потому что она не позволяет мне потом)
И это все, я понятия не имею, почему возникает эта проблема ...

Подробнее здесь: https://stackoverflow.com/questions/795 ... e-user-nex