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-feedstyling. - 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.
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | fix-block-footer-gin-darkmode.patch | 767 bytes | cezara |
| #3 | Drupal-events-darkmode-after-updates.png | 89.1 KB | cezara |
| #3 | Drupal-events-darkmode-before-updates.png | 88.43 KB | cezara |
| 31-01-2026_21-56-04.png | 69.55 KB | joachim namyslo |
Issue fork drupical-3570846
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
Comment #2
cezara commentedhello, I can work on this issue this week.
Comment #3
cezara commentedI 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.
Comment #4
cezara commentedComment #5
grienauerComment #7
dejan0 commented