Pipeshift JupyterLab Theme

A custom theme extension for JupyterLab featuring both light and dark modes with Pipeshift branding.

Features

• Two Theme Variants:
  • Pipeshift Light - Clean, modern light theme
  • Pipeshift Dark - Elegant dark theme optimized for long coding sessions
• Inter Font Integration: Modern, readable typography
• Customizable CSS Variables: Organized by component for easy modification
• JupyterLab 4.4.5+ Compatible: Built for the latest JupyterLab versions
• Easy Installation: Available via pip

Installation

Via pip (Recommended)

pip install pipeshift-jupyterlab-theme

From Source

git clone https://github.com/pipeshift/pipeshift-jupyterlab-theme.git
cd pipeshift-jupyterlab-theme
pip install -e .

Usage

1. After installation, restart JupyterLab
2. Go to Settings → Theme
3. Select either:
   • Pipeshift Light for light mode
   • Pipeshift Dark for dark mode

Theme Colors

Brand Colors

• Accent Color: #8A38F5 (Pipeshift Purple)

Light Theme

• Primary Background: #FFFFFF
• Primary Text: #181D27
• Border Color: #616161

Dark Theme

• Primary Background: #131314
• Primary Text: #ECECED
• Border Color: #898989

Customization

The theme is built with CSS custom properties (variables) organized by component. You can easily customize colors by overriding these variables:

Core Variables (in style/variables.css)

:root {
  /* Brand Colors */
  --ps-accent-color: #8A38F5;
  --ps-accent-hover: #7A2FE5;
  --ps-accent-active: #6A26D5;
  
  /* Typography */
  --ps-font-family: 'Inter', sans-serif;
  --ps-font-size-base: 13px;
  /* ... and many more */
}

Component-Specific Variables

The theme includes organized variables for:

• Notebook Cells: --ps-cell-*
• File Browser: --ps-filebrowser-*
• Terminal: --ps-terminal-*
• Toolbar: --ps-toolbar-*
• Menus: --ps-menu-*
• Status Bar: --ps-statusbar-*
• Tabs: --ps-tab-*
• Sidebar: --ps-sidebar-*
• Code Editor: --ps-editor-*

Development

Prerequisites

• Node.js 18+
• Python 3.8+
• JupyterLab 4.4.5+

Setup

# Clone the repository
git clone https://github.com/pipeshift-org/pipeshift-jupyterlab-theme.git
cd pipeshift-jupyterlab-theme

# Install dependencies
npm install

# Install the package in development mode
pip install -e .

# Build and link the extension
npm run build
jupyter labextension develop . --overwrite

Development Workflow

# Watch for changes and rebuild
npm run watch

# In another terminal, start JupyterLab
jupyter lab --watch

Building for Production

# Clean previous builds
npm run clean:all

# Build production version
npm run build:prod

# Build Python package
python -m build

File Structure

pipeshift-jupyterlab-theme/
├── src/
│   └── index.ts              # TypeScript entry point
├── style/
│   ├── index.css             # Main CSS entry point
│   ├── variables.css         # CSS custom properties
│   ├── light.css             # Pipeshift Light theme
│   └── dark.css              # Pipeshift Dark theme
├── package.json              # NPM package configuration
├── pyproject.toml            # Python package configuration
├── tsconfig.json             # TypeScript configuration
└── install.json              # JupyterLab installation metadata

Browser Support

• Chrome/Chromium 88+
• Firefox 85+
• Safari 14+
• Edge 88+

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

v0.1.0 (Initial Release)

• Pipeshift Light theme
• Pipeshift Dark theme
• Inter font integration
• Comprehensive CSS variable system
• JupyterLab 4.4.5+ compatibility

Support

For issues and feature requests, please use the GitHub Issues page.

---

Made with ❤️ by Pipeshift