Theme Configuration

This guide explains how to customize the appearance of your HPC Dashboard using shadcn/ui themes. You can easily change the color scheme to match your organization's branding or improve visual accessibility.

Prerequisites

• Access to your HPC Dashboard codebase
• Basic understanding of CSS
• Administrator privileges

Choosing a Theme

The HPC Dashboard uses shadcn/ui for its component library, which provides a flexible theming system.

1. Browse Available Themes

Visit the shadcn/ui themes page at https://ui.shadcn.com/themes to explore the available color schemes:

• Default (light and dark)
• Zinc
• Slate
• Stone
• Gray
• Rose
• Orange
• Green
• Blue
• Yellow
• Violet
• And more custom options

Each theme has a light and dark variant that users can toggle between.

2. Apply a New Theme

To apply a theme, you'll need to modify your project's global.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

Replace these color values with the ones from your chosen theme on the shadcn/ui themes page.

Implementation Steps

1. Copy the Theme Code

1. Navigate to https://ui.shadcn.com/themes
2. Browse through the available themes and select one that matches your requirements
3. Click on the theme to preview it
4. Click the "Copy" button to copy the CSS variables to your clipboard

2. Update Your Global CSS

1. Locate your project's global.css file (typically in app/global.css or similar path)
2. Replace the existing CSS variables in the :root and .dark sections with the copied values
3. Save the file

# Example path to global.css
vim /project-root/app/global.css

3. Test the Theme

After updating the CSS:

1. Rebuild the application
2. Test in both light and dark modes to ensure all components render correctly
3. Check for any contrast issues, especially with text and interactive elements

# Rebuild your application
npm run build
# or
yarn build

Custom Theming

If none of the pre-made themes match your requirements, you can create a custom theme:

1. Create a Custom Color Palette

Use a color picker or design tool to select colors for:

• Primary and secondary colors
• Background and foreground colors
• Accent colors
• Warning/error states

2. Convert to HSL Format

shadcn/ui uses HSL (Hue, Saturation, Lightness) format for colors. Convert your hex colors to HSL:

# Example color conversion
# #3b82f6 (blue) → 217 91% 60% → 217 91% 60%

Several online tools can help with this conversion.

3. Update Global CSS with Custom Values

Replace the variables in your global.css file with your custom HSL values.

Applying Dark Mode Toggle

The HPC Dashboard includes a dark mode toggle. Ensure it's properly configured:

Troubleshooting

Common Issues

1. Colors not updating: Make sure you've replaced all the CSS variables and rebuilt the application

2. Contrast issues: If text becomes hard to read, adjust the foreground or background HSL values

3. Inconsistent component styling: Some components may need additional styling adjustments

Additional Resources

For more information on customizing your HPC Dashboard:

• shadcn/ui Documentation
• Tailwind CSS Color Customization