CAYW Popup Dark.css issue

[shawshank725]

Fixes #14281
Fixed CAYW Popup Dark.css issue: Used predefined variables in the Dark.css file. Comments are added above each new styling to help any other person understand what element is being styled. Used scenic view to identify different elements.

Related issues and pull requests

Closes #14281

PR Description

1. This PR fixes the CAYW (Cite As You Write Popup) theme issue.
2. Tools used: Intellij IDEA for coding, Scenic View Gluon for identifying the elements.
3. File fixed: Dark.css.
4. Comments are added above each style (only for the CAYW Popup) only to help others understand which style is applied to what element.
5. Redundant code removed, styles written such that only the CAYW is affected.

Steps to test

1. Open JabRef. Go to Files -> Preferences -> Select a theme. Select dark theme and press OK on all windows.
2. In the same preferences window, Scroll down to the section: HTTP server, enable it (change port number if you want). Open your browser, go to localhost:port-number-here.
3. You can see the correct dark theme being applied.

Checklist

• I own the copyright of the code submitted and I license it under the MIT license
• I manually tested my changes in running JabRef (always required)
• [/] I added JUnit tests for changes (if applicable)
• I added screenshots in the PR description (if change is visible to the user)
• I added a screenshot in the PR description showing a library with a single entry with me as author and as title the issue number
• [/] I described the change in CHANGELOG.md in a way that can be understood by the average user (if change is visible to the user)
• I checked the user documentation for up to dateness and submitted a pull request to our user documentation repository

[qodo-free-for-open-source-projects]

Review Summary by Qodo

Add dark mode styling for CAYW popup dialog

✨ Enhancement

Walkthroughs

Description

• Added dark mode styling for CAYW popup dialog components
• Styled search field, list cells, and chip elements with predefined variables
• Improved text color consistency using existing CSS variables
• Added detailed comments documenting each styled element

Diagram

flowchart LR
  A["Dark.css"] -->|"Add CAYW styles"| B["Search dialog styling"]
  A -->|"Add CAYW styles"| C["List cell styling"]
  A -->|"Add CAYW styles"| D["Chip component styling"]
  B --> E["Background colors"]
  C --> F["Text and hover states"]
  D --> G["Border and button styles"]

Loading

File Changes

1. jabgui/src/main/resources/org/jabref/gui/Dark.css ✨ Enhancement +43/-0

Add CAYW popup dark mode CSS styling

• Added styling for .search-dialog with dark background color
• Styled .list-cell elements with text fill and hover/selected states
• Added styling for .search-result-label and .search-result-description text elements
• Added .chip-style component styling with border radius and separator color
• Added .chip-style .button styling for transparent cross button appearance
• Included inline comments explaining purpose of each styled element

jabgui/src/main/resources/org/jabref/gui/Dark.css

---

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0)   📘 Rule violations (1)   📎 Requirement gaps (0)   🎨 UX Issues (0)

📘\ ⚙ Maintainability (1)

1. Global list-cell style bleed ☑ 🐞 ⚙

Description

Dark.css introduces global .list-cell rules intended for the CAYW popup, but since Dark.css is
installed on every Scene these rules will affect list cells throughout JabRef (lists, combo box
popups, etc.). This can cause unintended UI regressions outside the CAYW dialog.

Code

jabgui/src/main/resources/org/jabref/gui/Dark.css[R222-241]

+.list-cell {
+    -fx-text-fill: -fx-dark-text-color;
+    -fx-fill: -fx-light-text-color;
+}
+
+/* each cells' background color and text color */
+.list-cell:hover,
+.list-cell:selected {
+    -fx-background-color: derive(-fx-control-inner-background, 10%);
+    -fx-text-fill: -fx-light-text-color;
+}
+
+/* each cells' text and label styles here */
+.list-cell .text,
+.list-cell .label,
+.search-result-label,
+.search-result-description {
+    -fx-text-fill: -fx-light-text-color;
+    -fx-fill: -fx-light-text-color;
+}

Evidence

ThemeManager clears and re-adds only the base stylesheet and the active theme stylesheet to each
Scene, so any top-level selectors in Dark.css apply globally. Base.css already contains global
list-cell rules, meaning the new unscoped .list-cell selectors can override or interfere across
the app, not just for CAYW.

jabgui/src/main/resources/org/jabref/gui/Dark.css[214-241]
jabgui/src/main/java/org/jabref/gui/theme/ThemeManager.java[106-121]
jabgui/src/main/java/org/jabref/gui/theme/ThemeManager.java[157-174]
jabgui/src/main/resources/org/jabref/gui/Base.css[763-788]
jabsrv/src/main/java/org/jabref/http/server/cayw/gui/SearchDialog.java[84-90]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The new Dark.css rules for the CAYW popup use global selectors like `.list-cell`, which will restyle list cells across the entire application whenever Dark.css is active.
### Issue Context
Dark.css is applied to every JavaFX `Scene` by the theme system, so unscoped selectors are not limited to the CAYW dialog.
### Fix Focus Areas
- jabgui/src/main/resources/org/jabref/gui/Dark.css[214-255]
### Suggested fix
- Scope all CAYW-related rules under a parent selector unique to the dialog, e.g.:
- `.search-dialog .list-cell { ... }`
- `.search-dialog .list-cell:hover, .search-dialog .list-cell:selected { ... }`
- `.search-dialog .chip-style { ... }`
- `.search-dialog .search-result-label, .search-dialog .search-result-description { ... }`
- Avoid styling `.list-cell` globally unless that is explicitly intended for the entire dark theme.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Trivial CSS comments added 📘 ⚙

Description

New comments largely restate what the selectors already express (e.g., describing .search-dialog,
.list-cell, and .chip-style). This adds noise and reduces readability, contrary to the guideline
that comments should explain intent/rationale rather than narrate code.

Code

jabgui/src/main/resources/org/jabref/gui/Dark.css[R214-255]

+/* Cite as you write styles begin here */
+
+/* this is the search filed used to enter the citation name */
+.search-dialog {
+    -fx-background-color: -jr-background-alt;
+}
+
+
+.list-cell {
+    -fx-text-fill: -fx-dark-text-color;
+    -fx-fill: -fx-light-text-color;
+}
+
+/* each cells' background color and text color */
+.list-cell:hover,
+.list-cell:selected {
+    -fx-background-color: derive(-fx-control-inner-background, 10%);
+    -fx-text-fill: -fx-light-text-color;
+}
+
+/* each cells' text and label styles here */
+.list-cell .text,
+.list-cell .label,
+.search-result-label,
+.search-result-description {
+    -fx-text-fill: -fx-light-text-color;
+    -fx-fill: -fx-light-text-color;
+}
+
+/* This is the chip style that contains the selected citation name and cross button */
+.chip-style {
+    -fx-border-radius: 15px;
+    -fx-border-color: -jr-separator;
+    -fx-border-width: 1px;
+}
+
+/* This is the chip style button present in the chip style. it is the cross */
+.chip-style .button {
+    -fx-border-color: transparent;
+    -fx-border-width: 0;
+    -fx-background-color: transparent;
+}

Evidence

PR Compliance ID 5 requires avoiding comments that merely restate adjacent code. The added comment
lines describe what each CSS selector targets (e.g., search field, list cell hover, chip button)
without adding non-obvious rationale.

AGENTS.md
jabgui/src/main/resources/org/jabref/gui/Dark.css[214-255]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
New CSS comments mostly narrate what the selectors already indicate, instead of explaining intent/why.
## Issue Context
The style block adds multiple comments such as "this is the search filed..." and "each cells' background color..." that do not add rationale beyond the selector names.
## Fix Focus Areas
- jabgui/src/main/resources/org/jabref/gui/Dark.css[214-255]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. Inconsistent list-cell text color ☑ 🐞 ≡

Description

The new .list-cell rule sets -fx-text-fill to -fx-dark-text-color (black in Dark.css) while
nested rules force child text/labels to light colors, making the result depend on cell
implementation details. This can cause readability issues for list-cell content that relies on the
ListCell’s own -fx-text-fill (and makes the styling harder to reason about).

Code

jabgui/src/main/resources/org/jabref/gui/Dark.css[R222-225]

+.list-cell {
+    -fx-text-fill: -fx-dark-text-color;
+    -fx-fill: -fx-light-text-color;
+}

Evidence

In Dark.css, -fx-dark-text-color is explicitly defined as black and -fx-control-inner-background
is a dark color. Setting .list-cell { -fx-text-fill: -fx-dark-text-color; } therefore yields black
text against dark backgrounds unless overridden by more specific child-node rules.

jabgui/src/main/resources/org/jabref/gui/Dark.css[1-41]
jabgui/src/main/resources/org/jabref/gui/Dark.css[222-241]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`.list-cell` sets `-fx-text-fill` to `-fx-dark-text-color` (black), but later rules set child text/labels to `-fx-light-text-color`. This inconsistency makes text color depend on the internal node structure of the cell.
### Issue Context
In the dark theme, the list background is dark, so using black as the default cell text color is risky.
### Fix Focus Areas
- jabgui/src/main/resources/org/jabref/gui/Dark.css[222-241]
### Suggested fix
- Change the base `.list-cell` text color to a light color (typically `-fx-light-text-color`) and remove redundant/conflicting properties, for example:
- `.search-dialog .list-cell { -fx-text-fill: -fx-light-text-color; }`
- Keep descendant overrides only where needed (e.g., for custom `Text` nodes via `-fx-fill`).
- If you apply the scoping fix from the other finding, apply these changes under `.search-dialog ...` as well.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[Siedlerchr]

Please address the issues mentioned by qodo