+
+
+ {colorScheme === 'light' ? '🌙' : '🔆'}
+
+
) {
+ const { colorScheme } = useColorScheme();
+ return ;
+}
+
+export default App;
diff --git a/examples/material-ui-pigment-css-nextjs-ts/src/components/ColorSchemeProvider.tsx b/examples/material-ui-pigment-css-nextjs-ts/src/components/ColorSchemeProvider.tsx
new file mode 100644
index 00000000000000..ffd4f25ba29e05
--- /dev/null
+++ b/examples/material-ui-pigment-css-nextjs-ts/src/components/ColorSchemeProvider.tsx
@@ -0,0 +1,63 @@
+'use client';
+import * as React from 'react';
+
+const ColorSchemeContext = React.createContext<{
+ colorScheme: string;
+ setColorScheme: React.Dispatch>;
+}>({
+ colorScheme: 'dark',
+ setColorScheme: () => '',
+});
+
+function setCookie(name: string, value: string, days: number = 100) {
+ let expires = '';
+ if (days) {
+ const date = new Date();
+ date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+ expires = `; expires=${date.toUTCString()}`;
+ }
+ document.cookie = `${name}=${value || ''}${expires}; path=/`;
+}
+
+export function ColorSchemeProvider({
+ colorScheme: initialColorScheme,
+ children,
+}: React.PropsWithChildren<{ colorScheme: string }>) {
+ const [colorScheme, setColorScheme] = React.useState(initialColorScheme);
+
+ const contextValue = React.useMemo(
+ () => ({ colorScheme, setColorScheme }),
+ [colorScheme, setColorScheme],
+ );
+
+ // Set the colorScheme in localStorage
+ React.useEffect(() => {
+ setCookie('colorScheme', colorScheme);
+ localStorage.setItem('colorScheme', colorScheme);
+ }, [colorScheme]);
+
+ // Handle when localStorage has changed
+ React.useEffect(() => {
+ const handleStorage = (event: StorageEvent) => {
+ const value = event.newValue;
+ if (
+ typeof event.key === 'string' &&
+ event.key === 'colorScheme' &&
+ typeof value === 'string'
+ ) {
+ setColorScheme(value);
+ }
+ };
+ // For syncing color-scheme changes between iframes
+ window.addEventListener('storage', handleStorage);
+ return () => {
+ window.removeEventListener('storage', handleStorage);
+ };
+ }, [setColorScheme]);
+
+ return {children};
+}
+
+export const useColorScheme = () => {
+ return React.useContext(ColorSchemeContext);
+};
diff --git a/examples/material-ui-pigment-css-nextjs-ts/tsconfig.json b/examples/material-ui-pigment-css-nextjs-ts/tsconfig.json
index 264ef7bbd1ef91..ffbaaf135fb346 100644
--- a/examples/material-ui-pigment-css-nextjs-ts/tsconfig.json
+++ b/examples/material-ui-pigment-css-nextjs-ts/tsconfig.json
@@ -19,7 +19,8 @@
],
"paths": {
"@/*": ["./src/*"]
- }
+ },
+ "target": "ES2017"
},
"include": [
"next-env.d.ts",