From f9edd82db6b4b54b5334eabe3a94839c302b1cb2 Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 15 Aug 2024 13:20:51 -0300 Subject: [PATCH] Make selected color mode persist between reload --- .../getting-started/templates/blog/Blog.js | 23 +++++++----- .../getting-started/templates/blog/Blog.tsx | 23 +++++++----- .../templates/checkout/Checkout.js | 22 ++++++++---- .../templates/checkout/Checkout.tsx | 22 ++++++++---- .../templates/dashboard/Dashboard.js | 22 ++++++++---- .../templates/dashboard/Dashboard.tsx | 22 ++++++++---- .../templates/marketing-page/MarketingPage.js | 21 +++++++---- .../marketing-page/MarketingPage.tsx | 21 +++++++---- .../templates/sign-in-side/SignInSide.js | 22 ++++++++---- .../templates/sign-in-side/SignInSide.tsx | 22 ++++++++---- .../templates/sign-in/SignIn.js | 21 +++++++---- .../templates/sign-in/SignIn.tsx | 21 +++++++---- .../templates/sign-up/SignUp.js | 36 +++++++++++-------- .../templates/sign-up/SignUp.tsx | 36 +++++++++++-------- 14 files changed, 224 insertions(+), 110 deletions(-) diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js index 5a54662f604efc..3080d885ee7221 100644 --- a/docs/data/material/getting-started/templates/blog/Blog.js +++ b/docs/data/material/getting-started/templates/blog/Blog.js @@ -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); }; diff --git a/docs/data/material/getting-started/templates/blog/Blog.tsx b/docs/data/material/getting-started/templates/blog/Blog.tsx index 4acb2ec7bfdb08..236fa49af550ee 100644 --- a/docs/data/material/getting-started/templates/blog/Blog.tsx +++ b/docs/data/material/getting-started/templates/blog/Blog.tsx @@ -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); }; diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js index 785b7131d6a5ef..167615fc6a807d 100644 --- a/docs/data/material/getting-started/templates/checkout/Checkout.js +++ b/docs/data/material/getting-started/templates/checkout/Checkout.js @@ -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); diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx index 56d97328092882..f5b197354e2383 100644 --- a/docs/data/material/getting-started/templates/checkout/Checkout.tsx +++ b/docs/data/material/getting-started/templates/checkout/Checkout.tsx @@ -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); diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.js b/docs/data/material/getting-started/templates/dashboard/Dashboard.js index b32c88d6585664..9a69a9832f5454 100644 --- a/docs/data/material/getting-started/templates/dashboard/Dashboard.js +++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.js @@ -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 = () => { diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx index 5dad7c33ed3eea..226029e6c84cb6 100644 --- a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx +++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx @@ -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 = () => { diff --git a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js index 917962cc2e7b45..92ec891210a70c 100644 --- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js +++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js @@ -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 = () => { diff --git a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx index 06abe2565db6bd..809c47cc6f7b4a 100644 --- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx @@ -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 = () => { diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js index c4823ac67b4e2f..f293d336edad40 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js @@ -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 = () => { diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx index 8afd4a6e3a0f28..651af2589a0354 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx @@ -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 = () => { diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js index 4478c7030e5150..685c79925e6033 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.js +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js @@ -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 = () => { diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx index 3fbb8a20f0f0b6..6bf8c3861e58fe 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx @@ -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 = () => { diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.js b/docs/data/material/getting-started/templates/sign-up/SignUp.js index 1ee510f96e68e9..fa45753bbd4f46 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.js +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js @@ -114,15 +114,31 @@ export default function SignUp() { const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); const [nameError, setNameError] = React.useState(false); const [nameErrorMessage, setNameErrorMessage] = React.useState(''); - + // 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 = () => { + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage + }; + + const toggleCustomTheme = () => { + setShowCustomTheme((prev) => !prev); + }; + const validateInputs = () => { const email = document.getElementById('email'); const password = document.getElementById('password'); @@ -160,14 +176,6 @@ export default function SignUp() { return isValid; }; - const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); - }; - - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; - const handleSubmit = (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx index 5afe881f2ccbd6..4b86d512ab5aad 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx @@ -119,15 +119,31 @@ export default function SignUp() { const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); const [nameError, setNameError] = React.useState(false); const [nameErrorMessage, setNameErrorMessage] = React.useState(''); - + // 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 = () => { + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage + }; + + const toggleCustomTheme = () => { + setShowCustomTheme((prev) => !prev); + }; + const validateInputs = () => { const email = document.getElementById('email') as HTMLInputElement; const password = document.getElementById('password') as HTMLInputElement; @@ -165,14 +181,6 @@ export default function SignUp() { return isValid; }; - const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); - }; - - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; - const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget);