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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select component underline, dropdown options css is gone when darkmode is used #1492

Open
piengeng opened this issue Nov 20, 2024 · 1 comment

Comments

@piengeng
Copy link

piengeng commented Nov 20, 2024

Describe the bug

firefox seems fine, screenshot from chrome/thorium darkmode

copied code from https://flowbite-svelte.com/docs/forms/select
<Select underline ... /> vs <Select ... />
flowbite-svelte-select-underline

Reproduction

+page.svelte

<script>
  import { Select, Label, DarkMode } from 'flowbite-svelte';
  let selected = '';
  let countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'de', name: 'Germany' },
    { value: 'fr', name: 'France', disabled: true },
  ];
</script>
<DarkMode/>

<Label>
  Select an option
  <Select class="mt-2" items={countries} bind:value={selected} />
</Label>
<Label>
  Select an option
  <Select underline class="mt-2" items={countries} bind:value={selected} />
</Label>

Flowbite version and System Info

  System:                                                       
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics        
    Memory: 4.69 GB / 15.03 GB                                  
    Container: Yes                                              
    Shell: 5.2.21 - /bin/bash                                   
  Binaries:                                                     
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm         
    pnpm: 9.1.3 - ~/.nvm/versions/node/v22.11.0/bin/pnpm        
  Browsers:                                                     
    Chrome: 131.0.6778.85                                       
  npmPackages:                                                  
    @sveltejs/kit: ^2.8.1 => 2.8.1     
    flowbite-svelte: ^0.47.3 => 0.47.3 
    svelte: ^5.2.2 => 5.2.2     
    vite: ^5.4.11 => 5.4.11     
@piengeng
Copy link
Author

not sure how long it'll take for a better dev to fix this, my workaround as below, probably not that pretty, but it removes the light during Select in darkmode. I hope it helps for others facing this issue.

<Select ... class="...  dark:active:bg-gray-700" />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant