feat(#4078): List view and colour theming

[orochibraru]

What is this PR about?

This pull request introduces significant improvements to the UI customization and layout flexibility in the Dokploy dashboard. The main highlights are the addition of a user-selectable color theme system, a persistent layout switcher for cards (grid/list), and several visual polish enhancements to interactive components. These changes aim to enhance user experience by allowing more personalization and a more modern, interactive interface.

UI Customization and Theming:

• Introduced a new color theme system: Added ColorThemeProvider and ColorThemePicker components, enabling users to select from multiple colour themes.
• The selected theme is persisted in localStorage and applied globally.
• The theme picker is now available in the profile settings under a new Appearance section.

Card Layout Flexibility:

• Added a persistent card layout switcher: Introduced CardsLayout, LayoutSwitcher, and related logic, allowing users to toggle between grid and list views for cards in both the projects dashboard and environment pages.
• The chosen layout is saved in localStorage, ensuring user preference is remembered across sessions.
• The default layout remains grid.

Visual and Interaction Enhancements:

• Improved card and sidebar visuals: Updated card hover states to use a more prominent background (hover:bg-primary/10), and enhanced sidebar menu button and icon colour transitions for clearer active and hover feedback.
• Tabs active state colour: Changed active tab text colour to use the primary colour for better visibility.

These changes collectively provide a more customisable, visually appealing, and user-friendly dashboard experience.

Checklist

Before submitting this PR, please make sure that:

• You created a dedicated branch based on the canary branch.
• You have read the suggestions in the CONTRIBUTING.md file https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#pull-request
• You have tested this PR in your local instance. If you have not tested it yet, please do so before submitting. This helps avoid wasting maintainers' time reviewing code that has not been verified by you.

Issues related (if applicable)

closes #4078

Screenshots (if applicable)

All the following have been taken with the blue accent color.

Dashboard (Grid view hovering layout switching toggle button)

Dashboard (List view hovering layout switching goggle button)

Environment services (Grid view hovering layout switching toggle button)

Environment services (List view hovering layout switching toggle button)

Account page with colour picker

Greptile Summary

This PR adds three quality-of-life features to the Dokploy dashboard: a multi-colour accent theme system persisted in localStorage, a grid/list layout switcher for the projects and environment pages also persisted in localStorage, and visual polish to sidebar item hover states and active tab colours.

The colour theming implementation is solid — the provider uses useLayoutEffect to synchronise the data-color-theme attribute before paint (avoiding a flash), validates the stored value against the allowed list, and the CSS variable overrides cover both light and dark modes correctly.

Key issues found:

• P1 — Toggle is not controlled, breaking the layout switcher for the default state. The Toggle in LayoutSwitcher is uncontrolled (no pressed prop), so its internal state always starts as false. With the mapping pressed=true → GRID and pressed=false → LIST, a user whose layout is GRID (the default) will find that the first click is a no-op (it sets GRID again). They must click twice to switch to list view. Fix: pass pressed={layout === Layout.LIST} and flip the mapping accordingly.
• P2 — className prop is silently dropped in CardsLayout. The component extends HTMLAttributes<HTMLDivElement> and destructures className, but never merges it into the cn() call on the inner <div>.
• P2 — Wide-screen breakpoints removed from the projects dashboard. The original grid in show.tsx used 2xl:grid-cols-4 3xl:grid-cols-5; CardsLayout is capped at xl:grid-cols-3, leaving large monitors with fewer columns than before.

Confidence Score: 4/5

Safe to merge after fixing the Toggle state bug, which causes the layout switcher to require two clicks from the default grid view.

One P1 defect exists in cards-layout.tsx: the uncontrolled Toggle makes the layout switcher require two clicks when starting from the default grid layout. The colour theming and sidebar changes are clean. The two P2 items (silent className drop, missing 2xl/3xl breakpoints) are non-blocking but worth addressing.

apps/dokploy/components/ui/cards-layout.tsx requires attention for the Toggle state synchronisation fix and the className/breakpoint regressions.

Important Files Changed

Filename	Overview
apps/dokploy/components/ui/cards-layout.tsx	New component introducing grid/list layout switching; contains a P1 Toggle state synchronization bug that requires two clicks to switch from the default grid layout, plus a silent className drop and missing wide-screen breakpoints.
apps/dokploy/components/ui/color-theme-provider.tsx	New context-based color theme provider using useLayoutEffect to avoid flash; validates stored value and applies a data attribute to the html element. No issues found.
apps/dokploy/components/ui/color-theme-picker.tsx	Color swatch picker that maps theme names to display hex values and calls the context setter on click. Clean and straightforward.
apps/dokploy/styles/globals.css	Adds CSS variable overrides for nine color themes; both light and dark variants are covered with correct attribute selectors.
apps/dokploy/pages/_app.tsx	Wraps the existing app tree in ColorThemeProvider; minimal and correct change.
apps/dokploy/pages/dashboard/settings/profile.tsx	Adds an Appearance card with ColorThemePicker and ModeToggle to the profile settings page. Clean integration.
apps/dokploy/components/dashboard/projects/show.tsx	Integrates LayoutSwitcher and CardsLayout; also removes lg:max-w-md constraint on card wrappers and drops 2xl/3xl grid breakpoints.
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx	Integrates LayoutSwitcher and CardsLayout for the environment services list. The toggle bug in CardsLayout affects this page too.
apps/dokploy/components/layouts/side.tsx	Enhances sidebar active/hover state styling using primary color and smooth transitions. Visual-only change, no logic issues.
apps/dokploy/components/ui/tabs.tsx	Changes active tab text color from foreground to primary. Single-class tweak, no issues.

_{Reviews (1): Last reviewed commit: "chore: rollback vscode settings (not in ..." | Re-trigger Greptile}

Greptile also left 3 inline comments on this PR.

_{(2/5) Greptile learns from your feedback when you react with thumbs up/down!}