Skip to content

Commit

Permalink
Make selected color mode persist between reload
Browse files Browse the repository at this point in the history
  • Loading branch information
@zanivan @aarongarciah
zanivan authored and aarongarciah committed Aug 16, 2024
1 parent 5793f69 commit 56ea32d
Show file tree
Hide file tree
Showing 14 changed files with 224 additions and 110 deletions.
23 changes: 15 additions & 8 deletions docs/data/material/getting-started/templates/blog/Blog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,19 +65,26 @@ export default function Blog() {
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
const blogTheme = createTheme(getBlogTheme(mode));
const defaultTheme = createTheme({ palette: { mode } });

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode');
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};

const toggleCustomTheme = () => {
setShowCustomTheme((prev) => !prev);
};
Expand Down
23 changes: 15 additions & 8 deletions docs/data/material/getting-started/templates/blog/Blog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,19 +65,26 @@ export default function Blog() {
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
const blogTheme = createTheme(getBlogTheme(mode));
const defaultTheme = createTheme({ palette: { mode } });

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};

const toggleCustomTheme = () => {
setShowCustomTheme((prev) => !prev);
};
Expand Down
22 changes: 15 additions & 7 deletions docs/data/material/getting-started/templates/checkout/Checkout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,17 +94,25 @@ export default function Checkout() {
const checkoutTheme = createTheme(getCheckoutTheme(mode));
const defaultTheme = createTheme({ palette: { mode } });
const [activeStep, setActiveStep] = React.useState(0);

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode');
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};
const toggleCustomTheme = () => {
setShowCustomTheme((prev) => !prev);
Expand Down
22 changes: 15 additions & 7 deletions docs/data/material/getting-started/templates/checkout/Checkout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,17 +93,25 @@ export default function Checkout() {
const checkoutTheme = createTheme(getCheckoutTheme(mode));
const defaultTheme = createTheme({ palette: { mode } });
const [activeStep, setActiveStep] = React.useState(0);

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};
const toggleCustomTheme = () => {
setShowCustomTheme((prev) => !prev);
Expand Down
22 changes: 15 additions & 7 deletions docs/data/material/getting-started/templates/dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,25 @@ export default function Dashboard() {
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
const dashboardTheme = createTheme(getDashboardTheme(mode));
const defaultTheme = createTheme({ palette: { mode } });

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode');
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};

const toggleCustomTheme = () => {
Expand Down
22 changes: 15 additions & 7 deletions docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,25 @@ export default function Dashboard() {
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
const dashboardTheme = createTheme(getDashboardTheme(mode));
const defaultTheme = createTheme({ palette: { mode } });

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};

const toggleCustomTheme = () => {
Expand Down
21 changes: 15 additions & 6 deletions docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,16 +68,25 @@ export default function MarketingPage() {
const MPTheme = createTheme(getMPTheme(mode));
const defaultTheme = createTheme({ palette: { mode } });

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode');
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};

const toggleCustomTheme = () => {
Expand Down
21 changes: 15 additions & 6 deletions docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,16 +68,25 @@ export default function MarketingPage() {
const MPTheme = createTheme(getMPTheme(mode));
const defaultTheme = createTheme({ palette: { mode } });

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};

const toggleCustomTheme = () => {
Expand Down
22 changes: 15 additions & 7 deletions docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,17 +65,25 @@ export default function SignInSide() {
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
const defaultTheme = createTheme({ palette: { mode } });
const SignInSideTheme = createTheme(getSignInSideTheme(mode));

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode');
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};

const toggleCustomTheme = () => {
Expand Down
22 changes: 15 additions & 7 deletions docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,17 +65,25 @@ export default function SignInSide() {
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
const defaultTheme = createTheme({ palette: { mode } });
const SignInSideTheme = createTheme(getSignInSideTheme(mode));

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};

const toggleCustomTheme = () => {
Expand Down
21 changes: 15 additions & 6 deletions docs/data/material/getting-started/templates/sign-in/SignIn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,16 +114,25 @@ export default function SignIn() {
const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
const [open, setOpen] = React.useState(false);

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode');
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};

const toggleCustomTheme = () => {
Expand Down
21 changes: 15 additions & 6 deletions docs/data/material/getting-started/templates/sign-in/SignIn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,16 +119,25 @@ export default function SignIn() {
const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
const [open, setOpen] = React.useState(false);

// This code only runs on the client side, to determine the system color preference
React.useEffect(() => {
// This code only runs on the client side, to determine the system color preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
// Check if there is a preferred mode in localStorage
const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
if (savedMode) {
setMode(savedMode);
} else {
// If no preference is found, it uses system preference
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
setMode(systemPrefersDark ? 'dark' : 'light');
}
}, []);

const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
const newMode = mode === 'dark' ? 'light' : 'dark';
setMode(newMode);
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
};

const toggleCustomTheme = () => {
Expand Down
Loading

0 comments on commit 56ea32d

Please sign in to comment.