0

I have an input that I want to apply a light/dark theme to.

I implemented the input tag in Angular and I use Bootstrap to style the application.

HTML

<form [formGroup]="exportDialogueForm">
  <div class="form-floating mb-2">
    <input
      id="filename"
      formControlName="name"
      type="text"
      autofocus
      class="form-control"
      placeholder="{{ 'export.chooseFileName' | translate }}"
    />
    <label for="filename" class="form-label">
      {{"export.fileName" | translate}}
    </label>
  </div>
</form>

Issue

As you can see in the image, when I focus on the input field, the background-color is not rendered in the dark theme. It looks like the light theme. If I set autocomplete="off" the background-color does not change and is displayed in the color of the selected theme.

Dark theme in the input does not work

Dark theme works

Unfortunately, I can't find a post with my error description.

I have tried it in following browsers:

  • Firefox
  • Chrome and
  • Edge

Question

  • What could be the cause of this error ?
  • How to make sure that the browser always renders the correct theme?
Basti
  • 1
  • 1

1 Answers1

0

I was researching for a while and then came across a post that helped solve my problem in part. The background of my input is now dark as desired when I switch to the dark theme. Unfortunately, the backgroundis still displayed bright in the list of my saved entries.

Maybe one of you has a tip for me here.

Basti
  • 1
  • 1