The idea is:
Add a comprehensive theming system to n8n that allows users to customize the visual appearance of their n8n instance. This would include the ability to create, import, and switch between different themes that modify colors, fonts, spacing, and other visual elements of the n8n interface.
The theming system could work through:
- Built-in theme editor: A UI within n8n settings to customize color schemes, typography, and visual elements
- Theme presets: Pre-made themes (Dark mode variations, Light mode variations, High contrast, Brand-aligned themes)
- Custom CSS support: Advanced users could inject custom CSS for deeper customization
- Theme marketplace/sharing: Community-contributed themes that users could download and apply
- Per-workspace themes: Different themes for different projects or environments (dev, staging, production)
My use case:
- Brand consistency: Companies want their n8n instance to match their brand colors and visual identity, especially when used by multiple team members or shown in demos
- Accessibility needs: Users with visual impairments or specific accessibility requirements need high-contrast themes, larger fonts, or specific color combinations
- Environment differentiation: Developers want to visually distinguish between development, staging, and production instances to prevent mistakes (e.g., red theme for production, blue for dev)
- Personal preference: Power users spend hours daily in n8n and would benefit from customizing their workspace to reduce eye strain and improve comfort
- Dark mode variations: While n8n has dark mode, users want different dark theme variations (OLED black, warm dark, cool dark, etc.)
I think it would be beneficial to add this because:
- Improved user experience: Personalization increases user satisfaction and productivity
- Accessibility compliance: Better supports users with different visual needs and helps meet accessibility standards
- Enterprise adoption: Professional/branded appearance makes n8n more appealing for enterprise deployments
- Reduced errors: Visual differentiation between environments helps prevent costly mistakes
- Community engagement: A theme marketplace would foster community creativity and sharing
- Competitive advantage: Many modern developer tools (VS Code, Notion, Slack) offer theming - users expect this flexibility
- Reduced eye strain: Customizable themes can help users work more comfortably for longer periods
Any resources to support this?
- VS Code theming system: Color Theme | Visual Studio Code Extension API - excellent example of a flexible theming architecture
- Material-UI theming: Theming - Material UI - comprehensive theming framework
- Tailwind CSS theming: Theme variables - Core concepts - Tailwind CSS - CSS variable-based theming approach
- GitHub’s Primer design system: @storybook/cli - Storybook - color token system
- Accessibility guidelines: WCAG 2.1 contrast requirements (Understanding Success Criterion 1.4.3: Contrast (Minimum) | WAI | W3C)
- n8n’s existing dark mode implementation as a starting point for the theming system
Are you willing to work on this?
Yes, I would be interested in contributing to this feature. I could help with:
- Designing the theming architecture and CSS variable system
- Building the theme editor UI
- Creating initial theme presets
- Writing documentation for theme creators
- Testing accessibility compliance