Autocomplete always with light background? #2331

LuisSousaSilva · 2024-03-17T16:10:53Z

LuisSousaSilva
Mar 17, 2024

Do i have to change anything? It's Working great with light background but with dark background it does not adapt and the white letters become invisible!

This is the example from https://tw-elements.com/docs/standard/forms/autocomplete/ => Asynchronous search

iprzybysz · 2024-03-18T06:53:51Z

iprzybysz
Mar 18, 2024
Maintainer

Hi @LuisSousaSilva, please describe your issue clearly, and add details about it - provide a snippet of your code, configuration and content of your error messages if there are any.

0 replies

LuisSousaSilva · 2024-03-18T17:37:52Z

LuisSousaSilva
Mar 18, 2024
Author

Hi. I'm more than happy to. Just didn't know if i could since code is blocked to non pro users. But it's just the autocomplete example in dark mode. For some reason i was not able to do a snippet with pro version. This is the best i could do. Sorry for the trouble.

Download https://mdbootstrap.com/download/tw-elements/free/200yro4afij7qnwu8yo/TWE-STANDARD-Free-2.0.0.zip
Unzip
Change index.html to the code below
Change

Open with dark mode browser
Try to select an option

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>TW Elements</title>
    <!-- Favicon -->
    <link rel="icon" href="img/favicon.ico" type="image/x-icon" />
    <!-- Roboto font -->
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
      rel="stylesheet" />
    <!-- Tailwind -->
    <script src="https://cdn.tailwindcss.com/3.3.0"></script>
    <!-- TW Elements CSS -->
    <link rel="stylesheet" href="css/tw-elements.min.css" />
    <!-- Custom styles -->
    <style></style>
  </head>

  <body class="h-screen w-screen dark:bg-neutral-800 p-6">
    <!-- Start your project here-->
    <div class="relative" data-twe-input-wrapper-init id="async">
      <input
        type="text"
        class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
        id="exampleFormControlInput3" />
      <label
        for="exampleFormControlInput3"
        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[80%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-focused]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-focused]:scale-[0.8] peer-data-[twe-input-state-active]:scale-[0.8] peer-data-[twe-input-focused]:text-primary motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
        >Example label
      </label>
    </div>
    <!-- End your project here-->
  </body>
  <!-- TW Elements JS -->

  <script type="text/javascript" src="PATH TO TW-ELEMENTS PRO/tw-elements.umd.min.js"></script>

  <script>

    const asyncAutocomplete = document.querySelector('#async');
    const asyncFilter = async (query) => {
    const url = `https://swapi.py4e.com/api/people/?search=${encodeURI(query)}`;
    const response = await fetch(url);
    
    const data = await response.json();
      return data.results;
    };
    
    new twe.Autocomplete(asyncAutocomplete, {
      filter: asyncFilter,
      displayValue: (value) => value.name
    });

  </script>

</html>

0 replies

iprzybysz · 2024-03-19T06:41:26Z

iprzybysz
Mar 19, 2024
Maintainer

Do you have the darkMode: "class", added to your tailwind.config.js? Looks like you do not have this script added inside your head and I think this may be the cause:

<script>
  tailwind.config = {
    darkMode: "class",
    theme: {
      fontFamily: {
        sans: ["Roboto", "sans-serif"],
        body: ["Roboto", "sans-serif"],
        mono: ["ui-monospace", "monospace"],
      },
    },
    corePlugins: {
      preflight: false,
    },
  };
</script>

0 replies

LuisSousaSilva · 2024-03-19T15:53:34Z

LuisSousaSilva
Mar 19, 2024
Author

Thanks. You gave me the confidence that there was no problem with the component.

I was not applying the dark mode consistently:

Consistent Dark Mode Application: Ensure that the dark class is being applied correctly throughout your application. This class should be on a parent element of the components you wish to style in dark mode, typically on the or tag. This way, the dark mode styles can cascade down to your components. By Chat GPT

"Just" had to "activate" dark in some parent divs.

Cheers

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Autocomplete always with light background? #2331

{{title}}

Replies: 4 comments

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Autocomplete always with light background? #2331

LuisSousaSilva Mar 17, 2024

Replies: 4 comments

iprzybysz Mar 18, 2024 Maintainer

LuisSousaSilva Mar 18, 2024 Author

iprzybysz Mar 19, 2024 Maintainer

LuisSousaSilva Mar 19, 2024 Author

LuisSousaSilva
Mar 17, 2024

iprzybysz
Mar 18, 2024
Maintainer

LuisSousaSilva
Mar 18, 2024
Author

iprzybysz
Mar 19, 2024
Maintainer

LuisSousaSilva
Mar 19, 2024
Author