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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Flowbite theme ThemeProps dark attribute does not change if false #581

Closed
haron68 opened this issue Feb 5, 2023 · 5 comments · Fixed by #582
Closed

Flowbite theme ThemeProps dark attribute does not change if false #581

haron68 opened this issue Feb 5, 2023 · 5 comments · Fixed by #582

Comments

@haron68
Copy link
Contributor

haron68 commented Feb 5, 2023

Describe the bug
When using Flowbite component to create custom theme it does not accept dark: false. All rendered components use dark theme

To Reproduce
Steps to reproduce the behavior:

  1. Go to root component either index.ts or App.tsx
  2. Use <Flowbite> custom theme component and wrap it around the app container. Set dark: false in ThemeProps
<Flowbite theme={{
    dark: false
  }}>
    <App {...props} />
</Flowbite>
  1. Go to inspect tools on browser
  2. See that <html class="dark"> and all Flowbite components when used within the app render in dark mode

Expected behavior
Flowbite components should render in light mode

System information:

  • Device: 2020 Macbook Pro M1
  • Resolution: 13.3-inch (2560 × 1600)
  • OS: macOS Ventura 13.0.1
  • Browser: Brave/Chrome

Project information:

  • Tailwind: ^3.1.6
  • Flowbite: ^1.5.5
  • Flowbite React: ^0.3.7
  • Type: CRA
@haron68
Copy link
Contributor Author

haron68 commented Feb 5, 2023 •
edited
Loading

This behavior I've noticed is actually happening because my default OS theme is dark mode. So when the Flowbite component initializes and has usePreferences = true it will run the media query at

flowbite-react/src/lib/components/Flowbite/ThemeContext.tsx

Line 39 in 6501245

const userPreferenceIsDark = () => window.matchMedia?.('(prefers-color-scheme: dark)').matches;

and see that my preference is dark mode on an OS level and then save that preference in localStorage. This effectively overrides the dark = false setting in the ThemeProps in this case

@haron68
Copy link
Contributor Author

haron68 commented Feb 5, 2023

I think intuitively if a developer sets dark = false or dark = true this should render the page as so no matter what the user's OS level settings are.

haron68 added a commit to haron68/flowbite-react that referenced this issue Feb 5, 2023
@haron68
fix(flowbite themeprops): fix bug with user preferences overriding da…
5951132 
…rk = false

Found an issue where userpreferences when set to true overrides dark = false in theme props which is
a confusing developer experience

fix themesberg#581
@haron68 haron68 mentioned this issue Feb 5, 2023
Merged
9 tasks
@rluders
Copy link
Collaborator

rluders commented Feb 5, 2023

This is all cool, @haron68. Maybe you want to check this one #565

@haron68
Copy link
Contributor Author

haron68 commented Feb 5, 2023

@rluders I agree that userPreferences should be managed by the developer. I can make this change instead for my contribution

@rluders
Copy link
Collaborator

rluders commented Feb 5, 2023

This would be great @haron68

haron68 added a commit to haron68/flowbite-react that referenced this issue Feb 6, 2023
@haron68
fix(theme): removed usePreferences
7fbfe4f 
Fixes bug with dark = false not working. Removed usePreferences because of potential legal issues
due to GDPR

BREAKING CHANGE: ThemeProps no longer includes usePreferences

fix themesberg#565, fix themesberg#581
rluders pushed a commit that referenced this issue Feb 21, 2023
@haron68
feat(/lib/components/flowbite): remove usePreferences (#582)
77cbc27 
* fix(flowbite themeprops): fix bug with user preferences overriding dark = false

Found an issue where userpreferences when set to true overrides dark = false in theme props which is
a confusing developer experience

fix #581

* fix(theme): removed usePreferences

Fixes bug with dark = false not working. Removed usePreferences because of potential legal issues
due to GDPR

BREAKING CHANGE: ThemeProps no longer includes usePreferences

fix #565, fix #581

* refactor(theme): refactor useThemeMode

Refactored useThemeMode to fetch context state

* refactor(theme): improve readability

improve readability and fix merge conflicts. Update documentation for ThemePage

#565

* refactor(theme): remove === check for false to set light mode

Since we're no longer using localStorage no need to hard check for false
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(/lib/components/flowbite): remove usePreferences haron68/flowbite-react
2 participants
@rluders @haron68