🎨 Prakhar AG Grid Themes

Beautiful, modern themes for AG Grid with light and dark variants. Built with customization and developer experience in mind.

✨ Features

• 🌟 Beautiful Design - Modern, professional themes
• 🌓 Light & Dark Modes - Complete theme variants
• 🎯 Easy Integration - Simple CSS imports
• 🔧 Highly Customizable - CSS custom properties
• 📱 Responsive - Works on all screen sizes
• ⚡ Performance Optimized - Minimal CSS footprint
• 🎨 Professional Gradients - Eye-catching header designs
• 🔄 Smooth Animations - Polished user interactions

🚀 Quick Start

Installation

npm install @prakhar/ag-grid-themes

Basic Usage

Option 1: Import CSS directly

/* Import in your CSS/SCSS file */
@import '@prakhar/ag-grid-themes/dist/prakhar-ag-grid-themes.css';

Option 2: Import in JavaScript/TypeScript

// Import in your component or main file
import '@prakhar/ag-grid-themes/dist/prakhar-ag-grid-themes.css';

Apply Theme

Angular

<!-- Light Theme -->
<div class="ag-theme-quartz prakhar-theme" style="height: 500px;">
  <ag-grid-angular
    [columnDefs]="columnDefs"
    [rowData]="rowData">
  </ag-grid-angular>
</div>

<!-- Dark Theme -->
<div class="ag-theme-quartz prakhar-theme-dark" style="height: 500px;">
  <ag-grid-angular
    [columnDefs]="columnDefs"
    [rowData]="rowData">
  </ag-grid-angular>
</div>

React

import { AgGridReact } from 'ag-grid-react';
import '@prakhar/ag-grid-themes/dist/prakhar-ag-grid-themes.css';

function MyComponent() {
  return (
    <div className="ag-theme-quartz prakhar-theme" style={{ height: 500 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
      />
    </div>
  );
}

Vue

<template>
  <div class="ag-theme-quartz prakhar-theme" style="height: 500px;">
    <ag-grid-vue
      :columnDefs="columnDefs"
      :rowData="rowData">
    </ag-grid-vue>
  </div>
</template>

<script>
import '@prakhar/ag-grid-themes/dist/prakhar-ag-grid-themes.css';
</script>

🎨 Available Themes

Light Theme

<div class="ag-theme-quartz prakhar-theme">
  <!-- Your AG Grid -->
</div>

Dark Theme

<div class="ag-theme-quartz prakhar-theme-dark">
  <!-- Your AG Grid -->
</div>

Auto Theme (System Preference)

<div class="ag-theme-quartz prakhar-theme-auto">
  <!-- Your AG Grid -->
</div>

⚙️ Customization

CSS Custom Properties

You can easily customize colors by overriding CSS custom properties:

.ag-theme-quartz.prakhar-theme {
  /* Override primary colors */
  --ag-accent-color: #your-color;
  --ag-primary-color: #your-color;
  
  /* Override header colors */
  --ag-header-background-color: linear-gradient(135deg, #color1, #color2);
  --ag-header-foreground-color: #your-text-color;
  
  /* Override row colors */
  --ag-row-background-color: #your-bg-color;
  --ag-row-hover-color: #your-hover-color;
}

Theme Switching

JavaScript Theme Switcher

function switchTheme(isDark) {
  const gridElement = document.querySelector('.ag-theme-quartz');
  
  if (isDark) {
    gridElement.classList.remove('prakhar-theme');
    gridElement.classList.add('prakhar-theme-dark');
  } else {
    gridElement.classList.remove('prakhar-theme-dark');
    gridElement.classList.add('prakhar-theme');
  }
}

Angular Theme Switcher

// Component
export class MyComponent {
  isDarkTheme = false;
  
  get themeClass() {
    return `ag-theme-quartz ${this.isDarkTheme ? 'prakhar-theme-dark' : 'prakhar-theme'}`;
  }
  
  toggleTheme() {
    this.isDarkTheme = !this.isDarkTheme;
  }
}

<!-- Template -->
<div [class]="themeClass" style="height: 500px;">
  <ag-grid-angular></ag-grid-angular>
</div>
<button (click)="toggleTheme()">Toggle Theme</button>

🎯 Advanced Usage

SCSS Imports (Recommended for customization)

// Import individual theme files for more control
@import '@prakhar/ag-grid-themes/src/themes/prakhar-light';
@import '@prakhar/ag-grid-themes/src/themes/prakhar-dark';

// Or import everything
@import '@prakhar/ag-grid-themes/src/index';

// Your custom overrides
.ag-theme-quartz.my-custom-theme {
  @extend .prakhar-theme;
  
  // Your customizations
  --ag-accent-color: #ff6b6b;
}

Build Your Own Variant

// Create a custom theme based on Prakhar theme
.ag-theme-quartz.my-brand-theme {
  // Start with Prakhar light theme
  @extend .prakhar-theme;
  
  // Override with your brand colors
  --ag-accent-color: #your-brand-color;
  --ag-primary-color: #your-brand-color;
  --ag-header-background-color: linear-gradient(135deg, #brand1, #brand2);
  
  // Custom enhancements
  .ag-header-cell-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
}

📦 What's Included

@prakhar/ag-grid-themes/
├── dist/
│   ├── prakhar-ag-grid-themes.css      # Compiled CSS (expanded)
│   ├── prakhar-ag-grid-themes.min.css  # Compiled CSS (minified)
│   └── index.d.ts                      # TypeScript definitions
├── src/
│   ├── themes/
│   │   ├── _prakhar-light.scss         # Light theme source
│   │   └── _prakhar-dark.scss          # Dark theme source
│   ├── index.scss                      # Main entry point
│   └── index.d.ts                      # TypeScript definitions
└── package.json

🛠️ Development

Prerequisites

• Node.js 16+
• npm or yarn

Setup

git clone https://github.com/yourusername/prakhar-ag-grid-themes.git
cd prakhar-ag-grid-themes
npm install

Build

npm run build          # Build CSS and types
npm run build:css      # Build CSS only
npm run build:types    # Build TypeScript definitions

Development Mode

npm run dev            # Watch for changes and rebuild

🎨 Design Philosophy

• Modern & Clean - Contemporary design that works in professional applications
• Accessible - High contrast ratios and clear visual hierarchy
• Flexible - Easy to customize without breaking the design
• Performance - Optimized CSS with minimal specificity conflicts
• Cross-Framework - Works with Angular, React, Vue, and vanilla JavaScript

📋 Browser Support

• Chrome 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 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.

🙏 Acknowledgments

• Built on top of AG Grid
• Inspired by modern design systems
• Colors from carefully curated palettes

📞 Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

Made with ❤️ by Prakhar Singh