Fix display issues in "dark mode"

Actually, the main PB UI seems to be taking the foreground color from the theme, but has elements with a white background color hard coded, leading to very poor contrast on some elements.

Also, some elements like the "clear filters" link, are actually buttons styled to look like links, which may be difficult to style in a way that correctly adapts to the parent theme.

@sakthi_dev I see you have started looking at this.

I have made some minor style changes to make it look a bit better in dark mode, mostly by removing background colors. I've added to MR !379 in case it's of use to you.

Created a patch. Please review.

Hi @sakthi_dev,
I've applied the patch, but the build process reports errors such as:

(!) Plugin svelte: Unused CSS selector "[class *= 'dark'] .form-element--type-select"

I don't see "dark" in the classes, and when I switch to light mode, or back to Claro, some dark mode colors are still getting applied.

Did I miss a step.

Issues I have found so far:

1. White background on search area. I can't see that this is achieving anything.
2. Grey border around the search textbox. As it is on the container for the textbox, if the theme has any rounded corners on text input, it will cause a mismatch. A better approach would be to change the border on the text element.
3. Light grey background on search filter area. As the foreground color isn't overridden, this causes contrast issues.
4. Pseudo buttons hard-coded blue. Ideally they should take colors from theme.
5. "Clear filters" is actually a button styled to look like a link, and is hard-coded blue, which has contrast issues on a dark background. Could this be a link with JavaScript handler, so it would pick up theme link colors?
6. "Sort by" has a hard coded grey background, but no foreground color. This makes the foreground invisilbe in Gin dark mode.
7. Module pane border too bright. In light mode, it has a drop shadow, but that disappears in dark mode.
8. Middle section of panel has a hard coded white background. Summary text color not altered, so can cause contrast issues with theme color.
9. Module title hard coded black. Also hover color is hard-coded blue.
10. Security policy is blue, which has low contrast with black background. There is a white version in the images folder, but it is not currently used.

I'm made changes that mitigate the worst problems in dark mode. While there are some changes to the light mode, I feel these are very minor.

Changes in Claro:

Changes in Gin light mode:

Changes in Gin dark mode:

Summary of changes:

• Removed hard coded white backgrounds.
• Removed black color on module titles. This makes them the default link colour. Personally I feel this is a positive, as it makes it more obvious that the title is what you click to get module details.
• Added background color to filter area using rgba function with mid-gray colour and high transparency, which has the effect of making white a bit darker, and black a bit lighter. Also added light border using same method.
• Added background color to module panes the same way.
• Removed background color from sort drop-down.
• Removed outer border form Search textbox.

Additional changes I would like to see.

• Change "Clear filters" button to a link with Javascript handler, so it would get themed in default link style.
• See if enabled filters can be themed with button color from theme.
• See if "Filters", "List" and "Grid" buttons can use default theme styling.
• If dark mode can be detected, replace icons such as the Security Coverage icon with dark mode versions.
• See if drop shadows can be made to work in dark mode.
• See if "Number of projects" drop-down can take theming from active theme.

I think the changes we implement should be for any theme, not just Gin. Most of the changes so far have been removing things that are hard coded for Claro.

Note that Gin has 3 modes: light mode, dark mode, and auto. I think the change @sakthi_dev proposed might have only worked for auto mode. Any solution needs to work for dark mode selected in the settings, or auto detected dark mode from the browser.

Search bar in Claro:

Search bar in Gin light mode:

Search bar in Gin dark mode:

I've been working on fixes to the search bar.

I have changed the "Clear filters" from a button to a link. In Claro this looks and behaves as before, but in Gin or other themes, it will use the link color of the theme.

I have also changed the Applied Filters to actually be buttons. Previously only the "X" was a button. Visually they look very similar, but it does mean that clicking anywhere on the filter button will remove the filter, so we'll need to consider if this is an acceptable change. In Claro this also means the applied filters are shown in bold text. It would be possible to force it to be regular weight, but I'm reluctant to, as some themes may need the buttons in bold.

Overall, I think this is an improvement, and makes this part of the user interface consistent with the theme look. In Gin it makes these elements respect the configurable "accent color".

Currently the Svelte app uses the following to detect a dark color scheme:

export const DARK_COLOR_SCHEME =
  matchMedia('(forced-colors: active)').matches &&
  matchMedia('(prefers-color-scheme: dark)').matches;

This is always seems to be false for me. I also think it wouldn't detect if you'd explicitly selected dark or light mode in Gin theme.

I've tried document.getElementById('project-browser').backgroundColor. Unfortunately, that's always returning rgba(0, 0, 0, 0), presumably because it runs before the styles are applied.

I'm open to other ideas.

document.getElementById('project-browser').backgroundColor

You might have issues with the execution order but I think you will also have problems identifying background colors that are defined on a parent element. E.g., the bodytag is white in Claro but #project-browser just has a transparent background.

I tinkered with this a little and came up with a fiddle that climbs the chain of parent elements to find a background color: https://jsfiddle.net/s8u5yxzL/4/

That method seems to work for most normal situations, but would still theoretically have issues with some cases like understanding background images, gradients or reliably guessing what's behind absolute positioned, or floated elements.

Could anyone convince me that this isn't an issue that belongs in the Gin theme and not here? Are we doing something specifically wrong, like forcing a white color where we should assume transparent? Even if we are, wouldn't it be up to Gin to make those divs the right color anyway?

I think anything specific to make it match a theme should belong in the theme.

However, the theme shouldn't have to fight against decisions we have made in our code. There are a number of places where project browser sets an explicit background color with no foreground color, when the element being colored is the same color as the parent, so a transparent background would be fine.

I think some minor changes to the Project Browser styling will make it much more theme agnostic, and reduce the amount of work a theme has to do.

This issue feels nullified by the resolution outlined in the issue description on 📌 Move styles out of svelte bundle to traditional Drupal library Fixed

Yes, I'm pretty sure the current MR is unsalvageable. I think most of the same changes can go in the CSS file. I will get around to reworking as a new MR soon.

Tagging as post-mvp for the time being.

A lot of issues were fixed in the CSS refactoring that was done a while back, but there are a number of minor issues that I think can be easily fixed.

Starting a new branch to look at them.

I have made a number of changes:

• Remove hard coded background colors where possible, especially from list view cards.
• For filter bar, replace hard coded light background with one that is 50% gray with a high transparency, so on a light background it will be slightly darker than the surroundings, and on a dark background, it will appear slightly lighter.
• Set buttons to use the core button style, so they will be consistent with theme buttons.
• Set links to use the core link class, so will use the theme link styling.

The changes are designed to minimize barriers to adding project browser support to themes. However, any theme specific changes should go in the theme rather than Project Browser.

FYI 📌 Add better integration for Project browser Active

Verified this issue on Drupal version 11.x, Project Browser version version 1.0.x, Gin version 8.x-3.x and it is not reproducible. Steps followed:-

1. Installed Project Browser module in D11 setup.
2. Changed admin theme to Gin and enable dark mode.
3. Reloaded the page /admin/modules/browse and verified that the whole page is in dark mode.

Screenshot attached for reference.

Please let me know if this needs to be tested in any other versions. Or maybe someone else can also test so keeping it in Needs Review for now.

Let's have a look at this at DrupalCon Barcelona and how we can contribute back Gin's improvements

Works for me too, removing the blocker tag for now, but not sure if folks still want to make other fixes here.

@pameeela we still need to contribute the improvements back from Gin to Project browser. But for now this shouldn't be a stable blocker anymore