docs(dashboard): Add themeing section in react admin dashboard category (#3709)

Co-authored-by: Housein Abo Shaar <76689341+GogoIsProgramming@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

docs/docs/guides/extending-the-dashboard/getting-started/index.md

@@ -138,11 +138,12 @@ which you can later use when customizing the dashboard.
 
 Now that you have the dashboard up and running, you can start extending it:
 
-- [CMS Tutorial](/guides/extending-the-dashboard/cms-tutorial/) - Complete tutorial showing how to build a CMS plugin with custom pages and forms
 - [Navigation](/guides/extending-the-dashboard/navigation/) - Add custom navigation sections and menu items
 - [Page Blocks](/guides/extending-the-dashboard/page-blocks/) - Add custom blocks to existing pages
 - [Action Bar Items](/guides/extending-the-dashboard/action-bar-items/) - Add custom buttons to page action bars
 - [Tech Stack](/guides/extending-the-dashboard/tech-stack/) - Learn about the technologies used in the dashboard
+- [Dashboard Theming](/guides/extending-the-dashboard/theming) - Customize the look and feel of the dashboard
+- [CMS Tutorial](/guides/extending-the-dashboard/cms-tutorial/) - Complete tutorial showing how to build a CMS plugin with custom pages and forms
 
 ## Still to come
 

docs/docs/guides/extending-the-dashboard/theming/index.md

@@ -0,0 +1,180 @@
+---
+title: 'Dashboard Theming'
+---
+
+The Vendure dashboard uses a modern theming system based on **CSS custom properties** and [Tailwind CSS](https://tailwindcss.com/) . This guide shows you how to customize the colors and styles by modifying the theme variables in the Vite plugin.
+
+The dashboard also uses the same theming methodology as [shadcn/ui](https://ui.shadcn.com/docs/theming)
+
+It also uses the [shadcn theme provider implementation](https://ui.shadcn.com/docs/dark-mode/vite) for Vite
+
+## Using Themes in Your Components
+
+The Vendure dashboard provides a simple way to access theme variables in your components. Here's how to use them:
+
+### Using Tailwind Classes
+
+The easiest way to use theme colors is through Tailwind variable CSS classes:
+
+```tsx
+function ProductIdWidgetComponent() {
+    return (
+        <div className="text-sm">
+            <p>
+                This is a custom widget for the product:
+                <strong className="ml-1 text-foreground">{product.name}</strong>
+            </p>
+            <p className="mt-2 text-muted-foreground">Product ID: {product.id}</p>
+        </div>
+    );
+}
+```
+
+## Customizing Theme Colors
+
+You can customize the dashboard theme colors by modifying the `theme` configuration in your `vite.config.mts` file. Here's an example showing how to change the primary brand colors:
+
+```typescript
+// vite.config.mts
+import { vendureDashboardPlugin } from "@vendure/dashboard/plugin";
+import { defineConfig } from "vite";
+// ...other imports
+
+
+export default defineConfig({
+  plugins: [
+    vendureDashboardPlugin({
+      vendureConfigPath: "./src/vendure-config.ts",
+      adminUiConfig: { apiHost: "http://localhost", apiPort: 3000 },
+      gqlOutputPath: "./src/gql",
+
+      // Theme section
+      theme: {
+        light: {
+          // Change the primary brand color to blue
+          primary: "oklch(0.55 0.18 240)",
+          "primary-foreground": "oklch(0.98 0.01 240)",
+          
+          // Update the brand colors to match
+          brand: "#2563eb", // Blue-600
+          "brand-lighter": "#93c5fd", // Blue-300
+        },
+        dark: {
+          // Corresponding dark mode colors
+          primary: "oklch(0.65 0.16 240)",
+          "primary-foreground": "oklch(0.12 0.03 240)",
+          
+          // Same brand colors work for both themes
+          brand: "#2563eb",
+          "brand-lighter": "#93c5fd",
+        },
+      },
+
+    }),
+  ],
+});
+```
+
+## Inspecting element colors in the browser
+
+To identify the exact color values used by dashboard elements, you can use your browser's developer tools:
+
+- Right-click on any element and select "Inspect" to open the developer panel.
+- Navigate to the **Styles** tab.
+- From there, you can examine the CSS properties and see the actual color values (hex codes, RGB values, or CSS custom properties) being applied to that element.
+
+![inspection-gif](show-colour-value-inspection.gif)
+
+## Available Theme Variables
+
+The dashboard defines comprehensive theme variables that are automatically available as Tailwind classes:
+
+### Core Colors
+
+| Variable | Description |
+|----------|-------------|
+| `--background` | Main background |
+| `--foreground` | Main text color |
+| `--card` | Card background |
+| `--card-foreground` | Card text |
+| `--popover` | Popover background |
+| `--popover-foreground` | Popover text |
+
+### Interactive Colors
+
+| Variable | Description |
+|----------|-------------|
+| `--primary` | Primary brand color |
+| `--primary-foreground` | Text on primary |
+| `--secondary` | Secondary actions |
+| `--secondary-foreground` | Text on secondary |
+| `--accent` | Accent elements |
+| `--accent-foreground` | Text on accent |
+
+### Semantic Colors
+
+| Variable | Description |
+|----------|-------------|
+| `--destructive` | Error/danger actions |
+| `--destructive-foreground` | Text on destructive |
+| `--success` | Success states |
+| `--success-foreground` | Text on success |
+| `--muted` | Muted elements |
+| `--muted-foreground` | Muted text |
+
+### Border and Input Colors
+
+| Variable | Description |
+|----------|-------------|
+| `--border` | Border color |
+| `--input` | Input background |
+| `--ring` | Focus ring color |
+
+### Chart Colors
+
+| Variable | Description |
+|----------|-------------|
+| `--chart-1` | Chart color 1 |
+| `--chart-2` | Chart color 2 |
+| `--chart-3` | Chart color 3 |
+| `--chart-4` | Chart color 4 |
+| `--chart-5` | Chart color 5 |
+
+### Sidebar Colors
+
+| Variable | Description |
+|----------|-------------|
+| `--sidebar` | Sidebar background |
+| `--sidebar-foreground` | Sidebar text |
+| `--sidebar-primary` | Sidebar primary |
+| `--sidebar-primary-foreground` | Text on sidebar primary |
+| `--sidebar-accent` | Sidebar accent |
+| `--sidebar-accent-foreground` | Text on sidebar accent |
+| `--sidebar-border` | Sidebar border |
+| `--sidebar-ring` | Sidebar focus ring |
+
+### Brand Colors
+
+| Variable | Description |
+|----------|-------------|
+| `--brand` | Primary brand color |
+| `--brand-lighter` | Lighter brand variant |
+| `--brand-darker` | Darker brand variant |
+
+| Variable | Description |
+|----------|-------------|
+| `dev-mode` | Dev-mode ring |
+| `dev-mode-foreground` | Dev-mode foreground |
+
+### Typography
+
+| Variable | Description |
+|----------|-------------|
+| `--font-sans` | Sans-serif font |
+| `--font-mono` | Monospace font |
+
+### Border Radius
+
+| Variable | Description |
+|----------|-------------|
+| `--radius` | Base border radius |

docs/sidebars.js

@@ -140,10 +140,11 @@ const sidebars = {
             },
             items: [
                 'guides/extending-the-dashboard/getting-started/index',
-                'guides/extending-the-dashboard/cms-tutorial/index',
                 'guides/extending-the-dashboard/navigation/index',
                 'guides/extending-the-dashboard/page-blocks/index',
                 'guides/extending-the-dashboard/action-bar-items/index',
+                'guides/extending-the-dashboard/theming/index',
+                'guides/extending-the-dashboard/cms-tutorial/index',
                 {
                     type: 'category',
                     label: 'Custom Form Elements',