Tailwind CSS Autofill and Scrollbar Styling with ShadCN and Dark/Light Mode

[DoZ1rN]

If you're using ShadCN and implementing dark and light modes in your project, you might have encountered issues with the background color of autofilled input fields. Here's a solution that worked for me, along with custom scrollbar styling.

the solution:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 256 58% 99%;
    --foreground: 256 56% 1%;
    --muted: 16 30% 87%;
    --muted-foreground: 16 10% 39%;
    --popover: 256 58% 99%;
    --popover-foreground: 256 56% 1%;
    --card: 256 58% 99%;
    --card-foreground: 256 56% 1%;
    --border: 256 10% 91%;
    --input: 256 10% 91%;
    --primary: 256 61% 79%;
    --primary-foreground: 256 61% 19%;
    --secondary: 16 61% 79%;
    --secondary-foreground: 16 61% 19%;
    --accent: 136 61% 79%;
    --accent-foreground: 136 61% 19%;
    --destructive: 0 88% 27%;
    --destructive-foreground: 0 88% 87%;
    --ring: 256 61% 79%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 256 55% 3%;
    --foreground: 256 14% 100%;
    --muted: 16 30% 13%;
    --muted-foreground: 16 10% 61%;
    --popover: 256 55% 3%;
    --popover-foreground: 256 14% 100%;
    --card: 256 55% 3%;
    --card-foreground: 256 14% 100%;
    --border: 256 10% 10%;
    --input: 256 10% 10%;
    --primary: 256 61% 79%;
    --primary-foreground: 256 61% 19%;
    --secondary: 16 61% 79%;
    --secondary-foreground: 16 61% 19%;
    --accent: 136 61% 79%;
    --accent-foreground: 136 61% 19%;
    --destructive: 0 88% 53%;
    --destructive-foreground: 0 0% 100%;
    --ring: 256 61% 79%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply antialiased bg-background text-foreground scroll-smooth;
  }

  ::selection {
    @apply bg-primary text-background;
  }

  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded-full bg-muted-foreground;
  }

  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px hsl(var(--background)) inset !important;
    box-shadow: 0 0 0 1000px hsl(var(--background)) inset !important;
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
  }
}

Explanation:

Root Variables for Light Mode:
In the :root selector, I've defined various CSS variables for colors and styles that apply to light mode. These include --background, --foreground, and other utility colors.

Dark Mode Variables:
For dark mode, the same variables are redefined under the .dark class. This allows for easy toggling between light and dark modes by simply adding or removing the .dark class on the root element.

Base Layer Styles:
I've applied some basic styles using Tailwind CSS's @apply directive. This includes setting border colors, body styles, text selection styles, and custom scrollbar styles.

Autofill Input Styling:
The styles for input:-webkit-autofill, textarea:-webkit-autofill, and select:-webkit-autofill ensure that autofilled inputs match the theme's background and text color. The -webkit-box-shadow and box-shadow properties are used to override the default autofill background with the custom --background color.

Custom Scrollbar:
I've customized the scrollbar's width, track color, and thumb color for a more cohesive look that matches the theme.
This setup ensures that your autofill inputs and scrollbars remain consistent with your theme, whether in light or dark mode. If you have any questions or improvements, feel free to comment below!

1. Root Variables for Light Mode:

• In the :root selector, various CSS variables are defined for colors and styles that apply to light mode. These variables, such as --background, --foreground, and others, are used throughout the stylesheet to ensure consistency. Using CSS variables makes it easy to manage and change theme colors from a single place.

2. Dark Mode Variables:

• For dark mode, the same variables are redefined under the .dark class. This approach allows for easy toggling between light and dark modes by adding or removing the .dark class on the root element. The colors are adjusted to be suitable for dark backgrounds, ensuring good contrast and readability.

3. Base Layer Styles:

• Basic styles are applied using Tailwind CSS's @apply directive. These include setting border colors, body styles, text selection styles, and custom scrollbar styles. The @apply directive allows you to use Tailwind's utility classes within your CSS, which helps maintain a consistent design system.

4. Autofill Input Styling:

• The styles for input:-webkit-autofill, textarea:-webkit-autofill, and select:-webkit-autofill ensure that autofilled inputs match the theme's background and text color. The -webkit-box-shadow and box-shadow properties are used to override the default autofill background with the custom --background color. This is important because browsers typically change the background color of autofilled inputs, which can clash with your theme. By using hsl(var(--background)), the autofill background color is set to match the theme's background, ensuring a seamless appearance.

5. Custom Scrollbar:

• Custom scrollbar styles are defined using pseudo-elements ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb. These styles make the scrollbar's width, track color, and thumb color consistent with the theme. The @apply directive is used here to apply Tailwind's utility classes for width, background color, and border-radius, making the scrollbar look more integrated with the overall design.

6. Applying the text-input Class:

• The .text-input class is defined to apply autofill styles. This class can be added to input fields to ensure consistent styling for autofilled fields. You can use autofill:text-input class to ensure the text color and background color are applied only on browser autofill.

This setup ensures that your autofill inputs and scrollbars remain consistent with your theme, whether in light or dark mode. The use of CSS variables and the @apply directive from Tailwind CSS makes the styles easy to manage and update. If you have any questions or improvements, feel free to comment below!

Happy coding! 🎨✨

[moechaieb]

The ::-webkit-scrollbar came in clutch for me, thanks!

[DoZ1rN]

You’re welcome! I had a hunch it’d be useful to someone out there. Glad it came through for you!