Modern, premium NodeBB theme for JAVIS Community - Extends Harmony with custom styling
npm install @okjavis/nodebb-theme-javisA modern, premium NodeBB theme for JAVIS Community. Inspired by the clean aesthetics of Apple, Stripe, and Linear design systems.
- Design System First: Built on a comprehensive design token system for consistency
- Modern Aesthetics: Clean, premium look with smooth interactions
- Fully Customizable: Organized LESS files make customization easy
- Responsive: Works beautifully on all devices
- Performance Optimized: Clean, efficient CSS with no bloat
The JAVIS design system includes:
- Typography: SF Pro-based system font stack
- Color Palette: Primary blue (#0051ff) with neutral grays
- Spacing: 8pt grid system (4px, 8px, 12px, 16px, 20px, 24px)
- Border Radius: Consistent radii (4px, 8px, 12px, 16px, pill)
- Shadows: Soft, subtle elevation system
``bash`
cd /Users/chiragdugar/Desktop/Javis/javis-community-theme
npm install
`bash`
npm run build
This compiles less/theme.less into static/lib/theme.css.
`bash`
npm run dev
This watches your LESS files and rebuilds automatically on changes.
1. Package the theme:
`bash`
cd /Users/chiragdugar/Desktop/Javis
zip -r javis-community-theme.zip javis-community-theme/ -x "/node_modules/" "/.git/"
2. Upload to NodeBB Cloud:
- Go to your NodeBB Admin Panel (ACP)
- Navigate to: Extend → Install Plugins
- Click "Upload Plugin"
- Select javis-community-theme.zip
- Wait for installation to complete
- Rebuild NodeBB when prompted
3. Activate the theme:
- Go to: Appearance → Themes
- Select "JAVIS Community Theme"
- Click "Apply" and rebuild
1. Initialize git (if not already):
`bash`
cd /Users/chiragdugar/Desktop/Javis/javis-community-theme
git init
git add .
git commit -m "Initial JAVIS theme setup"
2. Push to GitHub:
`bash`
git remote add origin https://github.com/yourusername/javis-community-theme.git
git push -u origin main
3. Install from GitHub in NodeBB:
- NodeBB ACP → Extend → Install Plugins
- Enter: yourusername/javis-community-theme
- Click "Install"
`
javis-community-theme/
├── less/
│ ├── theme.less # Main entry point
│ ├── _variables.less # Design tokens
│ ├── _base.less # Global styles & typography
│ ├── _buttons.less # Button system
│ ├── _forms.less # Input & form controls
│ ├── _cards.less # Feed post cards
│ ├── _sidebar.less # Sidebar widgets
│ └── _categories.less # Category list styling
├── static/
│ └── lib/
│ ├── theme.css # Compiled CSS (generated)
│ └── theme.js # Client-side JS
├── templates/ # Custom template overrides (if needed)
├── theme.js # Server-side theme logic
├── plugin.json # NodeBB theme manifest
└── package.json # NPM configuration
Edit less/_variables.less:
`less`
@jv-primary: #0051ff; // Your primary brand color
@jv-primary-hover: #0044dd; // Hover state
Modify the spacing scale in less/_variables.less:
`less`
@jv-space-2: 4px;
@jv-space-4: 8px;
// ... etc
Each component has its own file:
- Buttons: less/_buttons.less
- Forms:
- Cards:
- Sidebar:
- Categories:
1. Create a new LESS file: less/_yourcomponent.less
2. Import it in :`
less`
@import "_yourcomponent";
3. Rebuild:
1. Edit LESS files in the less/ directorynpm run build
2. Run to compile
3. If deployed, re-upload the theme to NodeBB Cloud
4. Rebuild NodeBB in the ACP
Since this is a standalone theme, NodeBB updates won't affect your design. However:
- Test the theme after major NodeBB version updates
- Check for any DOM structure changes that might need CSS adjustments
1. Check that the theme is activated in ACP → Appearance → Themes
2. Make sure you rebuilt NodeBB after installation
3. Clear browser cache (Cmd+Shift+R)
1. Make sure you ran npm run build after editing LESS filesstatic/lib/theme.css
2. Check that was generated
3. Rebuild NodeBB in the ACP
`bash``
npm install
For issues or questions:
- Check NodeBB documentation: https://docs.nodebb.org
- NodeBB Community: https://community.nodebb.org
MIT License - feel free to customize for your needs!
---
Built with ❤️ for JAVIS Community