Search code examples
reactjstailwind-cssdaisyui

Can't remove "dark mode" of input fields Tailwind/DaisyUI

I have this settings page with some Input components on it. I want them to be white like the rest of the page but for some reason they are dark. Overwriting the classes doenst help. I use React, Tailwind CSS and DaisyUI.

I also have absolute no Idea why this is even dark at all. If someone could explain this I would be very thankful.

Settings Page

Settings.jsx

import React from 'react';
import 'tailwindcss/tailwind.css';
import 'daisyui/dist/full.css';
import FormInput from '../components/inputs/FormInput';
import DateInput from '../components/inputs/DateInput';

function Settings() {
  return (
    <div className="min-h-screen bg-gray-100 flex flex-col justify-center items-center">
      <div className="max-w-2xl mx-auto bg-white shadow-xl rounded-lg p-8" style={{ width: '800px' }}> {/* Nichtmehr responsive */}
        <h1 className="text-4xl font-bold mb-8 text-center">Einstellungen</h1>
        <div>
          <h2 className="text-2xl font-bold mb-4">Konfiguration</h2>
          <div className="grid grid-cols-1 gap-4">
            <FormInput
                label="Zigaretten am Tag"
                placeholder="15"
                type="number"
                name="cigsPerDay"
            />

            <FormInput
                label="Zigaretten pro Packung"
                placeholder="80"
                type="number"
                name="cigsPerPack"
            />

            <FormInput
                label="Preis pro Packung (€)"
                placeholder="7"
                type="number"
                name="pricePerPack"
            />

            <DateInput
                label="Zeitpunkt des Aufhörens"
                name="dateOfReturn"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Settings;

FormInput.jsx

import React, { useState, useEffect } from 'react';

function FormInput({ label, placeholder, type, name }) {
  const [inputValue, setInputValue] = useState('');

  // Load value from localStorage on component mount
  useEffect(() => {
    const storedValue = localStorage.getItem(name);
    if (storedValue !== null) {
      setInputValue(storedValue);
    }
  }, [name]);

  const handleFocus = (e) => {
    e.target.select();
  };

  const handleChange = (e) => {
    const newValue = e.target.value;
    setInputValue(newValue);
    // Store value in localStorage
    localStorage.setItem(name, newValue);
  };

  return (
    <div className="form-control">
      <label className="label">
        <span className="label-text">{label}</span>
      </label>
      <input
        type={type}
        placeholder={placeholder}
        className="input input-bordered"
        value={inputValue}
        onFocus={handleFocus}
        onChange={handleChange}
      />
    </div>
  );
}

export default FormInput;

Also here is my try at fixing it

<div className="form-control">
   <label className="label">
      <span className="label-text">{label}</span>
   </label>
   <input
        type={type}
        placeholder={placeholder}
        className="input input-bordered bg-white" // Add bg-white to 
                                                    override dark style
        value={inputValue}
        onFocus={handleFocus}
        onChange={handleChange}
   />
</div>
Solution

  • Not the best way to fix it but I added this bit of code do my css file to overwrite everything that might be causing the issue:

    .input.input-bordered {
  background-color: white !important;
}