Problem/Motivation

In the new "Drupal Events" block on the dashboard, the dark mode styling for the Gin theme (or when using dark mode preferences) is inconsistent. Specifically, the .events-feed and .events-cta sections use a hardcoded or incorrectly mapped variable var(--color-gray-025) for the background. This results in a very bright background (#F9FAFF) that breaks the dark mode aesthetic and reduces readability.

-

Steps to reproduce

  • Enable Dark Mode on the Drupal.org dashboard.
  • Scroll to the "Drupal Events" block.
  • Observe the background color of the events feed and the CTA area; it remains light/white despite the rest of the UI being dark.

Proposed resolution

Update the CSS for the events block to use a theme-appropriate background variable or a specific dark mode override. Overwriting the background with a darker tone (e.g., #222) resolves the issue and integrates better with the Dark Mode UI.

Remaining tasks

  • Identify the exact CSS file providing the .events-feed styling.
  • Apply a media query for (prefers-color-scheme: dark) or update the Gin-specific color mapping.
  • Verify the fix across different viewport sizes.

User interface changes

The "Drupal Events" block will now correctly display a dark background when Dark Mode is active, ensuring a consistent user experience.

API changes

None.

Data model changes

None.

Issue fork drupical-3570846

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

joachim namyslo created an issue. See original summary.

cezara’s picture

hello, I can work on this issue this week.

cezara’s picture

I updated the drupical.css file to fix issues with the dark theme. I created a patch with these updates.

Updates:

1. For .event-info::before class, I replaced:
background-color: var(--color-blue-050); with: background-color: var(--gin-bg-item);

2. For .events-cta, I replaced:
background-color: var(--color-gray-025); to: background-color: var(--gin-bg-layer);

I tested with Gin theme in Dark, Light, and Auto modes and different Accent colors and it looks good.

I attached before and after screenshots and the patch file.

cezara’s picture

Status: Active » Needs review
grienauer’s picture

Assigned: Unassigned » dejan0

  • 626deeeb committed on 1.0.x
    Issue #3570846 by joachim namyslo, cezara, grienauer: fix block footer...
dejan0’s picture

Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.