Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add abillity to prevent CssVarsProvider from using local storage #35837

Open
2 tasks done
zroug opened this issue Jan 15, 2023 · 2 comments
Open
2 tasks done

Add abillity to prevent CssVarsProvider from using local storage #35837

zroug opened this issue Jan 15, 2023 · 2 comments
Assignees
Labels
customization: css Design CSS customizability package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5.

Comments

@zroug
Copy link

zroug commented Jan 15, 2023

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Summary 馃挕

The current implementation of CssVarsProvider requires the use of local storage to store the theme settings. My suggestion is to make the use of local storage optional. One idea is to add a mode property to CssVarsProvider, in addition to the existing defaultMode property. With this new property, the theme would be controlled solely by the property and would not be affected by local storage. Another suggestion is to delay writing to local storage until the theme is explicitly changed using the setter of the useColorScheme hook. That way, if the setter is not used, nothing would be written to local storage.

Examples 馃寛

No response

Motivation 馃敠

The current version of CssVarsProvider requires the use of local storage, even though it is unnecessary in certain situations. For example, if the theme is only controlled by the system theme, or if there is only one theme, there is no need to use local storage. Local storage adds unnecessary complexity due to statefulness. For example, it adds the need to check how divergent states in local storage and in code interact.

@zroug zroug added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 15, 2023
@zannager zannager added package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5. customization: css Design CSS customizability and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 16, 2023
@kingpalethe
Copy link

Has anyone found a solution for this for usage in Joy? I need to change the color scheme programmatically for certain templates, and it would seem I would need to interact with the local storage and CSSVarsProvider in order to do this, in a complex way?

@tuckergordon
Copy link

I'm not sure if this belongs as a comment on this ticket or if it should be its own ticket, but using localstorage like this creates some developer headaches when developing apps with different themes.

Say I have an app foo and another app bar and each app has a different theme. I first open foo locally at localhost:8080. Later I switch to working on bar and I open it at localhost:8080 and it shows up with foo's theme.

This seems to require manually going in and clearing localstorage, so having an ability to disable that feature would be useful!

At minimum, I would suggest adding a note to the documentation instructing developers to clear localstorage if switching between sites with different themes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
customization: css Design CSS customizability package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5.
Projects
None yet
Development

No branches or pull requests

5 participants