livewire / livewire/flux

Default variant inputs and buttons have different styling

Open
#1,250 3 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

Dominant language
Blade
Stars
977
Forks
112
Avg merge
1d 4h
Merged PRs (30d)
21

Description

### Flux version

2.0.4

### Livewire version

3.6.1

### Tailwind version

4.0.9

### Browser and Operating System

Brave on Windows 11

### What is the problem?

Was the default variants on buttons and input fields intended to be different in dark mode?

![img](https://i.imgur.com/44a7j2f.png)

They are similar in light mode.

![img](https://i.imgur.com/G7iOKPx.png)

To be honest, I'm not a huge fan of the transparency in elements, because having different backgrounds cause the same type of elements to look different.

As I look at the photos above, they don't look horrible, so here's the full element in dark mode.

![img](https://i.imgur.com/f6qWTkp.png)

In my opinion, having the default variants on buttons and inputs be different looks bad. If this was intended, please close this and discard my feedback.

I'd like to add that all of the above elements are default components from Flux. Copy and pasted.

Also, I'm fulling aware that I can just `flux:publish` the component and change it myself, but I thought this feedback was worth just enough to report, and I'm not a huge fan of keeping up with all the changes I've made to stock components.

One last thing, I know that `variant="primary"` should be used for the sign in button, but there are certain scenarios that people need to use the default input with a default button, such as the following:

> [!NOTE]
> The following screenshots were taken directly from the documentation

![img](https://i.imgur.com/VfX63L9.png)

or

![img](https://i.imgur.com/g8jIVb5.png)

The inputs are also different than the menu items active state as well:

![Image](https://github.com/user-attachments/assets/b1f867e2-bdf4-4fe9-8bcb-86adc51be459)

Anyways... thanks for taking the time to read this! Please feel free to throw this one out. I just wanted to give some feedback.

### Code snippets

```html


Sign in to continue


Sign in with Google
Sign in with Facebook
Sign in with Apple



or use your email address


Sign in

Can't sign in?
Create an account


```

### How do you expect it to work?

I'd love to see the default variants on inputs and button to be the same in both dark and light mode.

### Please confirm (incomplete submissions will not be addressed)

- [x] I have provided easy and step-by-step instructions to reproduce the bug.
- [x] I have provided code samples as text and NOT images.
- [x] I understand my bug report will be closed if I haven't met the criteria above.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.