Frontmatter
| id | 8727 |
| title | Epic: Portal App Dark Theme |
| state | Closed |
| labels | enhancementepicdesignai |
| assignees | tobiu |
| createdAt | Jan 16, 2026, 9:34 PM |
| updatedAt | Jan 21, 2026, 10:05 PM |
| githubUrl | https://github.com/neomjs/neo/issues/8727 |
| author | tobiu |
| commentsCount | 10 |
| parentIssue | null |
| subIssues | 8728 Implement Neo Dark Theme Tokens 8729 Update Portal Header Toolbar for Theme Switching 8730 Enable Neo Dark Theme in Portal Config 8731 Replicate Light Theme Structure to Dark Theme 8732 Implement Dark Theme for General Components 8733 Implement Dark Theme for Container and Form Components 8734 Implement Dark Theme for Data Views 8735 Implement Dark Theme for Navigation Components 8736 Implement Dark Theme for Complex Components 8737 Implement Dark Theme for Application Styles 8738 Refactor Portal App Source SCSS for Theming 8739 Implement Dark Theme for Portal Content Components 8740 Refactor Portal Header Toolbar for Dark Theme 8741 Refactor Portal App Subdirectories for Dark Theme 8742 Refactor Portal TabContainer for Dark Theme 8746 Refine HeaderToolbar SCSS Specificity 8745 Optimize and Document HeaderCanvas Semantic Effects 8744 Implement Canvas-based Hover Effects for Portal Header 8743 Refactor Portal HeaderCanvas View for Theme Propagation 8747 Fix TreeList specificity preventing hover state 8748 Update Portal TabContainer Dark Theme Colors 8749 Update Global Dark Theme Inline Code Background 8750 Refactor Markdown SCSS for Theming 8751 Refine Markdown Details Icon Color 8752 Refine Dark Theme Markdown Blockquote Background 8753 Refine Dark Theme Link Color 8754 Implement Theme-Aware Mermaid Diagram Rendering 8768 Refine Dark Theme Paragraph Text Contrast 8769 Formalize Dark Theme Blockquote Background Token 8770 Refine Dark Theme Markdown Table Header Background 8771 Refine Portal Header Canvas Ribbon Opacity for Dark Theme 8772 Refine Dark Theme Markdown Text Color Consistency 8773 Refine Portal Home Feature Section Dark Theme 8774 Refine Dark Theme for Ticket Timeline Components 8775 Implement Dark Theme for Ticket Canvas 8776 Integrate Theme Switching for Home and Ticket Canvases 8777 Robust Theme Switching for Portal Canvases 8778 Integrate Robust Theme Switching for Services Canvas 8779 Standardize HeaderCanvas Configuration 8788 Refine Portal News TreeList Dark Theme Styling 8843 Persist Portal Theme Selection 8844 Auto-detect System Theme Preference 8845 Sync Monaco Editor Theme in Portal 8846 Fix Monaco Editor Background Glitch 8847 Fix Dark Theme for HighlightJS 8848 Propagate Theme to Embedded Markdown Components 8852 Refactor Portal Footer SCSS for Theming 8853 Modernize Portal Footer Layout with CSS Grid 8854 Implement Footer OffscreenCanvas Overlay |
| subIssuesCompleted | 49 |
| subIssuesTotal | 49 |
| blockedBy | [] |
| blocking | [] |
| closedAt | Jan 21, 2026, 10:05 PM |
Epic: Portal App Dark Theme
tobiu added sub-issue #8728 on Jan 16, 2026, 9:34 PM
tobiu added sub-issue #8729 on Jan 16, 2026, 9:34 PM
tobiu added sub-issue #8730 on Jan 16, 2026, 9:35 PM
tobiu
Jan 16, 2026, 9:43 PM
Input from Gemini 3 Pro:
✦ I have completed the implementation of the Portal App Dark Theme infrastructure and initial switching logic.
Summary of Changes:
Theme Infrastructure:
- Created
resources/scss/theme-neo-darkand populateddesign-tokens.- Inverted
Semantic.scssmappings to map semantic variables to dark core tokens (e.g., backgrounds are nowgray-900).- Updated root selectors in
Core.scss,Semantic.scss, andComponent.scssto.neo-theme-neo-dark.UI Updates:
- Refactored
apps/portal/view/HeaderToolbar.mjs:
- Removed the Slack icon.
- Added a "Switch Theme" button (Moon icon) with
handler: 'onSwitchTheme'.Controller Logic:
- Updated
apps/portal/view/ViewportController.mjswithonSwitchTheme.- The logic toggles
this.component.themebetweenneo-theme-neo-lightandneo-theme-neo-dark.- Updates the button icon dynamically (Sun/Moon).
Configuration:
- Added
neo-theme-neo-darktoapps/portal/neo-config.jsonto ensure the CSS is loaded.The foundation is now in place. Future iterations can focus on fine-tuning the visual assets (logos) and specific component overrides if needed.
tobiu assigned to @tobiu on Jan 16, 2026, 9:48 PM
tobiu added sub-issue #8731 on Jan 16, 2026, 10:04 PM
tobiu added sub-issue #8732 on Jan 16, 2026, 10:09 PM
tobiu added sub-issue #8733 on Jan 16, 2026, 10:21 PM
tobiu
Jan 16, 2026, 10:23 PM
Input from Gemini 3 Pro:
✦ Progress Update: Dark Theme Implementation
We have successfully established the dark theme infrastructure and updated the core form and container components.
Completed:
- Infrastructure: Created
theme-neo-darkstructure and replicated all SCSS files fromtheme-neo-light.- General Components: Updated
Toast,Chip,StatusBadge,Process,Progress,Splitter,DateSelector,Video,BoxLabel.- Containers: Updated
Accordion,AccordionItem,Viewport,Panel.- Forms: Updated
Fieldset,Text,CheckBox,Picker,Switch,Triggers.Remaining Work (To Be Done in Next Session): The following component categories still contain hardcoded light-theme colors and need to be updated to use dark theme semantic tokens:
Data Views:
grid/(Container, Body, Header)table/(Container, Body, Header)list/(Base)tree/(List)Navigation:
tab/(Container, Strip, Header)menu/(List, Panel)toolbar/(Base)Complex Components:
calendar/(Views, Containers)dialog/(Base)tooltip/(Base)draggable/(SortZones)Application Specifics:
apps/(Portal, Docs, etc. need review for specific overrides)Next Steps: Start a new session to tackle the Data Views (
grid,table,list,tree) as the next logical chunk.
tobiu cross-referenced by #8734 on Jan 16, 2026, 10:49 PM
tobiu added sub-issue #8734 on Jan 16, 2026, 10:49 PM
tobiu cross-referenced by #8735 on Jan 16, 2026, 10:54 PM
tobiu added sub-issue #8735 on Jan 16, 2026, 10:54 PM
tobiu cross-referenced by #8736 on Jan 16, 2026, 10:56 PM
tobiu added sub-issue #8736 on Jan 16, 2026, 10:56 PM
tobiu cross-referenced by #8737 on Jan 16, 2026, 10:59 PM
tobiu added sub-issue #8737 on Jan 16, 2026, 10:59 PM
tobiu cross-referenced by #8738 on Jan 16, 2026, 11:08 PM
tobiu added sub-issue #8738 on Jan 16, 2026, 11:08 PM
tobiu
Jan 16, 2026, 11:22 PM
Input from Gemini 3 Pro:
✦ Progress Update & Handoff Instructions
We have completed the implementation of dark theme support for all core component categories (Data Views, Navigation, Complex) and the main application overrides.
Completed:
- #8734 Data Views
- #8735 Navigation
- #8736 Complex Components
- #8737 Apps (Portal, Docs, AgentOS, Covid)
In Progress: Portal App Refactoring (#8738) We started refactoring the Portal App's source SCSS to support theming, but significant work remains. Many source files (e.g., in
shared/content/) still use hardcoded hex values.Instructions for Next Session:
- Scan & Refactor: Continue scanning
resources/scss/src/apps/portal/(especiallyshared/content/) for hardcoded colors.- Strategy:
- Do NOT change the Light Theme: Create app-specific CSS variables. In
resources/scss/theme-neo-light/apps/portal/..., define these variables using the original hardcoded hex values.- Dark Theme Mapping: In
resources/scss/theme-neo-dark/apps/portal/..., map these same variables to our semantic tokens (e.g.,var(--sem-color-bg-neutral-default)).- Flexibility: This indirection allows us to tweak the dark theme implementation without risking any regressions in the default light theme.
Next Targets:
resources/scss/src/apps/portal/shared/content/SectionsContainer.scssresources/scss/src/apps/portal/shared/content/TreeList.scss- Any other files in
src/apps/portalwith hardcoded colors.
tobiu cross-referenced by #8739 on Jan 16, 2026, 11:57 PM
tobiu added sub-issue #8739 on Jan 16, 2026, 11:57 PM
tobiu cross-referenced by #8740 on Jan 17, 2026, 12:15 AM
tobiu added sub-issue #8740 on Jan 17, 2026, 12:15 AM
tobiu cross-referenced by #8741 on Jan 17, 2026, 12:17 AM
tobiu added sub-issue #8741 on Jan 17, 2026, 12:17 AM
tobiu cross-referenced by #8742 on Jan 17, 2026, 12:32 AM
tobiu added sub-issue #8742 on Jan 17, 2026, 12:32 AM
tobiu
Jan 17, 2026, 12:36 AM
Input from Gemini 3 Pro:
✦ Refactoring complete. All identified SCSS files in the Portal App have been updated to support theming via CSS variables.
Summary of Refactoring:
- Core Components:
shared/content/(SectionsContainer,TreeList,Container,PageContainer)- Header:
HeaderToolbar- Sub-apps:
about,services,home(BaseContainer,How),news(tickets/Component)- Navigation:
shared/TabContainerApproach:
- Light Theme: Variables map to original hardcoded hex values to ensure zero visual regression.
- Dark Theme: Variables map to semantic tokens (e.g.,
--sem-color-bg-neutral-default).Remaining:
FooterContainer(Black by design)examples/List&medium/List(Dark overlays by design)We are now ready to tackle offscreen canvas theming in a separate effort.
tobiu added sub-issue #8746 on Jan 17, 2026, 5:07 AM
tobiu added sub-issue #8745 on Jan 17, 2026, 5:15 AM
tobiu added sub-issue #8744 on Jan 17, 2026, 5:15 AM
tobiu added sub-issue #8743 on Jan 17, 2026, 5:15 AM
tobiu added sub-issue #8747 on Jan 17, 2026, 5:59 AM
tobiu added sub-issue #8748 on Jan 17, 2026, 6:19 AM
tobiu added sub-issue #8749 on Jan 17, 2026, 6:26 AM
tobiu added sub-issue #8750 on Jan 17, 2026, 6:33 AM
tobiu added sub-issue #8751 on Jan 17, 2026, 6:45 AM
tobiu added sub-issue #8752 on Jan 17, 2026, 6:54 AM
tobiu added sub-issue #8753 on Jan 17, 2026, 7:01 AM
tobiu added sub-issue #8754 on Jan 17, 2026, 7:09 AM
tobiu added sub-issue #8768 on Jan 18, 2026, 12:10 AM
tobiu added sub-issue #8769 on Jan 18, 2026, 12:20 AM
tobiu added sub-issue #8770 on Jan 18, 2026, 12:26 AM
tobiu added sub-issue #8771 on Jan 18, 2026, 12:46 AM
Implement a comprehensive Dark Theme for the Portal App, utilizing the Neo.mjs Design Token system to ensure maintainability and nesting capability.
Child Tasks:
resources/scss/theme-neo-dark.design-tokensstructure fromtheme-neo-light.Semantic.scss(e.g., map backgrounds to dark gray tokens).apps/portal/view/HeaderToolbar.mjs.apps/portal/neo-config.jsonto include the newneo-theme-neo-dark.