LearnNewsExamplesServices
Frontmatter
id8739
titleImplement Dark Theme for Portal Content Components
stateClosed
labels
enhancementdesignai
assigneestobiu
createdAtJan 16, 2026, 11:57 PM
updatedAtJan 17, 2026, 12:14 AM
githubUrlhttps://github.com/neomjs/neo/issues/8739
authortobiu
commentsCount1
parentIssue8727
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 17, 2026, 12:14 AM

Implement Dark Theme for Portal Content Components

Closed v11.23.0 enhancementdesignai
tobiu
tobiu commented on Jan 16, 2026, 11:57 PM

Refactor Portal App content components to support theming, focusing on removing hardcoded colors while preserving the exact light theme appearance.

Tasks:

  1. Refactor SectionsContainer.scss:
    • Replace hardcoded colors (#fff, lightgray, #000) with app-specific CSS variables.
    • Example: --portal-sections-bg, --portal-sections-shadow, --portal-sections-glyph-color.
  2. Define Light Theme Variables:
    • Create resources/scss/theme-neo-light/apps/portal/shared/content/SectionsContainer.scss.
    • Set variables to the original hex values (e.g., #fff).
    • CRITICAL: Ensure zero visual regression for the light theme.
  3. Define Dark Theme Variables:
    • Create resources/scss/theme-neo-dark/apps/portal/shared/content/SectionsContainer.scss.
    • Map variables to semantic tokens (e.g., var(--sem-color-bg-neutral-default)).
  4. Verify TreeList.scss:
    • Ensure var(--list-item-background-color) and var(--list-item-glyph-color) are correctly mapped in the dark theme context, or refactor if they are leaking from a generic list style that doesn't fit.
  5. Scan for other files:
    • Check src/apps/portal/shared/content/ for other hardcoded values.

This ticket is a child of Epic #8727.

tobiu added the enhancement label on Jan 16, 2026, 11:57 PM
tobiu added the design label on Jan 16, 2026, 11:57 PM
tobiu added the ai label on Jan 16, 2026, 11:57 PM
tobiu added parent issue #8727 on Jan 16, 2026, 11:57 PM
tobiu referenced in commit 221626f - "refactor: Implement Dark Theme for Portal Content Components (#8739)" on Jan 17, 2026, 12:13 AM
tobiu
tobiu Jan 17, 2026, 12:14 AM

Input from Gemini 3 Pro:

✦ Refactoring complete.

Changes:

  1. SectionsContainer.scss: Extracted background, button colors, and shadows to CSS variables.
    • Light Theme: Preserved #fff, lightgray, rgba(0,0,0,.3) etc.
    • Dark Theme: Mapped to semantic tokens (--sem-color-bg-neutral-default, etc.).
  2. Container.scss: Extracted sidenav button background and shadow.
  3. PageContainer.scss: Extracted toolbar button background and text color.
  4. TreeList.scss: Verified it uses standard list variables which are correctly mapped in the dark theme.

Files Created:

  • resources/scss/theme-neo-light/apps/portal/shared/content/SectionsContainer.scss
  • resources/scss/theme-neo-dark/apps/portal/shared/content/SectionsContainer.scss
  • resources/scss/theme-neo-light/apps/portal/shared/content/Container.scss
  • resources/scss/theme-neo-dark/apps/portal/shared/content/Container.scss
  • resources/scss/theme-neo-light/apps/portal/shared/content/PageContainer.scss
  • resources/scss/theme-neo-dark/apps/portal/shared/content/PageContainer.scss

Files Modified:

  • resources/scss/src/apps/portal/shared/content/SectionsContainer.scss
  • resources/scss/src/apps/portal/shared/content/Container.scss
  • resources/scss/src/apps/portal/shared/content/PageContainer.scss
tobiu assigned to @tobiu on Jan 17, 2026, 12:14 AM
tobiu closed this issue on Jan 17, 2026, 12:14 AM
tobiu cross-referenced by #8738 on Jan 17, 2026, 12:28 AM