Updated log viewer date range selector for Dark Mode.

[readingdancer]

Prerequisites

• I have added steps to test this contribution in the description below

Issue: #18371

Description

As described in the Issue I raised above, when viewing the log viewer in Dark mode, the data picker icon does not change to white and so it becomes almost invisible.

I have used the UMRACO_THEME_CONTEXT to get the current mode and if it's dark mode, the CSS uses a filter to invert the icon color. From what I have read ( and tested ) it is not possible to actually set a color, so I think this is the best option.

It was like this:

And now it's like this:

[github-actions]

Hi there @readingdancer, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[emmagarland]

Hi @readingdancer,

Thanks for your PR to fix #18371, where you noticed the log viewer date picker icon doesn't change in dark mode. You've clearly been finding a few things in dark mode, which is great!

One of the Core Collaborators team will review this as soon as possible - it might not be something they need to check, but because its a slight UI change, I'll just pop this for HQ to double check re design. It defo looks better from here though 👍

Best wishes

Emma

[nielslyngsoe]

Hi @readingdancer thanks a lot for your effort on this matter.

I do find this particular PR not as ideal as I would like, mainly because it does not work with other themes than the core dark theme. Which is determined by hardcoding the theme alias. Not ideal for maintenance. But impressive that you found this solution.

I had to investigate a few opportunities myself to see if there was another way to go about this, and it turns out there is. So if you up for it it would be nice if you could try this approach instead?

You can set color-scheme: dark; on a input and it would go into dark mode, fixing the icon, but also transforming the whole popover.

So if we introduce a new CSS Custom Property in our themes, like in dark.theme.css
like this:
--uui-color-scheme: dark;

Then that could be used in the umb-input-date component, like this:

	static override styles = [
		...UUIInputElement.styles,
		css`
			input {
				color-scheme: var(--uui-color-scheme, normal);
			}
		`,
	];

This component is already used by Scheduled Publishing and the Date Picker Property Editor.

And by using that component in the Log-viewer, you have solved three cases.

And then in time we should implement that in UI Library as well, making the custom style of umb-input-date component obsolete.

I hope that makes sense and thanks in advance