Fix: Several bugfixes on the Dark theme

[McNamara84]

This pull request introduces a comprehensive update to the application's color palette and theming system, focusing on improving consistency and maintainability across both light and dark modes. The changes centralize color variables, enhance support for dark mode, and refactor component-specific styles to use CSS custom properties. This will make it easier to maintain branding and ensure a cohesive look throughout the UI.

Changes

Centralized and Themed Color Variables

• Introduced a shared set of CSS custom properties (variables) for both light and dark themes, such as --elmo-surface, --elmo-heading-color, and more, in css/gfz-cd.css and css/darkmode.css. This enables consistent theming and simplifies future palette adjustments. [1] [2]

Enhanced Dark Mode Support

• Overhauled css/darkmode.css to use the new variables, update Bootstrap dark theme variables, and add targeted component overrides (for cards, modals, dropdowns, buttons, jsTree, autocomplete, etc.) for a more polished and accessible dark mode.

Component-Specific Style Refactoring

• Refactored buttons, alerts, tooltips, badges, and form controls in css/gfz-cd.css and css/help.css to use the new custom properties, ensuring consistent styling across components and between themes. [1] [2] [3] [4] [5]

Improved Footer and Layout Responsiveness

• Updated footer and body padding logic to use CSS variables for dynamic sizing, ensuring the fixed footer does not overlap content and adapts to different devices.

Accessibility and Visual Feedback Improvements

• Updated focus states, drag-and-drop handles, and input feedback to use theme variables, improving accessibility and visual clarity in both light and dark modes. [1] [2] [3] [4] [5]

Screenshots

Optimized Light Mode

ELMO

Guide

Optimized Dark Mode

ELMO

Guide

Notes for Reviewer

ELMO Guido woes reworked on top.

Checklist

Branching Strategy:

If this is a hotfix: The branch was created from main and will be merged into main.
If this is a feature or documentation change: The branch was created from dev and will be merged into dev.
If this is a feature or documentation branch, I have pulled the latest changes from main into my branch.

Code Quality

• My code follows the style guide.
• I have self-reviewed my code.
• I added comments for hard-to-understand code.
• My changes do not create new warnings in the browser console.

Documentation

• If applicable, PHP code is documented using PHPDoc.
• If applicable, JavaScript code is documented using JSDoc.
• If needed, the ELMO Guide ('./doc/help.html') has been updated.
• If needed, the README has been updated.
• If needed, the API documentation ('./api/v2/docs') has been updated.
• If a new feature was added or a bug fixed, the changelog ('./doc/changelog.html') has been updated.

Testing

• If needed, Playwright tests have been updated or added.
• If needed, unit tests have been updated or added.
• If needed, jest tests have been updated or added.

Known Issues

None.

[Daetha]

The Ror and ORCID logos are not visible, but it's ok. There is not much we can do about it. Giving them white background is a worse option.

[Daetha]

Looks astonishing and stilish. Re-using colors as variables in css is a big step towards maintainability. Approved