Month dropdown in Custom Range is light even with dark theme

[metmarkosaric]

Past Issues Searched

• I have searched open and closed issues to make sure that the bug has not yet been reported

Issue is a Bug Report

• This is a bug report and not a feature request, nor asking for self-hosted support

Using official Plausible Cloud hosting or self-hosting?

Plausible Cloud from plausible.io

Describe the bug

The month dropdown in the Custom Range date picker uses the light theme even with the dark theme enabled.

In Firefox:

In Chrome:

Expected behavior

The month dropdown should be dark theme too when dark theme is selected

Screenshots

No response

Environment

- OS:
- Browser:
- Browser Version:

[djanda97]

This is my first time diving into the codebase, but I have a feeling that the renderDropDownContent function in the DatePicker component would be a good place to investigate.

After seeing that the DatePicker component uses the Flatpickr library, I found this comment which might be related to the theming issue shown in the screenshots above.

[ukutaht]

@djanda97 yes this seems like the correct place to add some custom styling for dark mode. Are you working towards a PR? I would gladly accept a fix for this 😊

[djanda97]

@ukutaht I just got my development environment up and running, so yes I'd like to start working on a PR for this issue! 😄

[djanda97]

A few notes that I've gathered:

• assets/js/dashboard/datepicker.js uses the Flatpickr component from the react-flatpicker library to generate the calendar dropdown

• The option elements that the Flatpickr component generates have the flatpickr-monthDropdown-month class attribute

• I tried adding this snippet to assets/css/flatpickr.css, but there were no noticeable changes in the UI:

  .dark .flatpickr-monthDropdown-month {
    color: #f3f4f6 !important;
    background-color: #1f2937 !important;
  }
  

• The Flatpickr component generates the following HTML starting at <div class=”flatpickr-wrapper”>:

• From MDN:

  • "Styling the <option> element is highly limited. Options don't inherit the font set on the parent. In Firefox, only color and background-color can be set however in Chrome or Safari it's not possible to set any properties."

• From MDN:

  • "The second, slightly more major issue is that you don't have control over the box that appears containing the options when you click on the <select> box to open it. You'll notice that the options don't inherit the font set on the parent. You also can't consistently set things like spacing and colors. For example, Firefox will apply color and background-color when set on the <option> elements, Chrome won't. Neither of them will apply any kind of spacing (e.g. padding)."
  • "If you really need full control over the option styling, you'll have to either use some kind of library to generate a custom control, or build your own custom control."

[ukutaht]

Thanks @djanda97!

So based on this it looks like changing the background color is not possible with the <option> tag... doesn't look like there's much we can do on this one.

[metmarkosaric]

thanks for the investigation @djanda97! i'll close this for now as there doesn't seem to be anything actionable we can do. we can always reopen if/when we have a plan for how to handle it