LearnNewsExamplesServices
Frontmatter
id8738
titleRefactor Portal App Source SCSS for Theming
stateClosed
labels
designairefactoring
assigneestobiu
createdAtJan 16, 2026, 11:08 PM
updatedAtJan 17, 2026, 12:28 AM
githubUrlhttps://github.com/neomjs/neo/issues/8738
authortobiu
commentsCount2
parentIssue8727
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 16, 2026, 11:19 PM

Refactor Portal App Source SCSS for Theming

Closed v11.23.0 designairefactoring
tobiu
tobiu commented on Jan 16, 2026, 11:08 PM

Refactor the Portal App's source SCSS files to replace hardcoded hex values with semantic CSS variables (design tokens). This is necessary because the app currently relies on legacy hardcoded styles (e.g., #fcfcfc backgrounds) that ignore the theme switcher.

Target Directory: resources/scss/src/apps/portal/

Identified Issues:

  1. Viewport (Viewport.scss): Hardcoded #fcfcfc background and gradients.
  2. Features (home/parts/Features.scss): Hardcoded scrollbar colors.
  3. AI Toolchain (home/parts/AiToolchain.scss): Hardcoded #3e63dd for headlines.
  4. Header Toolbar: Hardcoded shadows/logo references.

Tasks:

  1. Scan all SCSS files in src/apps/portal.
  2. Replace hex colors with var(--sem-color-...) tokens.
  3. Ensure !important overrides are minimized or converted to use tokens.
  4. Verify that the new variables are correctly mapped in theme-neo-dark (already implemented).

This task is part of Epic #8727.

tobiu added the design label on Jan 16, 2026, 11:08 PM
tobiu added the ai label on Jan 16, 2026, 11:08 PM
tobiu added the refactoring label on Jan 16, 2026, 11:08 PM
tobiu added parent issue #8727 on Jan 16, 2026, 11:08 PM
tobiu assigned to @tobiu on Jan 16, 2026, 11:08 PM
tobiu referenced in commit 8b8ffab - "refactor: Externalize Portal App colors to CSS variables for theming (#8738)" on Jan 16, 2026, 11:18 PM
tobiu
tobiu Jan 16, 2026, 11:18 PM

Input from Gemini 3 Pro:

✦ Refactored Portal App SCSS to replace hardcoded hex values with app-specific CSS variables.

Changes:

  1. Variables Defined:

    • theme-neo-light/apps/portal/Viewport.scss: Defined original hex values (#fcfcfc, #3e63dd, #f0f0f0) to ensure no visual regression in light mode.
    • theme-neo-dark/apps/portal/Viewport.scss: Mapped these variables to semantic tokens (sem-color-bg-neutral-default, sem-color-text-primary-default, etc.) for dark mode support.
  2. Source Files Updated:

    • src/apps/portal/Viewport.scss: Replaced background color with var(--portal-bg-main).
    • src/apps/portal/home/parts/Features.scss: Replaced scrollbar colors with var(--portal-scrollbar-thumb) and var(--portal-scrollbar-track).
    • src/apps/portal/home/parts/AiToolchain.scss: Replaced headline color with var(--portal-headline-primary).

This ensures the Portal App respects the theme switcher for these previously hardcoded elements.

tobiu closed this issue on Jan 16, 2026, 11:19 PM
tobiu cross-referenced by #8727 on Jan 16, 2026, 11:22 PM
tobiu
tobiu Jan 17, 2026, 12:28 AM

Input from Gemini 3 Pro:

✦ Refactoring completed via sub-tasks:

  • #8739: shared/content components (SectionsContainer, TreeList, etc.)
  • #8740: HeaderToolbar
  • #8741: about, services, home, news subdirectories.

The Portal App SCSS is now largely theme-aware. Remaining hardcoded values in examples/List and medium/List are intentional for specific visual designs (overlays).