LearnNewsExamplesServices
Frontmatter
id8788
titleRefine Portal News TreeList Dark Theme Styling
stateClosed
labels
enhancementdesignai
assigneestobiu
createdAtJan 18, 2026, 8:15 PM
updatedAtJan 18, 2026, 8:33 PM
githubUrlhttps://github.com/neomjs/neo/issues/8788
authortobiu
commentsCount1
parentIssue8727
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 18, 2026, 8:33 PM

Refine Portal News TreeList Dark Theme Styling

Closed v11.23.0 enhancementdesignai
tobiu
tobiu commented on Jan 18, 2026, 8:15 PM

Objective: Refine the visual hierarchy of the TreeList navigation in the Portal App's News section (Releases, Tickets, Blog) for the Dark Theme.

Decision: Use var(--white-off) (#ddddee) for secondary content instead of opacity to ensure visual consistency with Markdown content.

Tasks:

  1. Ticket Model Update:
    • Modify apps/portal/model/Ticket.mjs to wrap the ticket title in a <span> with a class (.ticket-title).
  2. TreeList SCSS Update:
    • Update resources/scss/src/apps/portal/shared/content/TreeList.scss.
    • Remove opacity: 0.8 from .release-date and .blog-date.
    • Introduce CSS variables for colors to support theming.
  3. Dark Theme Implementation:
    • Create resources/scss/theme-neo-dark/apps/portal/shared/content/TreeList.scss.
    • Set .release-date, .blog-date, and .ticket-title to use var(--white-off).
    • Ensure bold elements (ID, Version) retain the standard bright text color.
tobiu added the enhancement label on Jan 18, 2026, 8:15 PM
tobiu added the design label on Jan 18, 2026, 8:15 PM
tobiu added the ai label on Jan 18, 2026, 8:15 PM
tobiu referenced in commit d00906b - "style: Refine Portal News TreeList Dark Theme Styling (#8788) on Jan 18, 2026, 8:32 PM
tobiu
tobiu Jan 18, 2026, 8:32 PM

Input from Gemini 3 Pro:

✦ I have implemented the Dark Theme styling refinements for the Portal News TreeList (Releases, Tickets, Blog).

Changes:

  1. Ticket Model (apps/portal/model/Ticket.mjs):

    • Wrapped the ticket title in a <span class="ticket-title"> to allow for independent styling from the bold ID, matching the structure of Releases.
  2. TreeList SCSS (resources/scss/src/apps/portal/shared/content/TreeList.scss):

    • Refactored .release-date, .blog-date, and the new .ticket-title to use CSS variables for color.
    • Unified Styling: Applied font-size: 90%, margin-left: 5px, position: relative, and top: -1px to .ticket-title so it visually matches the rendering of release dates.
    • Removed Opacity: Removed opacity: 0.8 from .release-date and .blog-date in favor of explicit color values.
  3. Theme Definitions:

    • Dark Theme (theme-neo-dark):
      • Mapped meta content (dates, ticket titles) to var(--white-off) (#ddddee).
      • Bold identifiers (ID, Version) inherit the default bright text color.
    • Light Theme (theme-neo-light):
      • Mapped meta content to rgba(0, 0, 0, 0.8) to preserve the original visual hierarchy.

The result is a consistent, themable list presentation across all three content types.

tobiu assigned to @tobiu on Jan 18, 2026, 8:32 PM
tobiu added parent issue #8727 on Jan 18, 2026, 8:32 PM
tobiu closed this issue on Jan 18, 2026, 8:33 PM