2

I'm having trouble changing the color of the calendar icon on my post. If I have autoprefixes enabled

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

this is my input

 <span className="dark:text-dark-text text-xs text-gray-700">
          End Date
        </span>
        <input
          type="datetime-local"
          className="dark:bg-dark-bg mt-1 block w-full rounded border-gray-400 text-sm dark:border-gray-600 dark:text-white"
          value={value.customRangeEnd}
          onChange={onChangeCustomRangeEnd}
        />
      </label>
David Yandún
  • 21
  • 2

2 Answers2

2

Maybe you are searching for how to customize the calendar indicator for an <input /> element with the type="date" at a specific browser. I'm assuming you are using Chrome so, the way to customize that is through the -webkit-calendar-picker-indicator pseudo-element.

You can use filter to change opacity, hue-rotation, or even try the color-scheme to change that too.

As a suggestion and expecting that your code works on all browsers, you could use some icon/svg and change the color directly, setting the -webkit-calendar-picker-indicator to something like display: none.

This answer could help you to understand more about it.

About the usage of Tailwindcss to do it, I think you'll need to add those changes as some kind of "custom CSS" or something like that.

Ilê Caian
  • 480
  • 1
  • 7
  • yes, this resolved my problem. `className="dark:bg-dark-bg mt-1 block w-full rounded border-gray-400 text-sm dark:border-gray-600 dark:text-white dark:[color-scheme:dark]"` – David Yandún Oct 05 '22 at 15:59
  • Hey! If this solved your problem, could you consider accepting this answer as the answer to your question? :) – Ilê Caian Oct 11 '22 at 17:12
2

This solved the problem when in darkMode. className="dark:[color-scheme:dark]"

Grace Effiong
  • 21
  • 1