# Customizing Sidebar Colors

This document explains how to customize the sidebar colors in the Bidda school management system.

## How It Works

The sidebar colors can be customized through the `assets/css/custom-sidebar.css` file without modifying the core CSS files. This approach ensures that your customizations won't be lost when updating the system.

## Customization Steps

1. **Locate the Custom CSS File**
   The custom sidebar CSS file is located at:
   ```
   assets/css/custom-sidebar.css
   ```

2. **Edit Color Variables**
   Open the file and modify the CSS variables at the top of the file:
   ```css
   :root {
       /* You can customize these colors to change the sidebar appearance */
       --custom-sidebar-primary: #1a237e;      /* Dark blue primary */
       --custom-sidebar-secondary: #303f9f;    /* Medium blue secondary */
       --custom-sidebar-accent: #536dfe;       /* Light blue accent */
       --custom-sidebar-hover: #ff4081;        /* Pink hover color */
       --custom-sidebar-text: #ffffff;         /* White text */
       --custom-sidebar-text-muted: #e0e0e0;   /* Light gray text */
   }
   ```

3. **Apply Your Colors**
   Change the hex values to your desired colors. For example, to use green tones:
   ```css
   :root {
       --custom-sidebar-primary: #2e7d32;      /* Dark green */
       --custom-sidebar-secondary: #388e3c;    /* Medium green */
       --custom-sidebar-accent: #4caf50;       /* Light green */
       --custom-sidebar-hover: #81c784;        /* Lighter green */
       --custom-sidebar-text: #ffffff;         /* White text */
       --custom-sidebar-text-muted: #e8f5e9;   /* Light green text */
   }
   ```

4. **Save and Refresh**
   Save the file and refresh your browser to see the changes.

## Color Variable Reference

| Variable | Purpose |
|----------|---------|
| `--custom-sidebar-primary` | Primary background gradient color |
| `--custom-sidebar-secondary` | Secondary background gradient color |
| `--custom-sidebar-accent` | Accent color for icons and active states |
| `--custom-sidebar-hover` | Hover effect color |
| `--custom-sidebar-text` | Main text color |
| `--custom-sidebar-text-muted` | Muted/disabled text color |

## Advanced Customization

You can also modify specific elements by editing the corresponding CSS rules in the file:

- `.sidebar` - Main sidebar background
- `.nav-link` - Navigation link styles
- `.nav-link:hover` - Hover effects
- `.nav-link.active` - Active link styles
- `.nav-icon` - Navigation icon colors
- `.nav-badge` - Badge styles

## Troubleshooting

If your changes don't appear:

1. Clear your browser cache
2. Check that the `custom-sidebar.css` file is properly included in your HTML
3. Verify there are no syntax errors in your CSS
4. Ensure the file permissions allow reading

## Note

This customization system preserves your changes during system updates since it doesn't modify the core CSS files.